search

GrapesJS / ckeditor

This plugin replaces the default Rich Text Editor with the one from CKEditor
BSD 3-Clause "New" or "Revised" License
102 stars 101 forks source link

readme

GrapesJS CKEditor

This plugin replaces the default Rich Text Editor with the CKEditor

Demo

GrapesJS


Summary

Options

Option Description Default
options CKEditor's configuration object, eg. { language: 'en', toolbar: [...], ...} {}
position Position side of the toolbar, options: left, center, right left
ckeditor Pass CKEDITOR constructor or the CDN string from which the CKEDITOR will be loaded. https://cdn.ckeditor.com/4.21.0/standard-all/ckeditor.js
customRte Extend the default customRTE interface. {}
onToolbar Customize CKEditor toolbar element once created, eg. onToolbar: (el) => { el.style.minWidth = '350px' } ``

Download

Usage

<link href="https://github.com/GrapesJS/ckeditor/blob/master/path/to/grapes.min.css" rel="stylesheet"/>
<script src="https://github.com/GrapesJS/ckeditor/raw/master/path/to/grapes.min.js"></script>
<script src="https://github.com/GrapesJS/ckeditor/raw/master/path/to/grapesjs-plugin-ckeditor.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      plugins: ['grapesjs-plugin-ckeditor'],
      pluginsOpts: {
        'grapesjs-plugin-ckeditor': {/* ...options */}
      }
  });
</script>

Development

Clone the repository

$ git clone https://github.com/GrapesJS/ckeditor.git
$ cd ckeditor

Install dependencies

$ npm i

Start the dev server

$ npm start

License

BSD 3-Clause