Home

Awesome

GrapesJS TOAST UI Image Editor

Add the TOAST UI Image Editor on Image Components in GrapesJS

Demo

Preview

Summary

Options

OptionDescriptionDefault
configTOAST UI's configuration object{}
constructorPass the editor constructor. By default, the tui.ImageEditor will be called``
labelImageEditorLabel for the image editor (used in the modal)Image Editor
labelApplyLabel used on the apply buttonApply
heightDefault editor height650px
widthDefault editor width100%
commandIdId to use to create the image editor commandtui-image-editor
toolbarIconIcon used in the image component toolbar. Pass an empty string to avoid adding the icon.<svg ....
hideHeaderHide the default editor headertrue
onApplyBy 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
addToAssetsIf no custom onApply is passed and this option is true, the result image will be added to assetstrue
uploadIf 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
onApplyButtonThe apply button (HTMLElement) will be passed as an argument to this function, once created. This will allow you a higher customization.null
scriptScripts 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']
styleIn case the script is loaded this style will be loaded too['...tui-color-picker.css', '...tui-image-editor.css']

Download

Usage

Directly in the browser

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-tui-image-editor.min.js"></script>

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

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      // ...
      plugins: ['grapesjs-tui-image-editor'],
      pluginsOpts: {
        'grapesjs-tui-image-editor': {
          config: {
            includeUI: {
              initMenu: 'filter',
            },
          },
        }
      }
  });
</script>

Modern javascript

import grapesjs from 'grapesjs';
import plugin from 'grapesjs-tui-image-editor';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  }
  // or
  plugins: [
    editor => plugin(editor, { /* options */ }),
  ],
});

Development

Clone the repository

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

Install dependencies

$ npm i

Start the dev server

$ npm start

License

BSD 3-Clause