1. 程式人生 > >KindEdit富文字編輯器小結

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);
......
//回顯的內容就看後臺傳過來的資料欄位咯!!!

嗨呀,自己半吊子水,寫著就是為了以後不忘記!!!!