editor docs

2.8.0-beta.4

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.