Closed ugoQ closed 1 week ago
ok so i had the same problem i fix it installing all of ck dependencies and fallow the js tutorial where you create editor like ClassicEditor.create then I used the editor as ref on a div Follow js tutorial
@amitShimon1983 thanks for your answer. What tutorial are you refering to? I am a bit lost in the documentation.
ok this is what you need to do,
first class should be like that `import React, { useRef, FunctionComponent, useEffect, useState } from 'react';
import { Editor } from 'ckeditor__ckeditor5-core';
import { ErrorState, LoadingMask, Spinner } from '@harmon.ie/collabria-frontend-storybook';
import { loadEditor, attachEvents } from './helper';
import { RichTextEditorProps } from './types';
import classes from './RichTextEditor.module.scss';
export const RichTextEditor: FunctionComponent
useEffect(() => { let timer; if (domContainer.current && !editorRef && !error) { timer = setTimeout(() => { (async () => { try { const editor = await loadEditor(domContainer?.current, configuration, commentListId, editorId); setEditorRef(editor); // if (disabled) { // // editor.enableReadOnlyMode('true'); // }
attachEvents(editor, events);
} catch (e: any) {
setError(e);
} finally {
setLoading(false);
}
})();
}, 700); return () => { timer && clearTimeout(timer); }; } }, [domContainer, editorRef, configuration, error, disabled]); useEffect(() => { if (editorRef && data) { editorRef.editing.view.focus(); editorRef.data.set(data); } }, [editorRef, data]); return (
{loading && (
)}
{error &&
import React, { useCallback, useState, useEffect, useRef } from 'react'; import { CommentData, ThreadData } from '../types'; import { RichTextEditor } from '../RichTextEditor'; import { configuration } from './config'; import classes from './Editor.module.scss'; import { gql, useMutation } from '@harmon.ie/collabria-frontend-shared'; import { Context } from '../plugins'; const UPDATE_SHARED_EMAIL = gql
mutation UpdateSharedEmail(
$action: Action
$editedContent: String
$messageObjectId: String
$sharedEmailObjectId: String
$comment: CommentInput
) {
updateSharedEmail(
args: {
action: $action
editedContent: $editedContent
messageObjectId: $messageObjectId
sharedEmailObjectId: $sharedEmailObjectId
comment: $comment
}
) {
_id
commentThreads {
threadId
authorId
comments {
channelId
threadId
commentId
content
authorId
createdAt
}
}
}
}
`;
const Editor = ({
sharedEmail,
messageObjectId,
data,
editorId,
commentListId,
commentThreads,
authorId,
members,
context,
}: {
sharedEmail: string;
authorId: string;
messageObjectId: string;
data: any;
commentListId: string;
editorId: string;
commentThreads: any[];
members: { name: string; id: string }[];
context?: Context;
}) => {
const [updateSharedEmail, { called, loading }] = useMutation(UPDATE_SHARED_EMAIL);
const [editorRef, setEditorRef] = useState
const onRemoveCommentThread = async (threadData: ThreadData) => { console.log('onRemoveCommentThread', { threadData }); const { threadId } = threadData; const variables = { action: 'DELETE_THREAD', sharedEmailObjectId: sharedEmail, messageObjectId: messageObjectId, comment: { channelId: editorId, threadId, authorId }, }; // setCommentToSave(variables); return {}; };
const onAddComment = async (commentData: CommentData) => { console.log('onAddComment', { commentData }); const { threadId, commentId, content } = commentData; const variables = { action: 'ADD_COMMENT', sharedEmailObjectId: sharedEmail, messageObjectId: messageObjectId, comment: { channelId: editorId, threadId, commentId, content, authorId }, }; setCommentToSave(variables); return {}; };
const onUpdateComment = async (commentData: CommentData) => { console.log('onUpdateComment', { commentData }); const { threadId, commentId, content } = commentData; const variables = { action: 'EDIT_COMMENT', sharedEmailObjectId: sharedEmail, messageObjectId: messageObjectId, comment: { channelId: editorId, threadId, commentId, content, authorId }, }; // setCommentToSave(variables); return {}; };
const onRemoveComment = async (commentData: CommentData) => {
console.log('onRemoveComment', { commentData });
const { channelId, threadId, commentId, content } = commentData;
const variables = {
action: 'DELETE_COMMENT',
sharedEmailObjectId: sharedEmail,
messageObjectId: messageObjectId,
comment: { channelId: editorId, threadId, commentId, content, authorId },
};
// setCommentToSave(variables);
};
const onThreadRemove = async (editor: any, threadId: string) => {
const variables = {
action: 'DELETE_THREAD',
sharedEmailObjectId: sharedEmail,
messageObjectId: messageObjectId,
comment: { channelId: editorId, threadId, authorId },
};
// setCommentToSave(variables);
};
const onReady = editor => {
const commentsRepository = editor.plugins.get('CommentsRepository');
setEditorRef(editor);
setCommentsRepository(commentsRepository);
commentsRepository.on(addCommentThread:${editorId}
, async (evt: any, threadData: ThreadData) => {
await onAddCommentThread(threadData);
});
commentsRepository.on(removeCommentThread:${editorId}
, async (evt: any, threadData: ThreadData) => {
await onRemoveCommentThread(threadData);
});
commentsRepository.adapter = {
addComment: onAddComment,
updateComment: onUpdateComment,
removeComment: onRemoveComment,
removeCommentThread: onRemoveCommentThread,
};
};
const onChange = async (e, editor) => { console.log('onChange: ', { e, data: editor.data.get() }); }; return ( <>
</>
); };
export default Editor;
3
import CustomCommentView from '../views/CustomCommentView';
export default { // CommentView: CustomCommentView, maxCommentsWhenCollapsed: 3, maxCommentCharsWhenCollapsed: 100, maxThreadTotalWeight: 6000, editorConfig: { appData: {}, }, }; `
const configuration = { licenseKey: 'Your key', htmlSupport: { allow: [ { name: /.*/, attributes: true, classes: true, styles: true, }, ], }, balloonToolbar: { items: ['comment'], shouldNotGroupWhenFull: true, }, // comments, extraPlugins: [CommentsIntegration], plugins, removePlugins: ['Markdown'], collaboration: { channelId: 'channel-id', }, };
export default configuration; `
import CommentsOnly from '@ckeditor/ckeditor5-comments/src/commentsonly'; import Code from '@ckeditor/ckeditor5-basic-styles/src/code'; import StrikeThrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'; import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript'; import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript'; import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'; import ImageBlock from '@ckeditor/ckeditor5-image/src/imageblock'; import ImageInline from '@ckeditor/ckeditor5-image/src/imageinline'; import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize'; import ImageTextAlternative from '@ckeditor/ckeditor5-image/src/imagetextalternative'; import ImageUtils from '@ckeditor/ckeditor5-image/src/imageutils'; import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; import AutoFormat from '@ckeditor/ckeditor5-autoformat/src/autoformat'; import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard'; import Enter from '@ckeditor/ckeditor5-enter/src/enter'; import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock'; import IndentBlockCommand from '@ckeditor/ckeditor5-indent/src/indentblockcommand'; import IndentEditing from '@ckeditor/ckeditor5-indent/src/indentediting'; import IndentUI from '@ckeditor/ckeditor5-indent/src/indentui'; import LinkEditing from '@ckeditor/ckeditor5-link/src/linkediting'; import LinkUI from '@ckeditor/ckeditor5-link/src/linkui'; import ListProperties from '@ckeditor/ckeditor5-list/src/listproperties'; import ListStyle from '@ckeditor/ckeditor5-list/src/liststyle'; import DocumentList from '@ckeditor/ckeditor5-list/src/documentlist'; import DocumentListProperties from '@ckeditor/ckeditor5-list/src/documentlistproperties'; import Undo from '@ckeditor/ckeditor5-undo/src/undo'; import AutoSave from '@ckeditor/ckeditor5-autosave/src/autosave'; import FindAndReplace from '@ckeditor/ckeditor5-find-and-replace/src/findandreplace'; import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat'; import Font from '@ckeditor/ckeditor5-font/src/font'; import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight'; import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert'; import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak'; import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline'; import BalloonToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/balloon/balloontoolbar'; // Context plugins: import ContextBase from '@ckeditor/ckeditor5-core/src/context'; import CloudServicesCommentsAdapter from '@ckeditor/ckeditor5-real-time-collaboration/src/realtimecollaborativecomments/cloudservicescommentsadapter'; import CommentsRepository from '@ckeditor/ckeditor5-comments/src/comments/commentsrepository'; import NarrowSidebar from '@ckeditor/ckeditor5-comments/src/annotations/narrowsidebar'; import WideSidebar from '@ckeditor/ckeditor5-comments/src/annotations/widesidebar'; import PresenceList from '@ckeditor/ckeditor5-real-time-collaboration/src/presencelist'; import { CommentsIntegration } from '../integrations'; import { UsersIntegration } from '../editor/config/userIntegration';
export class Context extends ContextBase {}
// Plugins to include in the context. Context.builtinPlugins = [ // CloudServices, // CloudServicesCommentsAdapter, CommentsRepository, // NarrowSidebar, // PresenceList, // WideSidebar, ]; export const defaultConfig = { // The default configuration for the context plugins: sidebar: { container: document.getElementById('infinite-scroll'), }, presenceList: { container: document.querySelector('#presence-list-container'), }, // Configuration shared between the editors: language: 'en', toolbar: { items: ['bold', 'italic', '|', 'undo', 'redo', '|', 'comment', 'trackChanges'], }, extraPlugins: [UsersIntegration, CommentsIntegration], comments: { editorConfig: { plugins: [Essentials, Paragraph, Bold, Italic], }, }, }; export { BalloonToolbar, Comments, Mention, Essentials, UploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKBox, CKFinder, CloudServices, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, PictureEditing, Table, TableToolbar, TextTransformation, GeneralHtmlSupport, HorizontalLine, PageBreak, ImageInsert, Highlight, Font, Code, StrikeThrough, Subscript, Superscript, Underline, ImageResize, AutoFormat, IndentBlock, IndentBlockCommand, LinkEditing, LinkUI, ListProperties, ListStyle, DocumentList, DocumentListProperties, AutoSave, Clipboard, Enter, Undo, ImageBlock, ImageUtils, ImageTextAlternative, ImageInline, Alignment, IndentEditing, IndentUI, CommentsOnly, FindAndReplace, RemoveFormat, // CommentsRepository, // Annotations, // PendingActions, // Users, // CommentsEditing, // CommentsUI, // EditorAnnotations, // WideSidebar, // Sidebar, // AnnotationsUIs, // NarrowSidebar, // InlineAnnotations, // ContextualBalloon, // ClipboardPipeline, // DragDrop, // Widget, // WidgetTypeAround, // Delete, // PastePlainText, // SelectAll, // SelectAllEditing, // SelectAllUI, // ShiftEnter, // Typing, // Input, // UndoEditing, // UndoUI, // BoldEditing, // BoldUI, // ItalicEditing, // ItalicUI, // ImageBlockEditing, // ImageEditing, // ImageTextAlternativeEditing, // ImageTextAlternativeUI, // ImageInlineEditing, // AlignmentEditing, // AlignmentUI, // Autoformat, // ListEditing, // ListUI, }; `
installing all of those "dependencies": { "@ckeditor/ckeditor5-real-time-collaboration": "^34.2.0", "@ckeditor/ckeditor-cloud-services-collaboration": "^33.0.0", "@ckeditor/ckeditor5-adapter-ckfinder": "^34.2.0", "@ckeditor/ckeditor5-alignment": "^34.2.0", "@ckeditor/ckeditor5-autoformat": "^34.2.0", "@ckeditor/ckeditor5-autosave": "^34.2.0", "@ckeditor/ckeditor5-basic-styles": "^34.2.0", "@ckeditor/ckeditor5-block-quote": "^34.2.0", "@ckeditor/ckeditor5-build-balloon-block": "^34.2.0", "@ckeditor/ckeditor5-build-balloon": "^34.2.0", "@ckeditor/ckeditor5-build-classic": "^34.2.0", "@ckeditor/ckeditor5-build-decoupled-document": "^34.2.0", "@ckeditor/ckeditor5-build-inline": "^34.2.0", "@ckeditor/ckeditor5-ckbox": "^34.2.0", "@ckeditor/ckeditor5-ckfinder": "^34.2.0", "@ckeditor/ckeditor5-clipboard": "^34.2.0", "@ckeditor/ckeditor5-cloud-services": "^34.2.0", "@ckeditor/ckeditor5-code-block": "^34.2.0", "@ckeditor/ckeditor5-collaboration-core": "^34.2.0", "@ckeditor/ckeditor5-comments": "^34.2.0", "@ckeditor/ckeditor5-core": "^34.2.0", "@ckeditor/ckeditor5-dev-docs": "^30.3.4", "@ckeditor/ckeditor5-dev-env": "^30.3.4", "@ckeditor/ckeditor5-dev-tests": "^30.3.4", "@ckeditor/ckeditor5-dev-utils": "^30.3.4", "@ckeditor/ckeditor5-dev-webpack-plugin": "^30.3.4", "@ckeditor/ckeditor5-easy-image": "^34.2.0", "@ckeditor/ckeditor5-editor-balloon": "^34.2.0", "@ckeditor/ckeditor5-editor-classic": "^34.2.0", "@ckeditor/ckeditor5-editor-decoupled": "^34.2.0", "@ckeditor/ckeditor5-editor-inline": "^34.2.0", "@ckeditor/ckeditor5-engine": "^34.2.0", "@ckeditor/ckeditor5-enter": "^34.2.0", "@ckeditor/ckeditor5-essentials": "^34.2.0", "@ckeditor/ckeditor5-export-pdf": "^34.2.0", "@ckeditor/ckeditor5-export-word": "^34.2.0", "@ckeditor/ckeditor5-find-and-replace": "^34.2.0", "@ckeditor/ckeditor5-font": "^34.2.0", "@ckeditor/ckeditor5-heading": "^34.2.0", "@ckeditor/ckeditor5-highlight": "^34.2.0", "@ckeditor/ckeditor5-horizontal-line": "^34.2.0", "@ckeditor/ckeditor5-html-embed": "^34.2.0", "@ckeditor/ckeditor5-html-support": "^34.2.0", "@ckeditor/ckeditor5-image": "^34.2.0", "@ckeditor/ckeditor5-indent": "^34.2.0", "@ckeditor/ckeditor5-inspector": "^4.1.0", "@ckeditor/ckeditor5-language": "^34.2.0", "@ckeditor/ckeditor5-link": "^34.2.0", "@ckeditor/ckeditor5-list": "^34.2.0", "@ckeditor/ckeditor5-markdown-gfm": "^34.2.0", "@ckeditor/ckeditor5-media-embed": "^34.2.0", "@ckeditor/ckeditor5-mention": "^34.2.0", "@ckeditor/ckeditor5-minimap": "^34.2.0", "@ckeditor/ckeditor5-operations-compressor": "^34.2.0", "@ckeditor/ckeditor5-page-break": "^34.2.0", "@ckeditor/ckeditor5-pagination": "^34.2.0", "@ckeditor/ckeditor5-paragraph": "^34.2.0", "@ckeditor/ckeditor5-paste-from-office": "^34.2.0", "@ckeditor/ckeditor5-react": "^5.0.2", "@ckeditor/ckeditor5-remove-format": "^34.2.0", "@ckeditor/ckeditor5-restricted-editing": "^34.2.0", "@ckeditor/ckeditor5-revision-history": "^34.2.0", "@ckeditor/ckeditor5-select-all": "^34.2.0", "@ckeditor/ckeditor5-source-editing": "^34.2.0", "@ckeditor/ckeditor5-special-characters": "^34.2.0", "@ckeditor/ckeditor5-style": "^34.2.0", "@ckeditor/ckeditor5-table": "^34.2.0", "@ckeditor/ckeditor5-theme-lark": "^34.2.0", "@ckeditor/ckeditor5-track-changes": "^34.2.0", "@ckeditor/ckeditor5-typing": "^34.2.0", "@ckeditor/ckeditor5-ui": "^34.2.0", "@ckeditor/ckeditor5-undo": "^34.2.0", "@ckeditor/ckeditor5-upload": "^34.2.0", "@ckeditor/ckeditor5-utils": "^34.2.0", "@ckeditor/ckeditor5-watchdog": "^34.2.0", "@ckeditor/ckeditor5-widget": "^34.2.0", "@ckeditor/ckeditor5-word-count": "^34.2.0", "@ckeditor/jsdoc-plugins": "^30.3.4" }
look at the components you need the same
The problem is that it requires that you do: yarn eject But this has a serious downside that you can no longer update create-react-app
The problem is that it requires that you do: yarn eject But this has a serious downside that you can no longer update create-react-app
That's what I understand when I read the docs, but it is not an option for me. I will try to use the classic build but I will probably have to move to an other RTE, unfortunately.
I have the same problem using the online custom build, is there any workaround for this? After installing my custom build I can't run my project, it shows: The react-scripts package provided by Create React App requires a dependency: "webpack": "4.44.2" Don't try to install it manually: your package manager does it automatically. However, a different version of webpack was detected higher up in the tree:
@Klausdk1999 we would need more details on how did you integrate this custom build into your project? As mentioned in the docs, you can add editor in a separate folder or eject. There's also some craco setup provided by the community.
Thanks for the response, I'm using React, with CRA, and trying to integrate an online build of ckeditor. I just saw that it's not officially supported, but if anyone ends up here, I made it work by installing the webpack: 4.44.2, adding the online build folder to my project root, and following the documentation: npm install file:.ckeditorfolder , and it was compatible with my other dependencies. And using it like this to make the decoupled document editor work with toolbar:
`return (
Thank you for your patience, I think webpack 4.44.2
is not our dependency, and we also work with webpack 5. Isn't this version locked by the CRA and react-scripts on your side?
There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.
We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).
I tried using CKEditor 5 on my React App (created with CRA). I can use the classic build with
npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic
, it works pretty well.The classic build is almost enough for me, I would just like to add the "Source editing" plugin. So I tried the "build from source" method, and the "Integrating a build from the online builder" method, but both of them give me the following error:
Is there a workaround for this? Can I just create a custom "Source editing" plugin for the
ClassicEditor
if using a custom build with CRA is a dead end? Thanks for any advice you can give me.