1

我正在试验 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 的第二个参数。正如所写，编辑器工作正常。除了工具栏问题。当错字被修复时，它根本不起作用。

4

2 回答 2

5

我创建了一个 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' ],
  }
);

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

请记住，默认构建中不包含下划线，因此我将其从您的工具栏配置中删除。也许这就是你感到困惑的原因。这里和这里是关于在默认构建中不包括下划线的一些解释。如果您出于某种原因确实需要它，请考虑创建自己的构建。

于 2017-10-24T09:35:07.120 回答
0

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', ...],

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

于 2019-12-17T06:05:17.373 回答