https://github.com/GrapesJS/ckeditor

This plugin replaces the default Rich Text Editor with the one from CKEditor
https://github.com/GrapesJS/ckeditor

Last synced: 3 months ago
JSON representation

This plugin replaces the default Rich Text Editor with the one from CKEditor

• Host: GitHub
• URL: https://github.com/GrapesJS/ckeditor
• Owner: GrapesJS
• License: bsd-3-clause
• Created: 2017-04-08T00:31:40.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-05-28T12:38:11.000Z (6 months ago)
• Last Synced: 2024-08-01T16:55:59.032Z (3 months ago)
• Language: TypeScript
• Size: 290 KB
• Stars: 99
• Watchers: 10
• Forks: 102
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# GrapesJS CKEditor

This plugin replaces the default Rich Text Editor with the CKEditor

[Demo](https://grapesjs.com/demo-newsletter-editor.html)






## Summary

* Plugin name: `grapesjs-plugin-ckeditor`

## Options

|Option|Description|Default|

|-|-|-

|`options`|CKEditor's configuration [object](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html), 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](https://grapesjs.com/docs/guides/Replace-Rich-Text-Editor.html).|`{}`|

|`onToolbar`|Customize CKEditor toolbar element once created, eg. `onToolbar: (el) => { el.style.minWidth = '350px' }`|``|

## Download

* CDN

  * `https://unpkg.com/grapesjs-plugin-ckeditor`

* NPM

  * `npm i grapesjs-plugin-ckeditor`

* GIT

  * `git clone https://github.com/GrapesJS/ckeditor.git`

## Usage

```html



  var editor = grapesjs.init({

      container : '#gjs',

      plugins: ['grapesjs-plugin-ckeditor'],

      pluginsOpts: {

        'grapesjs-plugin-ckeditor': {/* ...options */}

      }

  });

```

## Development

Clone the repository

```sh

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

$ cd ckeditor

```

Install dependencies

```sh

$ npm i

```

Start the dev server

```sh

$ npm start

```

## License

BSD 3-Clause