2.9.2

Editor

Next Generation live editor for Bolt Web Components

Bolt Editor

  {% 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 %}

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); }); });
Edit
This is a Button; click "Edit" above to edit me
Edit

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

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