How to get the Editor integrated into Drupal
Install package
npm install --save @bolt/components-editor
Then add to .boltrc.js file like so.
Add to a Drupal Template file
First, find out the JS & CSS files that are used to display the content we want to edit. This will most likely simply be from the Drupal Libraries that are loaded for the current page from the theme. We need to get the variables styles, which is an array of strings to CSS files; and scripts which is the same but for JS.
Be sure to check it with CSS & JS Aggregation on & off!
{# Just some example content #}
{% set content %}
Hello World!
{% endset %}
{% if userLoggedIn %}
{# get these strings from Drupal based on what Drupal Libraries are loaded #}
{% set styles = ['/build/bolt-global.css'] %}
{% set scripts = ['/build/bolt-global.js'] %}
{# whatever id is needed to save this back to Drupal; probably a Paragraph id! #}
{% set id = 'probably-paragraph-id' %}
{% include '@bolt-components-editor/editor.twig' with {
styles: styles,
scripts: scripts,
content: content,
id: id,
} only %}
{% else %}
{# if user is not logged, then just render `content`, no need to pass into Editor template! #}
{{ content }}
{% endif %}
Listen for "editor:save" event
Here's some JavaScript that will listen for the editor:save event after the user clicks the "Save" button. This is when you should save the HTML to Drupal.
document.querySelectorAll('.js-pega-editor').forEach((pegaEditor) => {
pegaEditor.addEventListener('editor:save', (event) => {
console.log('An editor just saved and we have new HTML to send to Drupal!', {
id: event.detail.id,
html: event.detail.html,
editorElement: event.target, // same as `pegaEditor`
});
});
});