CKEditor 生态系统文档
Search
Contribute to this guide
主页/CKEditor 5/入门

guide(遗留) CKEditor 5 用于 CKEditor 5 协作功能的 DLL 构建

⚠️ 我们更改了安装方法，此遗留指南仅供用户参考。如果您想了解有关这些更改的更多信息，请参阅 从 DLL 构建迁移 指南。

本指南讨论了将 DLL 构建与 CKEditor 5 协作功能一起使用，是对 CKEditor 5 DLL 构建指南 的补充。在继续之前，请确保先阅读 基本指南。

# 带有 CKEditor 5 协作功能的 DLL 构建的结构

编辑器的 DLL 构建包含以下部分

  • 基本 DLL 构建。它是一个单一的 JavaScript 文件，它组合了多个核心 CKEditor 5 包的内容：utils、core、engine、ui、clipboard、enter、paragraph、select-all、typing、undo、upload、widget 和 watchdog。这些包要么是框架核心，要么是几乎所有编辑器安装都使用的功能。该构建在 npm 的 ckeditor5 包中提供。
  • 用于 CKEditor 5 协作功能的基本 DLL 构建。它是一个单一的 JavaScript 文件，包含协作功能包的所有必要文件，并扩展了 CKEditor 5 的基本 DLL。该构建在 npm 的 ckeditor5-collaboration 包中提供。
  • 与 DLL 兼容的包构建。每个不属于基本 DLL 构建的包都构建成一个与 DLL 兼容的 JavaScript 文件。CKEditor 5 协作功能 DLL 构建也以这种格式提供。这些 DLL 在 npm 的 @ckeditor/ckeditor5-[FEATURE_NAME] 包中提供。

要创建具有协作功能的编辑器，您需要使用两个基本 DLL 构建以及每个您要包含的插件的与 DLL 兼容的包构建。

# 将 CKEditor 5 协作功能作为 DLL 构建集成

使用 DLL 构建的确切方法取决于您的系统。本指南中介绍的是使用 <script> 标签的最简单方法。

要运行编辑器，您需要加载必要的文件（基本 DLL + CF 基本 DLL + 编辑器创建器 + 功能）。这些文件使用以下格式在 CKEditor5 全局中公开其内容

CKEditor5.packageName.moduleName

本指南使用 watchdog 功能 功能。您也可以在没有它的情况下集成协作功能，但强烈建议在启用实时协作时使用 watchdog。

以下是一个集成的示例

<div id="presence-list-container"></div>

<div class="container">
    <div id="editor"><p>Let's edit this together!</p></div>
    <div class="sidebar" id="sidebar"></div>
</div>

<!-- Base DLL build. -->
<!-- Note: It includes ckeditor5-paragraph too. -->
<script src="path/to/node_modules/ckeditor5/build/ckeditor5-dll.js"></script>

<!-- DLL-compatible build of ckeditor5-editor-classic. -->
<script src="path/to/node_modules/@ckeditor/ckeditor5-editor-classic/build/editor-classic.js"></script>

<!-- DLL-compatible builds of editor features. -->
<script src="path/to/node_modules/@ckeditor/ckeditor5-autoformat/build/autoformat.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-basic-styles/build/basic-styles.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-block-quote/build/block-quote.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-essentials/build/essentials.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-heading/build/heading.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-image/build/image.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-indent/build/indent.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-link/build/link.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-list/build/list.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-media-embed/build/media-embed.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-paste-from-office/build/paste-from-office.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-table/build/table.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-cloud-services/build/cloud-services.js"></script>

<!-- Base DLL build for Collaboration features -->
<script src="path/to/node_modules/ckeditor5-collaboration/build/ckeditor5-collaboration-dll.js"></script>

<!-- DLL-compatible builds of collaboration features. -->
<script src="path/to/node_modules/@ckeditor/ckeditor5-comments/build/comments.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-track-changes/build/track-changes.js"></script>
<script src="path/to/node_modules/@ckeditor/ckeditor5-real-time-collaboration/build/real-time-collaboration.js"></script>

<script>
    const watchdog = new CKEditor5.watchdog.EditorWatchdog( Editor );

    watchdog.create( document.querySelector( '#editor', {
        plugins: [
            CKEditor5.autoformat.Autoformat,
            CKEditor5.basicStyles.Bold,
            CKEditor5.basicStyles.Italic,
            CKEditor5.blockQuote.BlockQuote,
            CKEditor5.essentials.Essentials,
            CKEditor5.heading.Heading,
            CKEditor5.image.Image,
            CKEditor5.image.ImageCaption,
            CKEditor5.image.ImageStyle,
            CKEditor5.image.ImageToolbar,
            CKEditor5.image.ImageUpload,
            CKEditor5.indent.Indent,
            CKEditor5.link.Link,
            CKEditor5.list.List,
            CKEditor5.mediaEmbed.MediaEmbed,
            CKEditor5.paragraph.Paragraph,
            CKEditor5.pasteFromOffice.PasteFromOffice,
            CKEditor5.table.Table,
            CKEditor5.table.TableToolbar,
            CKEditor5.cloudServices.CloudServices,
            CKEditor5.comments.Comments,
            CKEditor5.trackChanges.TrackChanges,
            CKEditor5.realTimeCollaboration.RealTimeCollaborativeEditing,
            CKEditor5.realTimeCollaboration.RealTimeCollaborativeComments,
            CKEditor5.realTimeCollaboration.RealTimeCollaborativeTrackChanges,
        ],
        toolbar: {
            items: [
                'heading',
                '|',
                'bold',
                'italic',
                'link',
                'bulletedList',
                'numberedList',
                '|',
                'outdent',
                'indent',
                '|',
                'uploadImage',
                'blockQuote',
                'insertTable',
                'mediaEmbed',
                'undo',
                'redo',
                '-',
                'comment',
                '-',
                'trackChanges'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        comments: {
            editorConfig: {
                extraPlugins: [ CKEditor5.basicStyles.Bold, CKEditor5.basicStyles.Italic, CKEditor5.list.List, CKEditor5.autoformat.Autoformat ]
            }
        },
        presenceList: {
            container: document.querySelector( '#presence-list-container' )
        },
        sidebar: {
            container: document.querySelector( '#sidebar' )
        },
        cloudServices: {
            // PROVIDE CORRECT VALUES HERE:
            tokenUrl: 'https://example.com/cs-token-endpoint',
            uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/',
            webSocketUrl: 'your-organization-id.cke-cs.com/ws/'
        },
        collaboration: {
            channelId: 'document-id'
        }
    } ) );
</script>