ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
9.49k stars 3.7k forks source link

Getting error in new build #7831

Closed zackhalil closed 4 years ago

zackhalil commented 4 years ago

📝 I building new CKEditor by

  1. git clone -b stable https://github.com/ckeditor/ckeditor5-build-decoupled-document
  2. cd ckeditor5-build-decoupled-document
  3. npm install
  4. npm install --save @ckeditor/ckeditor5-remove-format
  5. npm install --save @ckeditor/ckeditor5-word-count
  6. yarn run build

Im using ckeditor5-build-decoupled-document/src/ckeditor.js of

`import DecoupledEditorBase from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; import FontSize from '@ckeditor/ckeditor5-font/src/fontsize'; import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily'; import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor'; import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor'; import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter'; import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat'; import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'; import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'; import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'; import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'; import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage'; import Heading from '@ckeditor/ckeditor5-heading/src/heading'; import Image from '@ckeditor/ckeditor5-image/src/image'; import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption'; import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'; import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'; import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'; import Indent from '@ckeditor/ckeditor5-indent/src/indent'; import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock'; //import Link from '@ckeditor/ckeditor5-link/src/link'; import List from '@ckeditor/ckeditor5-list/src/list'; //import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed'; import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice'; import Table from '@ckeditor/ckeditor5-table/src/table'; import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation'; import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat'; import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter'; import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount.js'; import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties'; import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties'; import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize.js'; import TodoList from '@ckeditor/ckeditor5-list/src/todolist';

export default class DecoupledEditor extends DecoupledEditorBase {}

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';

// Plugins to include in the build. DecoupledEditor.builtinPlugins = [ Essentials, Alignment, FontSize, FontFamily, FontColor, FontBackgroundColor, UploadAdapter, Autoformat, Bold, Italic, Strikethrough, Underline, BlockQuote, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, IndentBlock, // Link, List, // MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation, TableProperties, TableCellProperties, RemoveFormat, Base64UploadAdapter, WordCount, ImageResize, TodoList ];

// Editor configuration. DecoupledEditor.defaultConfig = { heading: { options: [ { model: 'paragraph', title: 'Paragraph'}, { model: 'heading1', view: { name: 'h1', classes: 'ck-heading_heading1' }, title: 'Heading 1' }, { model: 'heading2', view: { name: 'h2', classes: 'ck-heading_heading2' }, title: 'Heading 2' }, { model: 'heading3', view: { name: 'h3', classes: 'ck-heading_heading3' }, title: 'Heading 3' } ] }, toolbar: { items: [ 'heading', '|', 'fontsize', 'fontfamily', '|', 'bold', 'italic', 'underline', 'strikethrough', // 'highlight', '|', 'alignment', '|', 'numberedList', 'bulletedList', 'todoList', '|', 'indent', 'outdent', '|', 'fontColor', 'fontBackgroundColor', '|', // 'link', 'blockquote', 'imageUpload', 'insertTable', // 'mediaEmbed', '|', 'undo', 'redo', 'removeFormat' ] }, image: { styles: [ 'full', 'alignLeft', 'alignRight' ], toolbar: [ 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight', '|', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', "tableProperties", "tableCellProperties" ] }, // This value must be kept in sync with the language defined in webpack.config.js. language: 'en' };`

✔️ Expected result

no errors but getting errors

❌ Actual result

When I use it the build/ckeditor.js i get the following errors

`Error: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules ckeditor.js:5:9629 n https://tomcat.boss-portal.com:8443/bOnline.SCC/ckeditor/ckeditor.js:5:9629

https://tomcat.boss-portal.com:8443/bOnline.SCC/ckeditor/ckeditor.js:5:83942 https://tomcat.boss-portal.com:8443/bOnline.SCC/ckeditor/ckeditor.js:5:83850 o https://tomcat.boss-portal.com:8443/bOnline.SCC/ckeditor/ckeditor.js:5:5312 https://tomcat.boss-portal.com:8443/bOnline.SCC/ckeditor/ckeditor.js:5:671821 o https://tomcat.boss-portal.com:8443/bOnline.SCC/ckeditor/ckeditor.js:5:5312 https://tomcat.boss-portal.com:8443/bOnline.SCC/ckeditor/ckeditor.js:5:6116 https://tomcat.boss-portal.com:8443/bOnline.SCC/ckeditor/ckeditor.js:5:5209 https://tomcat.boss-portal.com:8443/bOnline.SCC/ckeditor/ckeditor.js:5:5178 https://tomcat.boss-portal.com:8443/bOnline.SCC/ckeditor/ckeditor.js:5:4973 ` when doing a DecoupledEditor.create now i get `ReferenceError: DecoupledEditor is not defined` ## 📃 Other details * Browser: … * OS: … * CKEditor version: … * Installed CKEditor plugins: … --- If you'd like to see this fixed sooner, add a 👍 reaction to this post.
FilipTokarski commented 4 years ago

Hi, you are getting this error most probably because plugins in your build have different versions. I see that you are cloning the archived repository, which has plugins in version 19.0.0. The latest one is 21.0.0. To solve this, you need to install your additional plugins in v19 or update everything to the latest version ( which is recommended ). You can do it easily with tools like npm-check-updates.

Muromi-Rikka commented 4 years ago

+1

zackhalil commented 4 years ago

Hi, you are getting this error most probably because plugins in your build have different versions. I see that you are cloning the archived repository, which has plugins in version 19.0.0. The latest one is 21.0.0. To solve this, you need to install your additional plugins in v19 or update everything to the latest version ( which is recommended ). You can do it easily with tools like npm-check-updates.

Thanks a million I did the following

ncu -u
npm install

and now it builds correctly