const VueSlider = window['vue-slider-component']; const hrefNextTrait = editor => { // Custom component editor.DomComponents.addType('slider', { isComponent: el => el.tagName === 'SLIDER', model: { defaults: { traits: [{ type: 'slider', name: 'value', label: false }] }, init() { this.on('change:attributes:value', this.handleChange); this.handleChange(); }, handleChange() { const value = this.getAttributes().value || 0; this.components(`Slider: ${value}`); } } }); // Custom trait type editor.TraitManager.addType('slider', { templateInput: '', createInput({ trait }) { const vueInst = new Vue({ render: h => h(VueSlider) }).$mount(); const sliderInst = vueInst.$children[0]; sliderInst.$on('change', ev => this.onChange(ev)); this.sliderInst = sliderInst; return vueInst.$el; }, onEvent({ component }) { const value = this.sliderInst.getValue() || 0; component.addAttributes({ value }); }, onUpdate({ component }) { const value = component.getAttributes().value || 0; this.sliderInst.setValue(value); }, }); }; const editor = grapesjs.init({ container: '#gjs', height: '100%', fromElement: true, storageManager: false, plugins: [hrefNextTrait], });
<div id="gjs"> <slider value="30"></slider> <br/><br/><br/> <slider value="75"></slider> </div>
body, html { margin: 0; height: 100%; }