リッチテキストエディタCKeditor5を導入しているのですが、モジュール導入で解決しなかった為、ご相談させてください。
環境
webpackで導入しているのですが、package.jsonとwebpack.config.jsの中身は以下のとおりです。
json
1//package.json 2{ 3 "name": "sample_project", 4 "version": "1.0.0", 5 "scripts": { 6 "build": "webpack --mode development" 7 }, 8 "dependencies": { 9 "@ckeditor/ckeditor5-alignment": "^27.1.0", 10 "@ckeditor/ckeditor5-basic-styles": "^27.1.0", 11 "@ckeditor/ckeditor5-block-quote": "^27.1.0", 12 "@ckeditor/ckeditor5-dev-utils": "^24.4.2", 13 "@ckeditor/ckeditor5-dev-webpack-plugin": "^24.4.2", 14 "@ckeditor/ckeditor5-easy-image": "^27.1.0", 15 "@ckeditor/ckeditor5-editor-decoupled": "^27.1.0", 16 "@ckeditor/ckeditor5-essentials": "^27.1.0", 17 "@ckeditor/ckeditor5-font": "^27.1.0", 18 "@ckeditor/ckeditor5-horizontal-line": "^27.1.0", 19 "@ckeditor/ckeditor5-image": "^27.1.0", 20 "@ckeditor/ckeditor5-indent": "^27.1.0", 21 "@ckeditor/ckeditor5-link": "^27.1.0", 22 "@ckeditor/ckeditor5-list": "^27.1.0", 23 "@ckeditor/ckeditor5-media-embed": "^27.1.0", 24 "@ckeditor/ckeditor5-page-break": "^27.1.0", 25 "@ckeditor/ckeditor5-paragraph": "^27.1.0", 26 "@ckeditor/ckeditor5-remove-format": "^27.1.0", 27 "@ckeditor/ckeditor5-table": "^27.1.0", 28 "@ckeditor/ckeditor5-theme-lark": "^27.1.0", 29 "@ckeditor/ckeditor5-upload": "^27.1.0", 30 "@wiris/mathtype-ckeditor5": "^7.26.0", 31 "postcss-loader": "^3.0.0", 32 "raw-loader": "^3.1.0", 33 "style-loader": "^1.3.0", 34 "webpack": "^4.46.0", 35 "webpack-cli": "^3.3.12" 36 }, 37 "devDependencies": { 38 "ckeditor5-math": "^28.0.0" 39 } 40} 41 42//webpack.config.js 43const path = require( 'path' ); 44const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' ); 45const { styles } = require( '@ckeditor/ckeditor5-dev-utils' ); 46module.exports = { 47 entry: './src/index.js', 48 output: { 49 path: path.resolve( __dirname, 'dist' ), 50 filename: 'bundle.js' 51 }, 52 plugins: [ 53 new CKEditorWebpackPlugin( { 54 language: 'ja', 55 } ), 56], 57 module: { 58//省略 59};
確認できていること
今回導入したいモジュールがMathematicalと呼ばれるのなのですが、これを手順に従い導入する前に以下のindex.jsでは正しく動作が確認できております。
javascript
1//index.js 2import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; 3// import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor'; 4import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; 5import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; 6import Table from '@ckeditor/ckeditor5-table/src/table'; 7import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; 8import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties'; 9import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties'; 10import Font from '@ckeditor/ckeditor5-font/src/font'; 11import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; 12import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; 13import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'; 14import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'; 15import Code from '@ckeditor/ckeditor5-basic-styles/src/code'; 16import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript'; 17import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript'; 18import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; 19import ListStyle from '@ckeditor/ckeditor5-list/src/liststyle'; 20import Indent from '@ckeditor/ckeditor5-indent/src/indent'; 21import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock'; 22import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'; 23import Link from '@ckeditor/ckeditor5-link/src/link'; 24import AutoLink from '@ckeditor/ckeditor5-link/src/autolink'; 25import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed'; 26import Image from '@ckeditor/ckeditor5-image/src/image' 27import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert'; 28import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter'; 29import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'; 30import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption'; 31import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'; 32import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize'; 33import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage'; 34import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline'; 35import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak'; 36import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat'; 37 38 39ClassicEditor 40 .create( document.querySelector( '.document-editor__editable' ), { 41 plugins: [ 42 Font//...中略 43 44 ], 45 toolbar: { 46 items: ['fontSize'//...中略 47 ] 48 }, 49 //中略 50 language: 'ja', 51 // placeholder: 'テキストを編集してください' 52 } ) 53 .then( editor => { 54 const toolbarContainer = document.querySelector( '.document-editor__toolbar' ); 55 toolbarContainer.appendChild( editor.ui.view.toolbar.element ); 56 window.editor = editor; 57 } ) 58 .catch( error => { 59 console.error( error ); 60 } );
こちらを上記の手順に以下の様に実行しています
0. npm install ckeditor5-math --save-dev
で所定のディレクトリにインストール(正しく実行確認済)
index.js
に以下の//追加箇所を追加
javascript
1//index.js 2import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; 3// import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor'; 4import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; 5import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; 6import Table from '@ckeditor/ckeditor5-table/src/table'; 7import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; 8import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties'; 9import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties'; 10import Font from '@ckeditor/ckeditor5-font/src/font'; 11import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; 12import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; 13import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'; 14import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'; 15import Code from '@ckeditor/ckeditor5-basic-styles/src/code'; 16import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript'; 17import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript'; 18import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; 19import ListStyle from '@ckeditor/ckeditor5-list/src/liststyle'; 20import Indent from '@ckeditor/ckeditor5-indent/src/indent'; 21import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock'; 22import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'; 23import Link from '@ckeditor/ckeditor5-link/src/link'; 24import AutoLink from '@ckeditor/ckeditor5-link/src/autolink'; 25import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed'; 26import Image from '@ckeditor/ckeditor5-image/src/image' 27import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert'; 28import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter'; 29import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'; 30import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption'; 31import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'; 32import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize'; 33import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage'; 34import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline'; 35import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak'; 36import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat'; 37import Mathematics from 'ckeditor5-math/src/math';//追加 38 39ClassicEditor 40 .create( document.querySelector( '.document-editor__editable' ), { 41 plugins: [ 42 Font, Mathematics//追加 43 44 ], 45 toolbar: { 46 items: ['fontSize',//中略 47 'math'//追加 48 ] 49 }, 50//中略 51 math: {//追加 52 engine: 'mathjax', 53 lazyLoad: undefined, 54 outputType: 'script', 55 forceOutputType: false, 56 enablePreview: true, 57 previewClassName: [], 58 popupClassName: [] 59 }, 60//上記と同様のため後略
エラー
その結果、以下のエラーが出力されておりどうしても実装できません。
Uncaught CKEditorError: ckeditor-duplicated-modules
Uncaught ReferenceError: editor is not defined
GitHub上で公式のエラーに関連する投稿などもみたのですが、本モジュール導入に関するものを見つけることができず、八方塞がりになってしまった為、どなたか同じ様な経験や知見を持っている方にご相談させていただきたく投稿させていただきました。
よろしくお願い申し上げます。
あなたの回答
tips
プレビュー