React CKEditor 플러그인 import 관련 문제

Question

import './App.css'; import React, { Component } from 'react'; // import { CKEditor } from '@ckeditor/ckeditor5-react'; import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; import CKEditor from "@ckeditor/ckeditor5-react"; import DecoupledEditor from "@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor"; import Essentials from "@ckeditor/ckeditor5-essentials/src/essentials"; import Paragraph from "@ckeditor/ckeditor5-paragraph/src/paragraph"; import Bold from "@ckeditor/ckeditor5-basic-styles/src/bold"; import Italic from "@ckeditor/ckeditor5-basic-styles/src/italic"; import Underline from "@ckeditor/ckeditor5-basic-styles/src/underline"; import Strikethrough from "@ckeditor/ckeditor5-basic-styles/src/strikethrough"; import BlockQuote from "@ckeditor/ckeditor5-block-quote/src/blockquote"; import Link from "@ckeditor/ckeditor5-link/src/link"; import PasteFromOffice from "@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice"; import Heading from "@ckeditor/ckeditor5-heading/src/heading"; import Font from "@ckeditor/ckeditor5-font/src/font"; import Image from "@ckeditor/ckeditor5-image/src/image"; 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 ImageResize from "@ckeditor/ckeditor5-image/src/imageresize"; import List from "@ckeditor/ckeditor5-list/src/list"; import Alignment from "@ckeditor/ckeditor5-alignment/src/alignment"; 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 Indent from "@ckeditor/ckeditor5-indent/src/indent"; import IndentBlock from "@ckeditor/ckeditor5-indent/src/indentblock"; import TableProperties from "@ckeditor/ckeditor5-table/src/tableproperties"; import TableCellProperties from "@ckeditor/ckeditor5-table/src/tablecellproperties"; import SimpleUploadAdapter from "@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter"; import 'https://cdn.ckeditor.com/ckeditor5/37.0.0/classic/translations/ko.js'; class App extends Component { render() { return (

React ckeditor 테스트

RoundTable

ckeditor

해당 코드는 개발 코드입니다.
ckeditor 사용법 숙지를 위해 사용합니다.

" onReady={editor => { // You can store the "editor" and use when it is needed. console.log('Editor is ready to use!', editor); }} // onChange={(event, editor) => { // const data = editor.getData(); // console.log({ event, editor, data }); // }} // onBlur={(event, editor) => { // console.log('Blur.', editor); // }} // onFocus={(event, editor) => { // console.log('Focus.', editor); // }} />

); } } export default App;test import를 여러 개 해봤는데 계속ERROR ckeditor-duplicated-modules Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor-duplicated-modules CKEditorError: ckeditor-duplicated-modules Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor-duplicated-modules at ./node_modules/ckeditor5/node_modules/@ckeditor/ckeditor5-utils/src/version.js (http://localhost:3000/static/js/bundle.js:526610:9) at options.factory (http://localhost:3000/static/js/bundle.js:577866:31) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:577220:33) at fn (http://localhost:3000/static/js/bundle.js:577523:21) at ./node_modules/ckeditor5/node_modules/@ckeditor/ckeditor5-utils/src/emittermixin.js (http://localhost:3000/static/js/bundle.js:523386:66) at options.factory (http://localhost:3000/static/js/bundle.js:577866:31) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:577220:33) at fn (http://localhost:3000/static/js/bundle.js:577523:21) at ./node_modules/ckeditor5/node_modules/@ckeditor/ckeditor5-utils/src/index.js (http://localhost:3000/static/js/bundle.js:524514:71) at options.factory (http://localhost:3000/static/js/bundle.js:577866:31)이런 에러가 뜨는데 혹시 해결 방법 있을까요?const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin"); const { styles } = require("@ckeditor/ckeditor5-dev-utils"); module.exports = { webpack: { configure: (config, { env, paths }) => { config.plugins.push(new CKEditorWebpackPlugin({ language: "ko", addMainLanguageTranslationsToAllAssets: true})); const regExpThemeIconSvg = /ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+\.svg$/; const regExpThemeCss = /ckeditor5-[^/\]+[/\]theme[/\].+\.css/; const cssRegex = /\.css$/; const cssModuleRegex = /\.module\.css$/; config.module.rules.push( { test: regExpThemeIconSvg, use: ["raw-loader"] }, { test: regExpThemeCss, use: [ { loader: "style-loader", // options: { injectType: "singletonStyleTag" } }, { loader: "postcss-loader", options: styles.getPostCssConfig({ themeImporter: { themePath: require.resolve("@ckeditor/ckeditor5-theme-lark"), }, minify: true, }), }, ], } ); config.module.rules.forEach((rule) => { if (rule.oneOf) { rule.oneOf.forEach((subRule) => { if (String(subRule.test) === String(cssRegex)) { subRule.exclude = [ cssModuleRegex, regExpThemeCss ]; } if (String(subRule.test) === String(cssModuleRegex)) { subRule.exclude = [regExpThemeCss]; } if ( String(subRule.loader).includes("file-loader") && Array.isArray(subRule.exclude) ) { subRule.exclude.push(regExpThemeIconSvg, regExpThemeCss); } }); } }); return config; }, }, };이건 craco.config.js 파일 입니다. 혹시 그리고 ckeditor 코드 블럭 코드 하이라이팅 기능이 없는거 같은데 코드 하이라이팅 기능을 넣을 수 있는 방법이 있나요?

React CKEditor 플러그인 import 관련 문제

0개의 답변

#ckeditor 목록