This plugin replaces the default Rich Text Editor with the one from CKEditor5
Video example: 👇
GJS.MERKET: https://gjs.market/authors/devfuture-development
GrapesJS Development - link
GrapesJS Donation - link
Linkedin
gjs-plugin-ckeditor5
options
CKEditor's configuration object, eg. { language: 'en', toolbar: [...], ...}
position
Position side of the toolbar, default: left
, options: left|center|right
npm i grapesjs-plugin-ckeditor5
or yarn add grapesjs-plugin-ckeditor5
<link href="https://github.com/GoodPHP/grapesjs-plugin-ckeditor5/blob/master/path/to/grapes.min.css" rel="stylesheet"/>
<script src="https://github.com/GoodPHP/grapesjs-plugin-ckeditor5/raw/master/path/to/grapes.min.js"></script>
<script src="https://github.com/GoodPHP/grapesjs-plugin-ckeditor5/raw/master/ckeditor5/build/ckeditor.js"></script>
<script src="https://github.com/GoodPHP/grapesjs-plugin-ckeditor5/raw/master/dist/grapesjs-plugin-ckeditor5.min.js"></script>
<div id="gjs"></div>
<script type="text/javascript">
var editor = grapesjs.init({
container : '#gjs',
plugins: ['gjs-plugin-ckeditor5'],
pluginsOpts: {
'gjs-plugin-ckeditor5': {
position: 'left',
options: {
trackChanges: {},
toolbar: {
items: [
'heading',
'|',
'fontColor',
'fontSize',
'fontFamily',
'fontBackgroundColor',
'alignment',
'bold',
'italic',
'underline',
'strikethrough',
'link',
'bulletedList',
'numberedList',
'horizontalLine',
'|',
'outdent',
'indent',
'|',
'blockQuote',
'insertTable',
'|',
'undo',
'redo'
]
},
language: 'en',
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties',
'tableProperties'
]
},
licenseKey: ''
}
}
}
});
</script>
Clone the repository
$ git clone https://github.com/GoodPHP/grapesjs-plugin-ckeditor5.git
$ cd grapesjs-plugin-ckeditor5
Install dependencies
$ npm i
Start the dev server
$ npm start