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

我正在试验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>

内联编辑
.create（document.querySelector（“#个人生活”{
工具栏：[“标题”、“粗体”、“斜体”、“下划线”、“链接”、“项目符号列表”、“数字列表”、“块引号”]，
} ) )
.catch（错误=>{
控制台错误（error）；
} );

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

---

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

我已经创建了一个js小提琴，看起来一切都很好：

乱数假文
InlineEditor.create(
document.getElementById（'editor'），
{
工具栏：[“标题”、“粗体”、“斜体”、“链接”、“项目符号列表”、“数字列表”、“块引号”]，
}
);

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

---

请记住，默认版本中不包括下划线，所以我将其从工具栏配置中删除。也许这就是你困惑的原因。并解释了在默认构建中不包含下划线。如果你真的需要某个原因，考虑一下。

< P>我创建了一个JS小提琴，看起来一切都很好：

乱数假文
InlineEditor.create(
document.getElementById（'editor'），
{
工具栏：[“标题”、“粗体”、“斜体”、“链接”、“项目符号列表”、“数字列表”、“块引号”]，
}
);

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

---

请记住，默认版本中不包括下划线，所以我将其从工具栏配置中删除。也许这就是你困惑的原因。并解释了在默认构建中不包含下划线。如果你真的需要某个原因，请考虑.< /p> ，你可以看到通过点击<代码> f12可以在浏览器中打开开发工具（当你在一个有你想要定制的工具栏的网页中导航）时，可以定制你的特定构建的工具栏的所有选项。然后单击控制台并运行以下代码：

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: [ 'undo', 'redo', ...],

---

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

您可以通过点击

F12

在浏览器中打开“开发人员工具”（在包含要自定义的工具栏的网页中导航）来查看可用于自定义特定版本工具栏的所有选项，然后单击控制台并运行以下代码：

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: [ 'undo', 'redo', ...],

---

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

谢谢。我看到的所有例子都是针对经典编辑的。我假设InlineEditor具有类似的功能。新手搞错了，谢谢。我看到的所有例子都是针对经典编辑的。我假设InlineEditor具有类似的功能。新手的错误。