GrapesJS TOAST UI Image Editor

Add the TOAST UI Image Editor on Image Components in GrapesJS

Demo

Summary

• Plugin name: grapesjs-tui-image-editor
• Commands
  • tui-image-editor - Open the modal with the image editor. Options:
    • target - component from which to get and update the image

Options

Option	Description	Default
config	TOAST UI's configuration object	{}
constructor	Pass the editor constructor. By default, the tui.ImageEditor will be called	``
labelImageEditor	Label for the image editor (used in the modal)	Image Editor
labelApply	Label used on the apply button	Apply
height	Default editor height	650px
width	Default editor width	100%
commandId	Id to use to create the image editor command	tui-image-editor
toolbarIcon	Icon used in the image component toolbar. Pass an empty string to avoid adding the icon.	<svg ....
hideHeader	Hide the default editor header	true
onApply	By default, GrapesJS takes the modified image, adds it to the Asset Manager and update the target. If you need some custom logic you can use this custom 'onApply' function. onApply: (imageEditor, imageModel) => {...}	null
addToAssets	If no custom onApply is passed and this option is true, the result image will be added to assets	true
upload	If no custom onApply is passed, on confirm, the edited image, will be passed to the AssetManager's uploader and the result (eg. instead of having the dataURL you'll have the URL) will be passed to the default onApply process (update target, etc.)	false
onApplyButton	The apply button (HTMLElement) will be passed as an argument to this function, once created. This will allow you a higher customization.	null
script	Scripts to load dynamically in case no TOAST UI editor constructor is found	['...tui-code-snippet.js', '...tui-color-picker.js', '...tui-image-editor.min.js']
style	In case the script is loaded this style will be loaded too	['...tui-color-picker.css', '...tui-image-editor.css']

Download

• CDN
  • https://unpkg.com/grapesjs-tui-image-editor
• NPM
  • npm i grapesjs-tui-image-editor
• GIT
  • git clone https://github.com/GrapesJS/tui-image-editor.git

Usage

Directly in the browser

1<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
2<script src="https://unpkg.com/grapesjs"></script>
3<script src="path/to/grapesjs-tui-image-editor.min.js"></script>
4
5<div id="gjs"></div>
6
7<script type="text/javascript">
8  var editor = grapesjs.init({
9      container : '#gjs',
10      // ...
11      plugins: ['grapesjs-tui-image-editor'],
12      pluginsOpts: {
13        'grapesjs-tui-image-editor': {
14          config: {
15            includeUI: {
16              initMenu: 'filter',
17            },
18          },
19        }
20      }
21  });
22</script>

Modern javascript

1import grapesjs from 'grapesjs';
2import plugin from 'grapesjs-tui-image-editor';
3
4const editor = grapesjs.init({
5  container : '#gjs',
6  // ...
7  plugins: [plugin],
8  pluginsOpts: {
9    [plugin]: { /* options */ }
10  }
11  // or
12  plugins: [
13    editor => plugin(editor, { /* options */ }),
14  ],
15});

Development

Clone the repository

1$ git clone https://github.com/GrapesJS/tui-image-editor.git
2$ cd grapesjs-tui-image-editor

Install dependencies

1$ npm i

Start the dev server

1$ npm start

License

BSD 3-Clause