在MVC3中使用富文本编辑器：KindEditor的配置及上传图片

时间：2023-03-08 16:43:05
在MVC3中使用富文本编辑器：KindEditor的配置及上传图片

现在比较常用的富文本编辑挺多的，如ueditor、fckeditor、kingeditor等，本文主要介绍一下KindEditor的配置与使用。

先去官网http://www.kindsoft.net/下载此编辑器的最新版本，比如现在的4.1.7版本，下载回来后，可以进行精简，将一些用不到的文件或文件夹删除。

一、将解压出来的整个KindEditor4.1.7文件夹复制到项目的Content文件夹下，并重命名为kindeditor。

可以将asp、jsp、php、examples这四个文件夹直接删除，没有用处，只留下asp.net、attached、lang、plungins、themes这五个文件夹和其它的JS文件就行了。

注意：图片上传成功后，是放在attached这个文件夹中的。

二、将asp.net文件夹下，bin文件夹中的LitJSON.dll这个文件，复制到整个项目的bin文件夹中。

三、在需要放置编辑器的视图，引入如下的文件以及配置

   <script type="text/javascript" src="@Url.Content("~/Content/kindeditor/kindeditor-min.js")"></script>

    <script type="text/javascript" src="@Url.Content("~/Content/kindeditor/lang/zh_CN.js")"></script>

    <script type="text/javascript">

            var editor;

            KindEditor.ready(function (K) {

                editor = K.create('textarea[name="content"]', {

                    resizeType: 1,

                    allowFileManager : true,

                    uploadJson: '@Url.Content("~/Content/kindeditor/asp.net/upload_json.ashx")',

                    fileManagerJson:'@Url.Content("~/Content/kindeditor/asp.net/file_manager_json.ashx")'

                });

            });

    </script>

注意uploadJson: '@Url.Content("~/Content/kindeditor/asp.net/upload_json.ashx")',这一行是用来实现图片上传的。name="content"，这里的content就是你用来存放文章正文的表格字段名称。

在需要放置编辑器的地方，加上代码

@Html.TextAreaFor(m => m.content, new { style = "width:750px;height:400px" })

content替换成您自己的表格字段名，宽度和高度可变。

至此，编辑器配置完成，也可以上传图片哦。但是图片的大小只能在1M以内。

相关文章