92 lines
3.0 KiB
Plaintext
92 lines
3.0 KiB
Plaintext
/**
|
|
* Custom Editor.js Block Tool for embedding predefined HTML snippets.
|
|
* Uses iframe for WYSIWYG preview - snippets look exactly like on the live page.
|
|
*/
|
|
class HtmlSnippetTool {
|
|
static get toolbox() {
|
|
return {
|
|
title: 'HTML Snippet',
|
|
icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>'
|
|
};
|
|
}
|
|
|
|
constructor({ data, api }) {
|
|
this.data = {
|
|
id: data.id || '',
|
|
globalAttributes: data.globalAttributes || data.attributes || ''
|
|
};
|
|
this.api = api;
|
|
this.wrapper = undefined;
|
|
}
|
|
|
|
render() {
|
|
this.wrapper = document.createElement('div');
|
|
this.wrapper.classList.add('ce-snippet-wrapper');
|
|
this.wrapper.style.border = '1px solid #ddd';
|
|
this.wrapper.style.borderRadius = '5px';
|
|
this.wrapper.style.background = '#fafafa';
|
|
this.wrapper.style.width = '100%';
|
|
this.wrapper.style.boxSizing = 'border-box';
|
|
|
|
this._showInput();
|
|
|
|
return this.wrapper;
|
|
}
|
|
|
|
_showInput() {
|
|
this.wrapper.innerHTML = '';
|
|
|
|
const title = document.createElement('h4');
|
|
title.style.marginTop = '0';
|
|
title.style.marginBottom = '10px';
|
|
title.style.padding = '15px 15px 0 15px';
|
|
title.innerText = 'HTML Snippet ID & Custom Attributes:';
|
|
title.style.fontSize = '14px';
|
|
title.style.color = '#333';
|
|
|
|
const inputContainer = document.createElement('div');
|
|
inputContainer.style.display = 'flex';
|
|
inputContainer.style.gap = '10px';
|
|
inputContainer.style.padding = '0 15px 15px 15px';
|
|
|
|
const input = document.createElement('input');
|
|
input.classList.add('ce-input');
|
|
input.placeholder = 'Enter Snippet ID (e.g., test_banner)';
|
|
input.value = this.data.id;
|
|
input.style.flex = '1';
|
|
|
|
input.addEventListener('input', (e) => {
|
|
this.data.id = e.target.value.trim();
|
|
});
|
|
|
|
const attrInput = document.createElement('input');
|
|
attrInput.classList.add('ce-input');
|
|
attrInput.placeholder = 'Custom Attributes (e.g. data-aos="fade-up" style="...")';
|
|
attrInput.value = this.data.globalAttributes || '';
|
|
attrInput.style.flex = '1';
|
|
|
|
attrInput.addEventListener('input', (e) => {
|
|
this.data.globalAttributes = e.target.value.trim();
|
|
});
|
|
|
|
inputContainer.appendChild(input);
|
|
inputContainer.appendChild(attrInput);
|
|
|
|
this.wrapper.appendChild(title);
|
|
this.wrapper.appendChild(inputContainer);
|
|
}
|
|
|
|
save(blockContent) {
|
|
return {
|
|
id: this.data.id,
|
|
globalAttributes: this.data.globalAttributes || ''
|
|
};
|
|
}
|
|
}
|
|
|
|
// Register the plugin globally
|
|
window.SISEditorPlugins = window.SISEditorPlugins || {};
|
|
window.SISEditorPlugins['snippet'] = {
|
|
class: HtmlSnippetTool
|
|
};
|