从源代码 + Vue JS + 在本地使用组件构建的 CK Editor 5 = 重复

Question

我的页面中有一组组件，如下所示：

BlogEntryPointComponent包含NewBlogComponent和BlogEditComponent

两者NewBlogComponent并BlogEditComponent使用以下代码：

import BlogEditor from '../../../../js/ckeditor/blogeditor.ts'

export default {
  components:{
    ckeditor: BlogEditor.ckeditor
  },
  data(){
    return{
       editor: BlogEditor.editor,
       editorConfig: BlogEditor.config
    }
  },
  ...

所以现在我安装了，BlogEntryPointComponent但问题是这导致了错误ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated

该错误页面的帮助谈论使用两种不同的构建在一个页面上; 我想我在这种情况下......但这是两个不同的独立组件；怎么会这样 ？

所以我尝试按照文档的建议从源代码构建编辑器，但我遇到了同样的问题。

编辑器是两个组件中相同的导入文件。

这是编辑器：

import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapterPlugin from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuotePlugin from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import AlignmentPlugin from '@ckeditor/ckeditor5-alignment/src/alignment';
import EmbedPlugin from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import MentionPlugin from '@ckeditor/ckeditor5-mention/src/mention';
import HighlightPlugin from '@ckeditor/ckeditor5-highlight/src/highlight'

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-    classic/src/classiceditor';

import CKEditor from '@ckeditor/ckeditor5-vue/dist/ckeditor.js'

export default {

ckeditor: CKEditor.component,

editor:ClassicEditorBase,

config:{
    plugins: [
        EssentialsPlugin,
        BoldPlugin,
        ItalicPlugin,
        LinkPlugin,
        ParagraphPlugin,
        AlignmentPlugin,
        ListPlugin,
        HeadingPlugin,
        BlockQuotePlugin,
        AutoformatPlugin,
        UploadAdapterPlugin,
        EmbedPlugin,
        MentionPlugin,
        HighlightPlugin
    ],

    toolbar: {
        items: [
            'heading',
            '|',
            'bold',
            'italic',
            'alignment',
            'link',
            'bulletedList',
            'numberedList',
            'mediaEmbed',
            'blockQuote',
            'highlight',
            'undo',
            'redo'
        ]
    }
}

}

包.json

{
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.4.5",
"@babel/preset-typescript": "^7.1.0",
"@babel/register": "^7.0.0",
"@ckeditor/ckeditor5-adapter-ckfinder": "^11.0.1",
"@ckeditor/ckeditor5-alignment": "^11.1.0",
"@ckeditor/ckeditor5-autoformat": "^11.0.1",
"@ckeditor/ckeditor5-basic-styles": "^11.1.0",
"@ckeditor/ckeditor5-block-quote": "^11.0.1",
"@ckeditor/ckeditor5-dev-utils": "^12.0.1",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.1",
"@ckeditor/ckeditor5-easy-image": "^11.0.1",
"@ckeditor/ckeditor5-editor-classic": "^12.1.0",
"@ckeditor/ckeditor5-essentials": "^11.0.1",
"@ckeditor/ckeditor5-heading": "^11.0.1",
"@ckeditor/ckeditor5-image": "^13.0.1",
"@ckeditor/ckeditor5-link": "^11.0.1",
"@ckeditor/ckeditor5-list": "^12.0.1",
"@ckeditor/ckeditor5-paragraph": "^11.0.1",
"@ckeditor/ckeditor5-theme-lark": "^13.0.1",
"@ckeditor/ckeditor5-undo": "^11.0.1",
"@types/jquery": "^3.3.22",
"babel-loader": "^8.0.4",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.4",
"css-loader": "^2.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"imports-loader": "^0.8.0",
"jquery": "^3.3.1",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.7.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"sass-loader": "^7.1.0",
"select2": "^4.0.6-rc.1",
"style-loader": "^0.23.1",
"terser-webpack-plugin": "^1.3.0",
"to-string-loader": "^1.1.5",
"toastr": "^2.1.4",
"ts-loader": "^5.2.2",
"tslint": "^5.11.0",
"typescript": "^3.1.3",
"url-loader": "^1.1.2",
"vue-cool-select": "^1.6.2",
"vue-loader": "^15.6.1",
"vue-select": "2.4.0",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.22",
"webpack": "^4.32.2",
"webpack-cli": "^3.1.2",
"webpack-manifest-plugin": "^2.0.4",
"webpack-notifier": "^1.7.0",
"write-file-webpack-plugin": "^4.4.1"
},
"dependencies": {
"@ckeditor/ckeditor5-build-classic": "^12.1.0",
"@ckeditor/ckeditor5-build-decoupled-document": "^12.1.0",
"@ckeditor/ckeditor5-highlight": "^11.0.1",
"@ckeditor/ckeditor5-media-embed": "^11.1.0",
"@ckeditor/ckeditor5-mention": "^10.0.0",
"@ckeditor/ckeditor5-vue": "^1.0.0-beta.2",
"axios": "^0.19.0",
"moment": "^2.24.0",
"postcss-loader": "^3.0.0",
"pretty-checkbox-vue": "^1.1.9",
"raw-loader": "^0.5.1",
"svg-url-loader": "^2.3.2",
"vue": "^2.5.22",
"vue-date-pick": "^1.1.0",
"vue-router": "^3.0.2",
"vuelayers": "^0.11.4"
}

Answer 1

我所做的是更新了与 ckeditor5 相关的所有软件包并添加了@ckeditor/ckeditor5-ui@latest

当我更新与 ck5editor 相关的所有软件包时，我遇到了这个新的多个错误

plugincollection-plugin-name-conflict through duplicate.....

https://github.com/ckeditor/ckeditor5/issues/1505

所以我删除了node_modules和package.lock or yarn.locknpm install again

错误的原因很可能是，如果您有某些插件的较新版本并且也有较旧的版本，它将返回错误，因为您似乎同时使用新版本和旧版本，或者您无法使用较新版本的插件旧版本的核心插件