工具欄配置不適用於嵌入式CKEditor

我嘗試將一個非常簡單的工具欄配置應用於嵌入式CKEditor。目標是隻顯示一個粗體按鈕，但它不起作用。爲什麼？工具欄配置不適用於嵌入式CKEditor

CKEDITOR.inline(el.get(0), 
{ 
    toolbar: 
    [ 
    { name: 'basicstyles', items: [ 'Bold' ] } 
    ] 
});

https://jsfiddle.net/adrianrosca/q6x6s6ga/

來源

2016-02-17 Adrian Rosca

我分叉和更新你的小提琴：https://jsfiddle.net/Comandeer/q6x6s6ga/30/

$(function() { 
    var el = $('#editor1'); 
    el.attr('contenteditable', true); 

    CKEDITOR.inline(el.get(0), 
    { 
     toolbar: [ [ 'Bold' ] ] 
    }); 
});

有兩個問題與您的代碼：

你沒有考慮到這一事實CKEditor的所有[contenteditable=true]元素會自動轉換成它的情況下，你必須disable it first。因此，在您的JS代碼中添加[contenteditable]就更容易了，然後創建一個內聯編輯器。
您的工具欄語法錯誤。 The configuration option將數組或字符串作爲參數 - 不是對象。

編輯：版本CKEDITOR.disableAutoInlinehttps://jsfiddle.net/Comandeer/q6x6s6ga/31/

的問題是在等待onload事件。如果您只是將該代碼放在body的末尾，那麼一切正常。

來源

2016-02-19 12:55:39 Comandeer

配置可以用'CKEDITOR.disableAutoInline = true'設置，就像馬特在他的回答中所描述的那樣。你可以讓你的小提琴工作，而不是用jQuery添加contenteditable屬性？我試過，但無法使它工作... –

好吧，我用這樣的例子更新了我的答案。 – Comandeer

可以解決更新CKEDITOR源，即

http://cdn.ckeditor.com/4.5.7/standard/ckeditor.js

和編輯您的代碼如下：

$(function() 
{ 
    var el = $("div"); 
    CKEDITOR.disableAutoInline = true; 

    for (var inst in CKEDITOR.instances) { 
    CKEDITOR.instances[inst].destroy(); 
    } 

    CKEDITOR.inline(el.get(0), 
    { 
    toolbar: 
    [ 
     { name: 'basicstyles', items: [ 'Bold' ] } 
    ] 
    }); 
});

來源

2016-02-19 09:24:30 Matt

工具欄配置不適用於嵌入式CKEditor

回答

相關問題