一個頁面中動態創建多個kindeditor編輯器

很多使用我們在編寫后臺的時候都會在一個頁面中調用多個kindeditor編輯器，為此你可能要寫多段如下一般的代碼：

KindEditor.ready(function(K) {
    var editor = K.create('textarea.cont', {
        cssPath : '__PUBLIC__/keditor/plugins/code/prettify.css',
        uploadJson :'{:U("System/Keditor/upload/thumb/480_0")}',
        fileManagerJson:'{:U("System/Keditor/manager")}',
        allowFileManager : true,
        filterMode:false,//重點是這里，關閉代碼過濾
        afterBlur: function(){this.sync();}
    });
    prettyPrint();
});

偶爾寫上多段倒也無可厚非，但如果太多編輯器就有點不太好了……另外，也有可能需要動態創建kindeditor編輯器，這時你可能需要用到下面這段js代碼

 $('#addOne').click(function(){
    //動態創建。點擊按鈕創建kindeditor
    var num=$('#num').val();
    for(i=0;i<num;i++){
        AddLoadEditor();
    }
});
function LoadEditor(TextName) {
    //加載編輯器
    var editor = KindEditor.create('textarea.cont', {
        cssPath : '__PUBLIC__/keditor/plugins/code/prettify.css',
        uploadJson :'__MODULE__/Keditor/upload',
        fileManagerJson:'{:U('System/Keditor/manager')}',
        allowFileManager : true,
        afterChange: function() {
            this.sync();
        },
        afterBlur: function() {
            this.sync();
        }
    });
    return editor;
}
function AddLoadEditor() {
    //新建kindeditor時添加一些附屬的內容
    var strHtml;
    strHtml = '<div class="form-group li"><label>分類標題</label><input type="text" name="t[]" class="form-control" placeholder="分類標題"><label>分類說明</label><textarea name="c[]" class="form-control cont" style="height:200px;" placeholder="分類說明"></textarea></div>';
    $('.lis').append(strHtml);
    var arrEditor = $("textarea.cont");
    $.each(arrEditor, function() {
        LoadEditor();// 加載編輯器
    });
}

實現效果：輸入需要創建的編輯器的數量，然后點擊增加按鈕即可

© 致遠 2020-01-31，原創內容，轉載請注明出錯：一個頁面中動態創建多個kindeditor編輯器