Note: This is totally same with CKEditor 5 build classic. I only import some neccessary packages and re-use for import to other js file. You should be use below documentation of CKEditor 5 and know how to use it
See:
- Installation for how to install this package and what it contains.
- Basic API for how to create an editor and interact with it.
- Configuration for how to configure the editor.
- Creating custom builds for how to customize the build (configure and rebuild the editor bundle).
- First, install the build from npm:
npm install --save ckeditor5-classic
- Second, Create
ckeditor.js
:
// Or CJS imports:
// ClasicEditor = require('@vantruong1810/ckeditor5-classic');
// Using ES6 imports:
import ClassicEditor from 'ckeditor5-classic'
// Editor configuration.
ClassicEditor.defaultConfig = {
toolbar: {
items: [
'heading',
'|',
'fontFamily',
'fontSize',
'alignment',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'imageUpload',
'ckFinder',
'blockQuote',
'insertTable',
'mediaEmbed',
'undo',
'redo',
]
},
image: {
toolbar: [
'imageStyle:full',
'imageStyle:side',
'|',
'imageTextAlternative'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells'
]
},
fontFamily: {
options: [
'default',
'Arial, Helvetica, sans-serif',
'Courier New, Courier, monospace',
'Georgia, serif',
'Lucida Sans Unicode, Lucida Grande, sans-serif',
'Tahoma, Geneva, sans-serif',
'Times New Roman, Times, serif',
'Trebuchet MS, Helvetica, sans-serif',
'Verdana, Geneva, sans-serif'
]
},
fontSize: {
options: [
9,
11,
13,
'default',
17,
19,
21
]
},
// This value must be kept in sync with the language defined in webpack.config.js.
language: 'en'
};
// All class editor will be replaced by CKEditor
var allEditors = document.querySelectorAll('.editor');
for (var i = 0; i < allEditors.length; ++i) {
ClassicEditor
// Note that you do not have to specify the plugin and toolbar configuration — using defaults from the build.
.create(allEditors[i])
.then(editor => {
console.log('Editor was initialized', editor);
})
.catch(error => {
console.error(error.stack);
});
}
- Finally, import to your main js file:
// Using ES6 imports:
import './ckeditor.js';
// Or CJS imports:
require('./ckeditor.js');
- Clone source:
git clone git@github.com:vantruong1810/ckeditor5-classic.git
- Install new plugins https://ckeditor.com/docs/ckeditor5/latest/features/index.html
Eg markdown output plugin:
npm install --save @ckeditor/ckeditor5-markdown-gfm
- Go to
src/ckeditor.js
import new CKEditor plugin
// ...
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
// ...
import GFMDataProcessor from '@ckeditor/ckeditor5-markdown-gfm/src/gfmdataprocessor';
export default class ClassicEditor extends ClassicEditorBase { }
// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
// ...
EasyImage,
GFMDataProcessor, // <-- ADDED NEW
Heading,
// ...
];
Run command: npm run build
- Add to toolbar from configuration (Eg: Into
ckeditor.js
)