@relumie/ckeditor5-build-popconmarket
Warning: This package is only for private uses. So its settings could change anytime.
This package is a custom-build based on CKEditor 5 classic editor build
Use like CKEditor 5 classic editor build
Setting:
- Korean interface
- Font size
- Underline, Strikethrough
- Text alignment
- No lists
- No image caption
- No indent/outdent (Not fully works on classic build)
- No table
- No CloudService
- No EasyImage
- No CKFinder
- No Redo/Undo (Not perfectly works)
- Image resize (added on v.0.0.2)
- Image alignment (added on v.0.0.5)
- Add some iframe previews of mediaEmbeds in data (CKEditor default supported)(added on v.0.0.6)
- No heading (added on v.0.0.8)
- Modify @ckeditor/ckeditor5-clipboard(Paste multiple-line-breaks as they are) (readme only. added on v.0.0.9)
- Add PasteFromOffice again(added on v.0.1.1)
- Add CoverEditor(added on v.0.1.2)
MIGRATION from 0.1.1 to 0.1.2~
- Minor changes on usage.
import { CKEditor } from '@ckeditor/ckeditor5-react';
// >>>>>> HERE
// import ClassicEditor from '@relumie/ckeditor5-build-popconmarket';
import { ClassicEditor } from '@relumie/ckeditor5-build-popconmarket';
<CKEditor
editor={ ClassicEditor }
//...
/>
- Now you can use CoverEditor instead of ClassEditor. It has less tools. (No video, No link)
import { CoverEditor } from '@relumie/ckeditor5-build-popconmarket';
ABOUT IMAGE UPLOADER
You can make your own custom image uploader with this official documentation. I use this build with @ckeditor/ckeditor5-react and example codes are like this.
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@relumie/ckeditor5-build-popconmarket';
import YourOwnImageUploadAdapterPlugin from '../../rich_editor/your_own_image_upload_adapter_plugin';
<CKEditor
editor={ ClassicEditor }
...
config={ {
extraPlugins: [
YourOwnImageUploadAdapterPlugin //** YOUR OWN IMAGE UPLOAD ADAPTER PLUGIN
]
} }
/>
ABOUT IMAGE ALIGNMENT
With this build, full and alignCenter alignment are available. CKEditor5's full alignment means full-line-center. But you can change it with some style changes. Here are simple example codes.
// any_style_file.scss
/* default image ('full') to full-left align */
.ck-content .image:not(.image-style-align-center) {
margin: 0 !important;
}
/* remove margins */
.ck-content figure {
margin-inline-start: 0;
margin-inline-end: 0;
}
ABOUT PASTE TEXT
You may feel strange when paste some text with multiple-line-breaks. The module @ckeditor/ckeditor5-clipboard
merge multiple-line-breaks when paste. You can remove this function by modifying a file node_modules/@ckeditor/ckeditor5-clipboard/src/utils/plaintexttohtml.js
in your react-app like this.
<FROM>
...
// Creates a paragraph for each double line break.
.replace( /\r?\n\r?\n/g, '</p><p>' )
// Creates a line break for each single line break.
.replace( /\r?\n/g, '<br>' )
...
<TO>
...
// Creates a paragraph for each double line break.
// .replace( /\r?\n\r?\n/g, '</p><p>' )
// Creates a line break for each single line break.
.replace( /\r?\n/g, '</p><p>' )
...