editor docs

2.9.2

Editor

Next Generation live editor for Bolt Web Components

Published

History
View changes
Install
yarn add @bolt/components-editor
Source code
View on Github
Dependencies

Overview

Bolt Editor

Usage

  {% set content %}
  <bolt-text>Hello World!</bolt-text>
{% endset %}

{% include '@bolt-components-editor/editor.twig' with {
  styles: ['/build/bolt-global.css'],
  scripts: ['/build/bolt-global.js'],
  content: content,
} only %}

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Content *

HTML content to edit

 string —
  • —
Styles *

URL paths to CSS files that the editable content requires

 array —
Scripts *

URL paths to JS files that the editable content requires

 array —
Id

ID for this content. Useful for saving back to a data store like Drupal by passing in the paragraph ID. ID emitted in save event.

 string —
  • —

Events

Name Detail Description
editor:save { html: string } After the editor is saved, all the html is available in the event detail. const editors = document.querySelectorAll('.js-pega-editor'); editors.forEach(editor => { editor.addEventListener('editor:save', event => { console.log('Editor saved HTML:', event.detail.html); }); });

editor simple

Edit
This is a Button; click "Edit" above to edit me

editor blockquote

Edit

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

editor modal

Edit
This is a Button triggering an on-page Modal This is a Link triggering an on-page Modal