Kingeditor 一个功能齐全的富文本

有时候同一个坑,我们会踩好几遍,而我们要做的就是思考怎样少踩几次

Kingeditor 官网  http://kindeditor.net/

HTML代码

<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");
            }
         }

有规划,有思考,有练习,有进步,进而成长

 

posted @ 2020-10-23 09:55  魔方の成长  阅读(224)  评论(0编辑  收藏  举报