配置 CKEditor 5 功能

CKEditor 5 的功能由专门的功能提供，可通过可配置的工具栏或键盘快捷键访问。其中一些功能仅在某些 编辑器类型 中可用。

# 添加功能

所有 CKEditor 5 的功能 都由插件实现。您可以通过从名为 ckeditor5 的主 CKEditor 5 包中导入插件来添加插件。

下面列出了一个添加 块缩进 功能的示例配置。

import { ClassicEditor, Indent, IndentBlock, BlockQuote } from 'ckeditor5';
/* ... */

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Indent, IndentBlock, BlockQuote, /* ... */ ], // Plugins import.
        toolbar: [ 'outdent', 'indent', 'blockquote', /* ... */ ] // Toolbar configuration.
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

请注意，某些功能可能需要多个插件才能运行，如上所示。这种细粒度方法使集成人员能够根据自己的特定需求调整可用功能。这在设置过程中完成，Builder 是选择所有所需功能的最简单方法。

# 添加高级功能

CKEditor 5 高级功能的导入方式相同。但是，它们有自己的包，名为 ckeditor5-premium-features，用于导入。这些也 需要许可证。请参见下面的示例，添加 PDF 导出功能并对其进行配置。

import { ClassicEditor } from 'ckeditor5';
import { ExportPdf } from 'ckeditor5-premium-features';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ ExportPdf, /* ... */ ],
        toolbar: [ 'exportPdf', '|', /* ... */ ],
        exportPdf: {
            tokenUrl: 'https://example.com/cs-token-endpoint',
            stylesheets: [
                './path/to/fonts.css',
                'EDITOR_STYLES',
                './path/to/style.css'
            ],
            fileName: 'my-file.pdf',
            converterOptions: {
                format: 'A4',
                margin_top: '20mm',
                margin_bottom: '20mm',
                margin_right: '12mm',
                margin_left: '12mm',
                page_orientation: 'portrait'
            }
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 配置编辑器设置

将编辑器集成到您的应用程序时，您可以通过将具有配置选项的 JavaScript 对象传递给 create() 方法来自定义其功能。在 EditorConfig 中定义的这些设置允许对编辑器功能进行广泛的自定义。请记住，自定义取决于编辑器设置和加载的插件。下面的示例代码片段显示了工具栏、标题功能、字体系列和颜色选择器设置的配置

import { ClassicEditor, Heading, BlockQuote, Bold, Italic, Font, Link, List } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: [
            'heading',
            '|',
            'bold',
            'italic',
            'fontSize',
            'fontFamily',
            'fontColor',
            '|',
            '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' }
            ]
        },
        fontFamily: {
            options: [
                'default',
                'Ubuntu, Arial, sans-serif',
                'Ubuntu Mono, Courier New, Courier, monospace'
            ]
        },
        fontColor: {
            colorPicker: {
                // Use 'hex' format for output instead of 'hsl'.
                format: 'hex'
            }
        },
    } )
    .catch( error => {
        console.log( error );
    } );

请参阅 EditorConfig 了解所有可用的配置选项。此外，请查看各个 功能指南，其中列出了每个功能可用的各种配置选项。

# 删除功能

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

在下面的示例中，Heading 插件已删除

import { ClassicEditor, Heading, BlockQuote, Bold, Italic, Link, List } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        removePlugins: [ 'Heading' ], // Remove a plugin from the setup.
        toolbar: [ 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote' , 'link' ]
    } )
    .catch( error => {
        console.log( error );
    } );

您可能还想删除 Link 插件，如下所示

import { ClassicEditor, Heading, BlockQuote, Bold, Italic, Link, List } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        removePlugins: [ 'Heading', 'Link' ], // Remove a few plugins from the setup.
        toolbar: [ 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote' ]
    } )
    .catch( error => {
        console.log( error );
    } );

但是，这会导致浏览器控制台中抛出错误

CKEditorError: plugincollection-required {"plugin":"Link","requiredBy":"Autolink"}
Read more: https://ckeditor.npmjs.net.cn/docs/ckeditor5/latest/support/error-codes.html#error-plugincollection-required

现在提醒您，CKEditor 5 中的某些插件相互依赖。在这种情况下，Autolink 插件需要 Link 插件才能工作。为了使上述代码片段工作，Autolink 插件也必须被删除

import { ClassicEditor, Heading, BlockQuote, Bold, Italic, Autolink, Link, List } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        removePlugins: [ 'Heading', 'Link', 'Autolink' ], // Remove a few plugins from the setup.
        toolbar: [ 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote' ]
    } )
    .catch( error => {
        console.log( error );
    } );