Kingeditor 一个功能齐全的富文本
有时候同一个坑,我们会踩好几遍,而我们要做的就是思考怎样少踩几次
Kingeditor 官网 http://kindeditor.net/
<textarea name="content">KindEditor</textarea>
JS引用
<link href="themes/default/default.css" rel="stylesheet"/> <script src="js/kindeditor-all-min.js"></script>
<script src="lang/zh-CN.js"></script>
JS操作
<script> var editor; KindEditor.ready(function(K) { editor = K.create('textarea[name="content"]', { allowFileManager : true }); K('input[name=getHtml]').click(function(e) { alert(editor.html()); }); K('input[name=isEmpty]').click(function(e) { alert(editor.isEmpty()); }); K('input[name=getText]').click(function(e) { alert(editor.text()); }); K('input[name=selectedHtml]').click(function(e) { alert(editor.selectedHtml()); }); K('input[name=setHtml]').click(function(e) { editor.html('<h3>Hello KindEditor</h3>'); }); K('input[name=setText]').click(function(e) { editor.text('<h3>Hello KindEditor</h3>'); }); K('input[name=insertHtml]').click(function(e) { editor.insertHtml('<strong>插入HTML</strong>'); }); K('input[name=appendHtml]').click(function(e) { editor.appendHtml('<strong>添加HTML</strong>'); }); K('input[name=clear]').click(function(e) { editor.html(''); }); }); </script>
MVC中的文件上传
<script> var editor; KindEditor.ready(function(K) { editor= K.create('textarea[name="content"]', { allowFileManager: true, uploadJson: "UploadImage",--注意这,开始我也不知道填什么,MVC中填控制器中的方法(测试可以使用) allowImageRemote: false, afterUpload: function (url, data, name) { if (data.error == 1) { layer.msg(data.msg); } } }); }); </script>
MVC后台方法
[HttpPost] public ActionResult UploadImage(FormCollection form) { try { if (Request.Files.Count != 0) { HttpPostedFileBase file = Request.Files[0]; } return Json(new { error = 1, message = "上传失败" }, "text/html;charset=UTF-8"); } catch (Exception ex) { return Json(new { error = 1, message = "失败原因:" + ex.Message }, "text/html;charset=UTF-8"); } }
有规划,有思考,有练习,有进步,进而成长