grapesjs/docs/api/rich_text_editor.md

RichTextEditor

This module allows to customize the toolbar of the Rich Text Editor and use commands from the HTML Editing APIs. For more info about HTML Editing APIs check here: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') and leave this task to the Style Manager.

Before using methods you should get first the module from the editor instance, in this way:

var rte = editor.RichTextEditor;

add

Add a new action to the built-in RTE toolbar

Parameters

• name string Action name
• action Object Action options (optional, default {})

Examples

rte.add('bold', {
  icon: '<b>B</b>',
  attributes: {title: 'Bold',}
  result: rte => rte.exec('bold')
});
rte.add('link', {
  icon: document.getElementById('t'),
  attributes: {title: 'Link',}
  // Example on it's easy to wrap a selected content
  result: rte => rte.insertHTML(`<a href="#">${rte.selection()}</a>`)
});
// An example with fontSize
rte.add('fontSize', {
  icon: `<select class="gjs-field">
        <option>1</option>
        <option>4</option>
        <option>7</option>
      </select>`,
    // Bind the 'result' on 'change' listener
  event: 'change',
  result: (rte, action) => rte.exec('fontSize', action.btn.firstChild.value),
  // Callback on any input change (mousedown, keydown, etc..)
  update: (rte, action) => {
    const value = rte.doc.queryCommandValue(action.name);
    if (value != 'false') { // value is a string
      action.btn.firstChild.value = value;
    }
   }
  })

get

Get the action by its name

Parameters

• name string Action name

Examples

const action = rte.get('bold');
// {name: 'bold', ...}

Returns Object

getAll

Get all actions

Returns Array

remove

Remove the action from the toolbar

Parameters

• name string

Examples

const action = rte.remove('bold');
// {name: 'bold', ...}

Returns Object Removed action

getToolbarEl

Get the toolbar element

Returns HTMLElement