@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>' )
...