CKEditor 5 InlineEditor -- 如何配置工具栏？

Question

我正在试验 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？如果是这样，我做错了什么？

编辑：正如所写，有一个错字。工具栏对象应该是 .create 的第二个参数，而不是 .querySelector 的第二个参数。如所写，编辑工作正常。除了工具栏问题。当拼写错误被修复时，它根本不起作用。

Answer 1

我创建了一个 js fiddle，看起来一切正常：https://jsfiddle.net/9vthmvLc/.

<div id="editor">
  Lorem ipsum
</div>

InlineEditor.create(
  document.getElementById( 'editor' ),
  {
    toolbar: [ 'headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
  }
);

fiddle使用CDN下载的CKEditor 5。我还通过 zip 下载在本地对其进行了测试。

请记住，默认版本中不包含下划线，因此我将其从您的工具栏配置中删除。也许这就是你感到困惑的原因。 Here and here is some explanation on not including underline in default builds. If you really need it for some reason, consider creating your own build.

Answer 2

您可以通过点击 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', ...],

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

CKEditor 5 InlineEditor -- 如何配置工具栏？

CKEditor 5 InlineEditor -- How to configure toolbar?

ckeditor

toolbar

ckeditor5