如何从源构建ckeditor5气球块？

Question

有五个ckeditor5现成的构建：经典，内联，气球，气球块和文档.我想使用气球块布局，但我想构建它从源代码(如建议)，以集成到我的Vue 2.x应用程序(与webpack和Vue CLI 3)。从源头构建文档以经典编辑器为例，它不使用预先构建的包@ckeditor5/ckeditor5-build-classic，而是导入源包@ckeditor5/ckeditor5-editor-classic，并将其用作可以添加所有需要的插件的基础。

气球布局有自己的源代码包@ckeditor5/ckeditor5-editor-balloon，可以类似地使用它，但是我找不到气球块的任何源包。如果我应该使用...editor-balloon包作为基础，那么有什么文档可以告诉我如何从源代码构建自己的气球块吗？

我刚刚了解到，从地沟中访问的隐藏工具栏实际上是一个插件calle BlockToolbar，所以我想我只需要使用editor-balloon包作为源库，并包含/配置这个插件。如果其他人没有提供一个更完整的示例配置示例，当我有什么东西时，我会用我自己的解决方案发布一个答案。同时，块工具栏插件的这里的医生有很多关于如何设置它的信息。

Answer 1

您需要安装包'@ckeditor/ckeditor5-ui'，它应该已经是‘@ckeditor/ckeditor 5-编辑器-气球’本身的依赖项，并导入插件'BlockToolbar‘并在'create()’方法调用中使用它。就像这样：

import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
import { BlockToolbar } from '@ckeditor/ckeditor5-ui';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';

BalloonEditor
    .create(document.querySelector('#editor'), {
        plugins: [BlockToolbar, Essentials, Paragraph], // BlockToolbar added here!
        toolbar: ['bold', 'italic'],
        blockToolbar: ['heading', 'paragraph', 'heading1', 'heading2', 'bulletedList', 'numberedList'],
    });