配置 - 集成 - 构建文档 - ckeditor5中文文档

当在你的页面创建编辑器后，就可以使用配置修改许多方面。例如：

ClassicEditor

.create( document.querySelector( '#editor' ), {

        toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],

        heading: {

    options: [

                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },

                { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },

                { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }

            ]

        }

    } )

    .catch( error => {

    console.log( error );

} );

就像你看到的那样，配置就是给create()方法传入一个简单的js对象。

移除功能特性

构建版本默认启用包中包含的所有功能。 它们被定义为CKEditor的插件。

在某些情况下，您可能需要在应用程序中使用不同的编辑器设置，所有这些都基于相同的构建。 为此，您需要在运行时控制编辑器中可用的插件。

在下面的例子中，移除了标题和链接插件：

// Remove a few plugins from the default setup.

ClassicEditor

.create( document.querySelector( '#editor' ), {

removePlugins: [ 'Heading', 'Link' ],

        toolbar: [ 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote' ]

    } )

    .catch( error => {

console.log( error );

} );

使用config.removePlugins从CKEditor构建中删除插件时要小心。 如果删除的插件提供工具栏按钮，则构建中包含的默认工具栏配置将变为无效。 在这种情况下，您需要提供更新的工具栏配置，如上例所示。

插件列表

每个版本都有许多可用的插件。 您可以轻松列出构建中可用的所有插件：

ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName );

添加特性

由于CKEditor构建不包含所有可能的功能，因此向其添加更多功能的唯一方法是创建自定义构建。

工具栏配置

在包含工具栏的构建中，为其定义了最佳默认配置。 但是，您可能需要不同的工具栏排列，这可以通过配置来实现。

每个编辑器可能有不同的工具栏配置方案，因此建议查阅其文档。 在任何情况下，以下示例可能会给您一个大致的想法：

ClassicEditor

.create( document.querySelector( '#editor' ), {

toolbar: [ 'bold', 'italic', 'link' ]

    } )

    .catch( error => {

console.log( error );

} );

以上严格来说是UI相关配置。 删除工具栏项不会从编辑器内部删除该功能。 如果您使用工具栏配置的目标是删除功能，那么正确的解决方案是同时删除各自的插件。 查阅删除功能以获取更多信息。

列出可用项目

您可以使用以下代码段检索编辑器中可用的所有工具栏项：

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

其他配置选项

查阅 EditorConfig 了解所有可用配置项.

一些选项可能需要加载你使用的构建版本没有的插件。请查阅关于自定义构建。

文章作者ianzhi,原文地址：https://cloud.tencent.com/developer/article/1476869

文章版权归作者所有，转载请保留此声明。