KindEdit富文本编辑器小结

编程知识 行业动态 更新时间:2024-06-13 00:22:49

话不多说,先上官方链接:http://kindeditor/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);
......
//回显的内容就看后台传过来的数据字段咯!!!

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

更多推荐

KindEdit富文本编辑器小结

本文发布于:2023-04-03 07:31:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/4cc49839ca2004a17cff0e05afc4a521.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:小结   编辑器   文本   KindEdit

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!