在线编辑器的使用-KindEditor

第一种：KindEditor编辑器

　　步骤一：加载相应的核心的文件

<link rel="stylesheet" href="/Public/kindeditor/themes/default/default.css" />

<script charset="utf-8" src="/Public/kindeditor/kindeditor-all-min.js"></script>

<script charset="utf-8" src="/Public/kindeditor/lang/zh-CN.js"></script>

　步骤二：自己打包了一个函数

  //在线编辑器

            function editor(selector){

                var editor;

                    var option={

                        resizeType : 1,

                        allowPreviewEmoticons : false,

                        allowImageUpload : false,

                        items : [

                            'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',

                            'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',

                            'insertunorderedlist', '|', 'emoticons', 'image', 'link'],//这里可以配置你想要在编辑器栏目要显示的栏目。不配置会显示全部

                        afterBlur: function(){this.sync();},

                    }

                    KindEditor.ready(function(K) {

                        editor = K.create(selector,option);

                        return editor.html();

                    });

            }

ps:我开始使用的最原始的简单的代码，只是创建了一个原型，所以说在提交数据数据的时候出现了找不到数据的情况，查看代码发现，编辑器会把表单元素替换成一个小页面。没找不到原来textarea ,所以要在配置里面加入下面的代码

  afterBlur: function(){this.sync();},

　　具体的作用的是，把编辑器中的数据同步到原来的表单元素中。这样在提交的时候就ok了。

　　步骤三：布置前台表单

<textarea name="content" class="form-control" id="content"  placeholder="请输入课程详情..." rows="5">{$info.content}</textarea>

　　步骤四：调用打包的js函数,有一点要注意，如果页面中的js过多，如果该函数放置的比较靠前又出现编辑器没有调用出来的情况，具体什么原因，没有弄明白，所以尽量调用的时候靠后放置。。

editor('#content');

　　步骤五：本人使用的是TP。而在模板中获取数据输出的时候会出现HTML代码没有解析的情况。所以需要对数据进行过滤这里使用 html_entity_decode() 函数

{$list.content|html_entity_decode}

后续还会继续扩展其他在线编辑的使用,尽量用简单的描述让大家快速入门,这里也是我自己研究查询出来了。可能会有不足，欢迎大家指出不足...

秒客网

在线编辑器的使用-KindEditor

相关文章