javascript - 工具栏配置不适用于内联 CKEditor

Question

我尝试将一个非常简单的工具栏配置应用于内联 CKEditor。目标是只显示一个粗体按钮，但它不起作用。为什么？

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

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

Answer 1

我已经 fork 并更新了你的 fiddle :https://jsfiddle.net/Comandeer/q6x6s6ga/30/

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

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

您的代码有两个问题:

1. 您没有考虑到 CKEditor 会自动将所有 [contenteditable=true] 元素转换为其实例，您必须 disable it first .因此，直接在您的 JS 代码中添加 [contenteditable] 然后创建内联编辑器会更容易。
2. 您的工具栏语法错误。 The configuration option将数组或字符串作为参数——而不是对象。

编辑:带有 CKEDITOR.disableAutoInline 的版本 https://jsfiddle.net/Comandeer/q6x6s6ga/31/

问题在于等待 onload 事件。如果您只是将该代码放在 body 的末尾，则一切正常。