如何从 Vue 3 中的在线构建器导入/使用 ckeditor 5？

Question

我在https://ckeditor.com/ckeditor-5/online-builder/中创建自定义 ckeditor 5 版本（基于“解耦组件”类型），最后我下载带有文件的 zip。但接下来我应该做什么，如何将其导入 main.js / package.js 并最终导入到组件中？

我能找到的所有材料都是https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html，解耦文档预设构建工作正常，但想添加图像调整大小，因此创建了自定义构建并陷入了困境。

如有任何回复，请发送 Tnx。

Answer 1

这篇文章可能会更长，但是 5 分钟就可以完成，非常简单。

[2022 更新，仍然有效，只是将配置移到另一个文件中，人们也可能会因为更高的 Vue 版本 ckeditor5 工具栏消失而返回那里，并且需要更新/重新安装]

此示例适用于 ckeditor 5 的完整文档类型，解耦文档几乎是您需要的一切，只是它缺少图像调整大小，要添加它，请转到https://ckeditor.com/ckeditor-5/online-builder/单击它一路添加图像调整大小或所有其他有趣的东西（您不需要高级Ckfinder，但您可能需要免费的CKFinder 上传适配器来上传图像），并下载 zip 文件，不要忘记在步骤 1 中选择相同的类型作为您将使用/安装的一个。

安装（就像经典指南中一样 - https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html）

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-decoupled-document

（如果是因为重新安装，只需删除 package.json @ckeditor 行并再次运行上面的安装命令）

在main.js中

import CKEditor from '@ckeditor/ckeditor5-vue';

createApp(App)
  .use(router)
  .use(CKEditor)
  .mount("#app");

在你的组件中

import DocumentEditor from '@ckeditor/ckeditor5-build-decoupled-document';

现在将配置添加到数据中，您可以在从在线构建器生成器复制/粘贴获得的文件中找到生成的配置，所以不要惊慌:)。您可以在/src/ckeditor.js 的defaultConfig中找到它，如果您不设置它，您可能会看到有关缺少“工具栏”选项的警告。不要复制您在下面看到的内容，请使用您自定义生成的配置，其仅用于说明：

 data: function () {
  return{
    editorConfig: {
      ckfinder: {
        uploadUrl: 'https://page.com/api/uploadckeditor'
      },
      toolbar: {
        items: [
          'heading',
          '|',
          'bold',
          'italic',
          'link',
          'bulletedList',
          'numberedList',
          '|',
          'outdent',
          'indent',
          '|',
          'imageUpload',
          'blockQuote',
          'insertTable',
          'mediaEmbed',
          'undo',
          'redo',
          'alignment',
          'codeBlock',
          'fontBackgroundColor',
          'fontColor',
          'fontFamily',
          'fontSize',
          'highlight',
          'horizontalLine',
          'htmlEmbed',
          'imageInsert',
          'pageBreak',
          'removeFormat',
          'strikethrough',
          'underline',
          'style'
        ]
      },
      language: 'cs',
      image: {
        toolbar: [
          'imageTextAlternative',
          'imageStyle:inline',
          'imageStyle:block',
          'imageStyle:side',
          'imageStyle:alignLeft',
          'imageStyle:alignRight',
          'imageStyle:alignCenter',
          'imageStyle:alignBlockLeft',
          'imageStyle:alignBlockRight',
          'linkImage'
        ]
      },
      table: {
        contentToolbar: [
          'tableColumn',
          'tableRow',
          'mergeTableCells',
          'tableCellProperties',
          'tableProperties'
        ]
      },
        fontFamily: {
            options: [
                'default',
                'indieflowerregular',
                'Arial, sans-serif',
                'Verdana, sans-serif',
                'Trebuchet MS',
                'Apple Color Emoji',
                'Segoe UI Emoji',
                'Segoe UI Symbol',
            ]
        },
      licenseKey: ''
    }
  };
}

现在在组件 html 中使用它

<ckeditor :editor="editor" @ready="onReady" v-model="editorData" :config="editorConfig"></ckeditor>

解耦组件 ckeditor 包需要@ready="onReady"否则它不会初始化（经典不需要这个）

这是方法：

methods: {
  onReady( editor )  {
    // Insert the toolbar before the editable area.
    editor.ui.getEditableElement().parentElement.insertBefore(
            editor.ui.view.toolbar.element,
            editor.ui.getEditableElement()
    );
  },

好吧，现在你几乎已经完成了最后一件神奇的事情。在您下载的文件中，转到/build文件夹并将所有文件复制到“ node_modules@ckeditor\ckeditor5-build-de Coupled-document\build ”并覆盖初始解耦文档。这是要做的关键事情，尽管这听起来很可怕。

奖励：我还想上传图像，因此将其添加到配置中

  **ckfinder: {
    uploadUrl: 'http://mypage/api/uploadckeditor'
  },**

这是 php 端实现，它只是基本的实现，没有错误处理

$uploaddir = '../www/adminUpload/';
$uploadfile = $uploaddir . basename($_FILES['upload']['name']);

if (move_uploaded_file($_FILES['upload']['tmp_name'], $uploadfile)) {
    //$this->sendJson(array("message"=>"sucess"));
} else {
    //$this->sendJson(array("message"=>"failed"));
}

$returnArray = array();
$returnArray["uploaded"] = true;
$returnArray["url"] = "http://www.mypage.com/adminUpload/".$_FILES['upload']['name'];
header('Content-type: application/json');
$this->sendJson($returnArray);
$this->terminate();

对于最后 2 行，它们是 Nette php 框架特定的，只需将 $returnArray 作为 json 响应发送出去。