const customType = (editor) => { editor.StyleManager.addType('my-custom-prop', { // Create UI create({ props, change }) { const el = document.createElement('div'); el.innerHTML = `<input type="range" class="my-input" min="${props.min}" max="${props.max}"/>`; const inputEl = el.querySelector('.my-input'); inputEl.addEventListener('change', event => change({ event })); // `change` will trigger the emit inputEl.addEventListener('input', event => change({ event, partial: true })); return el; }, // Propagate UI changes up to the targets emit({ props, updateStyle }, { event, partial }) { const { value } = event.target; updateStyle(`${value}px`, { partial }); }, // Update UI (eg. when the target is changed) update({ value, el }) { el.querySelector('.my-input').value = parseInt(value, 10); }, // Clean the memory from side effects if necessary (eg. global event listeners, etc.) destroy() { }, }); }; const editor = grapesjs.init({ container: '#gjs', fromElement: true, height: '100%', storageManager: false, noticeOnUnload: false, plugins: [customType], styleManager: { sectors: [ { name: 'My sector', properties: [ { type: 'my-custom-prop', property: 'font-size', default: '15', min: 10, max: 70, }, ], }, ], }, });
<div id="gjs"> <div style="padding: 25px">Custom Style Type</div> <div style="font-size: 50px">Value 50</div> </div>
body, html { margin: 0; height: 100%; } .selectors-wrp { padding: 10px 5px; } .selectors-head { display: flex; align-items: center; } .selectors-title { flex-grow: 1; text-align: left; } .selectors { display: flex; flex-wrap: wrap; background-color: rgb(0 0 0 / 15%); padding: 3px 5px; border-radius: 3px; margin: 10px 0; gap: 5px; } .selector, .selector-add { display: flex; gap: 3px; background-color: #8f4a79; color: white; padding: 2px 5px 3px; border-radius: 3px; align-items: center; white-space: nowrap; } .selector-add { font-size: 1rem; padding: 2px 8px 3px; background-color: rgb(255 255 255 / 25%); cursor: pointer; } .selector-rm { font-size: 1rem; cursor: pointer; } .selectors-targets { text-align: left; }