代码之家  ›  专栏  ›  技术社区  ›  Russell Salsbury

CKEditor 5 InlineEditor——如何配置工具栏?

  •  1
  • Russell Salsbury  · 技术社区  · 7 年前

    我正在试验CKEditor 5 InlineEditor。我想修改工具栏以添加其他选项。例如,以下脚本:

    <script type="text/javascript">
    InlineEditor
        .create( document.querySelector( '#personal-life', {
            toolbar: [ 'headings', 'bold', 'italic', 'underline', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
        } ) )
        .catch( error => {
        console.error( error );
    } );
    </script>
    

    它仍然显示默认工具栏,而不是指定的工具栏。文档中的示例显示了ClassicEditor。可以使用InlineEditor吗?如果是这样,我做错了什么?

    编辑:如前所述,有一个拼写错误。工具栏对象应该是的第二个参数。不要创建的第二个参数。查询选择器。正如所写的那样,编辑工作得很好。除了工具栏问题。当拼写错误被修复时,它根本不起作用。

    2 回复  |  直到 7 年前
        1
  •  5
  •   Szymon Cofalik    7 年前

    我创建了一个js小提琴,看起来一切都很好: https://jsfiddle.net/9vthmvLc/ .

    <div id="editor">
      Lorem ipsum
    </div>
    
    InlineEditor.create(
      document.getElementById( 'editor' ),
      {
        toolbar: [ 'headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
      }
    );
    

    请记住,默认版本中不包括下划线,所以我将其从工具栏配置中删除。也许这就是你困惑的原因。 Here here 是关于在默认版本中不包含下划线的一些解释。如果你真的出于某种原因需要它,考虑一下 creating your own build

        2
  •  0
  •   Fabio    5 年前

    您可以通过点击查看所有可用于自定义特定构建的工具栏的选项 F12 要在浏览器中打开开发者工具(在具有要自定义的工具栏的网页中导航时),请单击 console 并运行以下代码:

    Array.from( editor.ui.componentFactory.names() );
    

    Array.from( editor.ui.componentFactory.names() );
    (21) […]
    0: "undo"
    1: "redo"
    2: "bold"
    3: "italic"
    4: "blockQuote"
    5: "ckfinder"
    6: "imageTextAlternative"
    7: "imageUpload"
    8: "heading"
    9: "imageStyle:full"
    10: "imageStyle:side"
    11: "indent"
    12: "outdent"
    13: "link"
    14: "numberedList"
    15: "bulletedList"
    16: "mediaEmbed"
    17: "insertTable"
    18: "tableColumn"
    19: "tableRow"
    20: "mergeTableCells"
    ​
    length: 21
    

    然后,您可以在 toolbar

     toolbar: [ 'undo', 'redo', ...],
    
    

    它适用于任何类型的工具栏,无论是内联工具栏、经典工具栏还是其他工具栏。