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

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

ckeditor5 toolbar ckeditor

1

Russell Salsbury · 技术社区 · 9 年前

我正在试验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 回复 | 直到 9 年前

1

5

Szymon Cofalik 9 年前

我创建了一个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 6 年前

您可以通过点击查看所有可用于自定义特定构建的工具栏的选项 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', ...],

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