从 Online Builder 安装 Vue 3 CKEditor 5 不起作用

Question

我正在按照他们的 docs 将我的自定义构建添加到 vue 3，这是我的组件

//in script setup
import CKEditor from '@ckeditor/ckeditor5-vue'
import ClassicEditor from 'ckeditor5-custom-build/build/ckeditor'

const editor = ClassicEditor
const ckeditor = CKEditor.component

//in template
<ckeditor :editor="editor" v-model="data.content"></ckeditor>

我收到错误，说请求的模块

'/ck5/build/ckeditor.js' does not provide an export named 'default'

然后我尝试了

import {Editor} and import {ClassicEditor}

它们都不起作用。然后我尝试从 src 导入，因为我认为这是因为 vite 并且看起来它有效（再次导入时没有错误，无论是默认值还是命名），但我收到了另一个错误：

TypeError: Cannot read properties of null (reading 'getAttribute')
    at IconView._updateXMLContent (iconview.js:100:24)
    at IconView.render (iconview.js:76:8)
    at IconView.<anonymous> (observablemixin.js:212:41)
    at IconView.fire (emittermixin.js:170:43)
    at <computed> [as render] (observablemixin.js:215:25)
    at ViewCollection._renderViewIntoCollectionParent (viewcollection.js:204:9)
    at ViewCollection.<anonymous> (viewcollection.js:65:9)
    at ViewCollection.fire (emittermixin.js:170:43)
    at ViewCollection.addMany (collection.js:150:18)
    at ViewCollection.add (collection.js:118:21)

我该怎么办？

Answer 1

您必须使用在线构建器

1. 从在线构建器下载您的自定义构建
2. 将其放在资产文件夹的根目录下，命名为“ckeditor5”或任何你喜欢的名称
3. yarn 添加文件：./src/assets/vendor/ckeditor5 或 npm i src/assets/vendor/ckeditor5
4. 等待安装......
5. 在我的 .vue 文件中

<template>
  <ckes v-model="temp.value" :editor="ClassicEditor" />
</template>

<script setup lang="ts">
  import CKEditor from '@ckeditor/ckeditor5-vue'
  import 'ckeditor5-custom-build/build/ckeditor'

  const ckes = CKEditor.component
  const ClassicEditor = window['ClassicEditor']
</script>

Answer 2

我认为doc显示得非常清楚。首先，您需要将 Ckeditor 注册为 Vue 插件：

import { createApp } from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue';

createApp( { /* options */ } ).use( CKEditor ).mount( /* DOM element */ );

然后你可以在你的组件中使用它：

<script setup>
  import Editor from 'ckeditor5-custom-build/build/ckeditor';
</script>
<template>
  <ckeditor :editor="Editor"></ckeditor>
</template>

Answer 3

你必须像这样导入它。

安装这些软件包后

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

您可以通过两种方式使用它。

1. 全局注册组件。
2. 需要时使用该组件。

1.全局注册组件：

像这样导入脚本。

import { createApp } from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue';

createApp( { /* options */ } ).use( CKEditor ).mount( /* DOM element */ );

就这样，已经注册了，现在

<ckeditor>

会被自动识别。

2.需要时使用该组件：

像这样导入脚本。

<script setup>
import { component as CKEditor } from '@ckeditor/ckeditor5-vue'

const CKEditorConfig = reactive({
    editor: ClassicEditor,
    editorData: '<p>Content of the editor.</p>',
    editorConfig: {
    }
})
</script>

<template>
   <div>
       <CKEditor :editor="CKEditorConfig.editor" v-model="CKEditorConfig.editorData" :config="CKEditorConfig.editorConfig"></CKEditor>
   </div>
</template>

Answer 4

我的解决方案是在 vite 配置中。

添加到您的 vite 配置，然后按照正常的 ckeditor vue 安装说明进行操作。

 optimizeDeps: {
        include: ['ckeditor5-custom-build']
    },
    build: {
        commonjsOptions: {
            exclude: ['ckeditor5-custom-build']
        }
    },

来自 stackoverflow 用户 Gabriel Silva 的回答

未捕获的语法错误：请求的模块“/ckeditor5/build/ckeditor.js”不提供名为“default”的导出