ARTICLE AD BOX
I have tried and did everything I found online, I don't have @ckeditor5-build-classic, or any of the older builds, code worked but I woke up to it broken this is the code:
import { useState } from "react"; import { CKEditor } from "@ckeditor/ckeditor5-react"; // Standard CSS import for the modern package import 'ckeditor5/ckeditor5.css'; import { ClassicEditor, // Essentials includes Delete, Undo, and Clipboard Essentials, Autoformat, Paragraph, Heading, List, TodoList, BlockQuote, Link, MediaEmbed, Table, TableToolbar, TableCellProperties, TableProperties, Bold, Italic, Underline, Strikethrough, Subscript, Superscript, Code, CodeBlock, HorizontalLine, Highlight, Alignment, Font, Indent, IndentBlock, RemoveFormat, Image, ImageToolbar, ImageUpload, ImageCaption, ImageStyle, ImageResize, FileRepository, type Editor } from "ckeditor5"; /** * Custom Upload Adapter for blogging images */ function CustomUploadAdapterPlugin(editor: Editor) { editor.plugins.get("FileRepository").createUploadAdapter = (loader: any) => { return { upload: async () => { const file = await loader.file; const formData = new FormData(); formData.append("file", file); const response = await fetch("http://localhost:5000/api/upload", { method: "POST", body: formData }); if (!response.ok) throw new Error("Upload failed"); const data = await response.json(); return { default: data.url }; }, abort: () => {} }; }; } export default function TextEditor() { const [content, setContent] = useState(""); return ( <div className="text-editor-container"> <div className="ck-content"> <CKEditor editor={ClassicEditor} config={{ // "GPL" is the required license key for the open-source tier licenseKey: "GPL", plugins: [ Essentials, Autoformat, Paragraph, Heading, List, TodoList, BlockQuote, Bold, Italic, Underline, Strikethrough, Subscript, Superscript, Code, CodeBlock, HorizontalLine, Link, MediaEmbed, Highlight, Alignment, Font, Indent, IndentBlock, RemoveFormat, Table, TableToolbar, TableCellProperties, TableProperties, Image, ImageToolbar, ImageUpload, ImageCaption, ImageStyle, ImageResize, FileRepository ], extraPlugins: [CustomUploadAdapterPlugin], toolbar: { items: [ "heading", "|", "fontSize", "fontFamily", "fontColor", "fontBackgroundColor", "highlight", "|", "bold", "italic", "underline", "strikethrough", "code", "removeFormat", "|", "alignment", "|", "bulletedList", "numberedList", "todoList", "outdent", "indent", "|", "link", "imageUpload", "mediaEmbed", "insertTable", "blockQuote", "codeBlock", "horizontalLine", "|", "undo", "redo" ], shouldNotGroupWhenFull: true }, heading: { options: [ { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' }, { model: 'heading1', view: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' }, { model: 'heading2', view: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' }, { model: 'heading3', view: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' } ] }, image: { toolbar: [ "imageStyle:inline", "imageStyle:block", "imageStyle:side", "|", "toggleImageCaption", "imageTextAlternative" ] } }} data={content} onChange={(_, editor) => { const data = editor.getData(); setContent(data); console.log("Editor content:", data); }} /> </div> </div> ); }is returning the following error for some reason,
TextEditor.tsx:72 CKEditor mounting error: CKEditorError: plugincollection-plugin-name-conflict {"pluginName":"Delete"} Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-plugincollection-plugin-name-conflict at PluginCollection._add (ckeditor5.js?v=bc056d54:47343:13) at ckeditor5.js?v=bc056d54:47260:14 at Array.map (<anonymous>) at loadPlugins (ckeditor5.js?v=bc056d54:47257:34) at PluginCollection.init (ckeditor5.js?v=bc056d54:47139:29) at ClassicEditor.initPlugins (ckeditor5.js?v=bc056d54:48693:25) at ckeditor5.js?v=bc056d54:135723:23 at new Promise (<anonymous>) at ClassicEditor.create (ckeditor5.js?v=bc056d54:135721:12) at CKEditor._createEditor (@ckeditor_ckeditor5-react.js?v=1371802d:1207:30)I have tried everything, unistalling and reinstalling node_modules multiple times, I have searched and found nothing, I have tried using minimal plugins but the issue presists no matter what I do
