网站内容编辑器(官网下载KindEditor-在线HTML编辑器代码((Index))

　　网站内容编辑器(官网下载KindEditor-在线HTML编辑器代码((Index))

　　具体项目搭建步骤：从官网下载KindEditor需要的文件，地址：About-KindEditor-Online HTML Editor。

　　

　　KindEditor 下载

　　目录结构如下：

　　

　　下载目录

　　我们使用这个演示。其他语言请参考对应的demo。

　　

　　我们需要看这个演示

　　2. 新建一个MVC程序，这里不再赘述。我们不会自己做百度。这里我们使用MVC的框架版本。

　　这里我们继续看上面下载的demo：

　　upload_json.ashx：用于处理上传的图片；

　　file_manager_json.ashx：用于返回前台显示。

　　当然，不用ashx文件也可以，但是到时候移植到Control方法就得花点时间了。

　　演示

　　我们在项目文件中创建一个Ashx文件夹来存储这个文件。

　　

　　ashx 文件

　　记得更改两个文件中的路径。我的文件存储在 ImageContent 文件夹中。

　　public class FileManager : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

//根目录路径，相对路径

String rootPath = "/ImageContent/";

//根目录URL，可以指定绝对路径，比如 http://www.yoursite.com/attached/

String rootUrl ="/ImageContent/";

//图片扩展名

String fileTypes = "gif,jpg,jpeg,png,bmp";

-------------------------------------------------------------------------------------------------------

public class Upload : IHttpHandler

{

private HttpContext context;

public void ProcessRequest(HttpContext context)

{

//文件保存目录路径

String savePath = "/ImageContent/";

//文件保存目录URL

String saveUrl = "/ImageContent/";

　　我们来添加一个控制器：代码可以参考下面的代码

　　using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.IO;

namespace KindEditor.Controllers

{

public class KindEditorController : Controller

{

//富文本编辑器界面

public ActionResult Index()

{

return View();

}

//接收提交的数据，我们用文本文件来模拟写入数据库

[HttpPost]

[ValidateInput(false)]

public ActionResult GetString(string content)

{

try

{

//注意获取路径的写法

string path= Server.MapPath("~/HtmlText.txt");

using (StreamWriter stream = new StreamWriter(path, false, System.Text.Encoding.UTF8))

{

stream.Write(content);

}

//System.IO.File.WriteAllText("HtmlText.txt", content, System.Text.Encoding.UTF8);

}

catch (Exception)

{

throw;

}

return Content("Success");

}

//渲染提交过来的数据

public ActionResult ShowContent()

{

string content;

try

{

string path = Server.MapPath("~/HtmlText.txt");

using (StreamReader streamReader = new StreamReader(path, System.Text.Encoding.UTF8))

{

content = streamReader.ReadToEnd();

}

//content = System.IO.File.ReadAllText("HtmlText.txt");

}

catch (Exception)

{

throw;

}

ViewData["content"] = content;

return View();

}

}

}

　　Index()方法对应的前端接口：

　　

@{

Layout = null;

}

KindEditor.ready(

function (K) {

editor = K.create('#editor_id', {

//上传处理程序的路径

uploadJson: '/Ashx/upload_json.ashx',

imageSizeLimit: '10MB', //批量上传图片单张最大容量

imageUploadLimit: 30, //批量上传图片同时上传最多个数

//文件管理处理程序的路径

fileManagerJson: '/Ashx/upload_json.ashx',

allowFileManager: true

});

});

Index

$("#savedoc").click(function () {

$.post("/KindEditor/GetString", { content: editor.html()},

function (data) {

if (data =="Success") {

window.location.href = '/KindEditor/ShowContent';

}

});

})

　　我们的前端重新渲染保存的数据：

　　

@{

Layout = null;

}

ShowContent

@Html.Raw(ViewData["content"]);

　　到此就大功告成了，一些具体细微的设置可以参考官方文档，但是我发现KindEditor的最新更新已经在2016年了，其实我们通过破解调试点可以发现富文本编辑器的本质是给内容添加 HTML 标签。当我们使用它们时，我们以标签的形式显示它们。感谢您的阅读。需要源码的可以评论源码。