天天看點

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);
......
//回顯的内容就看背景傳過來的資料字段咯!!!           

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

繼續閱讀