CK Editor 5 построен из исходного кода + Vue JS + Использование компонента локально = дублировано - PullRequest
Новая
       12

CK Editor 5 построен из исходного кода + Vue JS + Использование компонента локально = дублировано

2 голосов
/ 26 мая 2019

У меня есть набор компонентов на моей странице, например:

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'
        ]
    }
}

}

package.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"
}
...