KindEdit富文本编辑器小结

话不多说,先上官方链接:http://kindeditor.net/demo.php,里面有详细的使用文档和方法讲解
因为我是同一个页面用了两个富文本编辑器,所以一开始摸不着头脑,看官方文档是能够看的明白,但是两个我就有点难以捉摸,不过这是相对我一开始使用的时候,现在我已经算是入门了,然后我最主要是讲解一下如何在一个页面使用多个富文本编辑器
首先按照官方说明引入必须文件,然后在页面中写入

<textarea id="content1" name="content" style="height:440px">textarea>
<textarea id="content2" name="content"  style="height:440px">textarea>
......//可以在后面添加

然后呢我们按照官方文档初始化

var editor = new Array();
        KindEditor.ready(function(K) {
        editor[0] = K.create("#content1",{
            allowFileManager : true,
            afterCreate : function() { this.sync();}, 
            afterBlur: function () { this.sync(); }
        });

        editor[1] = K.create("#content2", {
                allowFileManager : true,
                afterCreate : function() { this.sync();}, 
                afterBlur: function () { this.sync(); }
            });
// 往下可以添加更多kindeditor...
//afterCreate : function() { this.sync();}, 
//afterBlur: function () { this.sync(); }
//这两个操作都是为了我们在不使用form表单提交时能够同步我们编辑的文章
    html1 = editor[0].html();
    html2 = editor[1].html();
    html1 = $('.content1').val();
    html2 = $('.content2').val();
//这个就是简单的获取和赋值了,因为我们在富文本编辑器中编辑的文章是最终是要通过后台保存的,但是富文本编辑器都是动态添加的,所以我们在上面文章内容同步之后将其赋值给我们在页面中添加的textarea的value值中,这样我们在提交数据的时候就很简单的可以获取到了
        });

数据回显,我们在编辑修改文章的时候会发现我们需要通过已有文章内容来进行修改,这一步其实就需要我们获取后台传过来的数据来进行回显

editor[0].html(dat.data);
editor[1].html(dat.data);
......
//回显的内容就看后台传过来的数据字段咯!!!

嗨呀,自己半吊子水,写着就是为了以后不忘记!!!!

你可能感兴趣的:(大前端-javascript)