reactjs - 如何在同一個 reactjs 頁面/組件中使用兩個相同的 CKEditor5（經典）組件？

import { CKEditor } from "@ckeditor/ckeditor5-react"; import ClassicEditor from "@ckeditor/ckeditor5-build-classic"; export default function HtmlEditor({content,onChange}) { return ( <CKEditor editor={ClassicEditor} data={content} onReady={(editor) => { // You can store the "editor" and use when it is needed. // debugger; }} onError={(err) => { console.log(err); }} onChange={onChange} onBlur={(event, editor) => { //{onChange} //debugger; //console.log("Blur.", editor); }} onFocus={(event, editor) => { //debugger; //console.log("Focus.", editor); }} /> ); }

import HtmlEditor from "./HtmlEditor"; function EditProduct(props) { const [detail, setdetail] = useState({ Id: 0, Description: "", ShortDescription: "" }); const onShortDescriptionChange = (event, editor) => { debugger; const data = editor.getData(); setdetail({...detail,ShortDescription:data}); //console.log({ event, editor, data }); }; const onDescriptionChange = (event, editor) => { debugger; const data = editor.getData(); setdetail({...detail,Description:data}); //console.log({ event, editor, data }); }; <div className="form-row"> <div className="form-group col-md-6"> <HtmlEditor content={detail.ShortDescription} onChange={onShortDescriptionChange} /> </div> <div className="form-group col-md-6"> <HtmlEditor name={"Description"} content={detail.Description} onChange={onDescriptionChange} /> </div> </div> ); } export default withRouter(EditProduct);

{ "name": "test", "version": "0.1.0", "private": true, "dependencies": { "@ckeditor/ckeditor5-build-classic": "^31.1.0", "@ckeditor/ckeditor5-react": "^3.0.3", "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "bootstrap": "^4.6.0", "faker": "^5.5.3", "multiselect-react-dropdown": "^2.0.17", "node-sass": "^4.14.1", "prop-types": "^15.8.1", "rangeslider-pure": "^0.4.11", "react": "^17.0.2", "react-bootstrap": "^1.6.1", "react-bootstrap-sweetalert": "^5.2.0", "react-dom": "^17.0.2", "react-hook-form": "^7.12.2", "react-icons": "^4.3.1", "react-router-dom": "^5.2.0", "react-scripts": "^4.0.3", "styled-components": "^5.3.0", "web-vitals": "^1.1.2", "yup": "^0.32.9" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "proxy": "http://localhost:4001" }

ckeditor.js:5 Uncaught TypeError: Cannot convert undefined or null to object at Function.keys (<anonymous>) at dc.set (ckeditor.js:5) at dc.<anonymous> (ckeditor.js:5) at dc.fire (ckeditor.js:5) at dc.<computed> [as set] (ckeditor.js:5) at Sw.setData (ckeditor.js:5) at Rr.shouldComponentUpdate (ckeditor.jsx:50) at checkShouldComponentUpdate (react-dom.development.js:12518) at updateClassInstance (react-dom.development.js:13039) at updateClassComponent (react-dom.development.js:17432) at beginWork (react-dom.development.js:19073) at HTMLUnknownElement.callCallback (react-dom.development.js:3945) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994) at invokeGuardedCallback (react-dom.development.js:4056) at beginWork$1 (react-dom.development.js:23964) at performUnitOfWork (react-dom.development.js:22776) at workLoopSync (react-dom.development.js:22707) at renderRootSync (react-dom.development.js:22670) at performSyncWorkOnRoot (react-dom.development.js:22293) at react-dom.development.js:11327 at unstable_runWithPriority (scheduler.development.js:468) at runWithPriority$1 (react-dom.development.js:11276) at flushSyncCallbackQueueImpl (react-dom.development.js:11322) at flushSyncCallbackQueue (react-dom.development.js:11309) at scheduleUpdateOnFiber (react-dom.development.js:21893) at dispatchAction (react-dom.development.js:16139) at fetchData (EditProduct.js:143) n @ ckeditor.js:5 rethrowUnexpectedError @ ckeditor.js:5 fire @ ckeditor.js:5 <computed> @ ckeditor.js:5 setData @ ckeditor.js:5 shouldComponentUpdate @ ckeditor.jsx:50 checkShouldComponentUpdate @ react-dom.development.js:12518 updateClassInstance @ react-dom.development.js:13039 updateClassComponent @ react-dom.development.js:17432 beginWork @ react-dom.development.js:19073 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 beginWork$1 @ react-dom.development.js:23964 performUnitOfWork @ react-dom.development.js:22776 workLoopSync @ react-dom.development.js:22707 renderRootSync @ react-dom.development.js:22670 performSyncWorkOnRoot @ react-dom.development.js:22293 (anonymous) @ react-dom.development.js:11327 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 scheduleUpdateOnFiber @ react-dom.development.js:21893 dispatchAction @ react-dom.development.js:16139 fetchData @ EditProduct.js:143 await in fetchData (async) (anonymous) @ EditProduct.js:354 invokePassiveEffectCreate @ react-dom.development.js:23487 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 flushPassiveEffectsImpl @ react-dom.development.js:23574 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushPassiveEffects @ react-dom.development.js:23447 performSyncWorkOnRoot @ react-dom.development.js:22269 (anonymous) @ react-dom.development.js:11327 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 unbatchedUpdates @ react-dom.development.js:22438 legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020 render @ react-dom.development.js:26103 (anonymous) @ index.js:7 ./src/index.js @ index.js:20 __webpack_require__ @ bootstrap:856 fn @ bootstrap:150 1 @ reportWebVitals.js:14 __webpack_require__ @ bootstrap:856 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.chunk.js:1 index.js:1 The above error occurred in the <Rr> component: at Rr (http://localhost:3001/static/js/vendors~main.chunk.js:32639:9) at HtmlEditor (http://localhost:3001/static/js/main.chunk.js:12652:5) at div at div at div at http://localhost:3001/static/js/vendors~main.chunk.js:105236:27 at div at http://localhost:3001/static/js/vendors~main.chunk.js:98901:23 at form at div at http://localhost:3001/static/js/vendors~main.chunk.js:99914:23 at Page (http://localhost:3001/static/js/main.chunk.js:13086:58) at EditProduct (http://localhost:3001/static/js/main.chunk.js:7700:73) at C (http://localhost:3001/static/js/vendors~main.chunk.js:299669:37) at Route (http://localhost:3001/static/js/vendors~main.chunk.js:299412:29) at Switch (http://localhost:3001/static/js/vendors~main.chunk.js:299614:29) at main at div at Navigation (http://localhost:3001/static/js/main.chunk.js:51426:88) at C (http://localhost:3001/static/js/vendors~main.chunk.js:299669:37) at App at Router (http://localhost:3001/static/js/vendors~main.chunk.js:299043:30) at BrowserRouter (http://localhost:3001/static/js/vendors~main.chunk.js:298664:35) Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. console.<computed> @ index.js:1 logCapturedError @ react-dom.development.js:20085 update.callback @ react-dom.development.js:20118 callCallback @ react-dom.development.js:12318 commitUpdateQueue @ react-dom.development.js:12339 commitLifeCycles @ react-dom.development.js:20736 commitLayoutEffects @ react-dom.development.js:23426 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 commitRootImpl @ react-dom.development.js:23151 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22990 performSyncWorkOnRoot @ react-dom.development.js:22329 (anonymous) @ react-dom.development.js:11327 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 scheduleUpdateOnFiber @ react-dom.development.js:21893 dispatchAction @ react-dom.development.js:16139 fetchData @ EditProduct.js:143 await in fetchData (async) (anonymous) @ EditProduct.js:354 invokePassiveEffectCreate @ react-dom.development.js:23487 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 flushPassiveEffectsImpl @ react-dom.development.js:23574 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushPassiveEffects @ react-dom.development.js:23447 performSyncWorkOnRoot @ react-dom.development.js:22269 (anonymous) @ react-dom.development.js:11327 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 unbatchedUpdates @ react-dom.development.js:22438 legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020 render @ react-dom.development.js:26103 (anonymous) @ index.js:7 ./src/index.js @ index.js:20 __webpack_require__ @ bootstrap:856 fn @ bootstrap:150 1 @ reportWebVitals.js:14 __webpack_require__ @ bootstrap:856 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.chunk.js:1 EditProduct.js:361 unmounting... editorwatchdog.js:30 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'destroy') at Pr._destructor (editorwatchdog.js:30) at editorwatchdog.js:238