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

Question

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

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

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

Answer 1

您可以解决更新 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' ] }
    ]  
  });
});

Answer 2

我已经分叉并更新了你的fiddle：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.disableAutoInline https://jsfiddle.net/Comandeer/q6x6s6ga/31/

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

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

Toolbar config doesn't work with inline CKEditor

javascript

ckeditor

ckeditor4.x