GrapesJS

# RichTextEditor

This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the HTML Editing APIs (opens new window). 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

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
 richTextEditor: {
   // options
 }
})

Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.

// Listen to events
editor.on('rte:enable', () => { ... });

// Use the API
const rte = editor.RichTextEditor;
rte.add(...);

# Available Events

rte:enable - RTE enabled. The view, on which RTE is enabled, is passed as an argument
rte:disable - RTE disabled. The view, on which RTE is disabled, is passed as an argument

# getConfig

Get configuration object

Returns Object (opens new window)

# add

Add a new action to the built-in RTE toolbar

# Parameters

name string (opens new window) Action name
action Object (opens new window) 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 how to wrap 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;
    }
   }
  })
// An example with state
const isValidAnchor = (rte) => {
  // a utility function to help determine if the selected is a valid anchor node
  const anchor = rte.selection().anchorNode;
  const parentNode  = anchor && anchor.parentNode;
  const nextSibling = anchor && anchor.nextSibling;
  return (parentNode && parentNode.nodeName == 'A') || (nextSibling && nextSibling.nodeName == 'A')
}
rte.add('toggleAnchor', {
  icon: `<span style="transform:rotate(45deg)">&supdsub;</span>`,
  state: (rte, doc) => {
   if (rte && rte.selection()) {
     // `btnState` is a integer, -1 for disabled, 0 for inactive, 1 for active
     return isValidAnchor(rte) ? btnState.ACTIVE : btnState.INACTIVE;
   } else {
     return btnState.INACTIVE;
   }
  },
  result: (rte, action) => {
    if (isValidAnchor(rte)) {
      rte.exec('unlink');
    } else {
      rte.insertHTML(`<a class="link" href="">${rte.selection()}</a>`);
    }
  }
})

# get

Get the action by its name

# Parameters

name string (opens new window) Action name

# Examples

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

Returns Object (opens new window)

# getAll

Get all actions

Returns Array (opens new window)

# remove

Remove the action from the toolbar

# Parameters

name string (opens new window)

# Examples

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

Returns Object (opens new window) Removed action

# run

Run action command.

# Parameters

action (string (opens new window) | RichTextEditorAction) Action to run

# Examples

const action = rte.get('bold');
rte.run(action) // or rte.run('bold')

# getToolbarEl

Get the toolbar element

Returns HTMLElement (opens new window)

← Modal Keymaps →