Span are not editable as text

Question

Hello Artf, I have a problem when importing some html templates. I was initially not able to see span texts. But after helping the editor reconizing them, i'm not able to edit them as texts. let domc = this.editor.DomComponents; let textType = domc.getType("text"); domc.addType('span', { // Define the Model model: textType.model.extend({}, { isComponent(el) { if (el.tagName === 'SPAN') { return {type: 'Span', src: el.src, tagName: el.tagName.toLowerCase(), components: el.innerHTML } } } }), vie...

artf · Accepted Answer

For editable contents, you have to use content

asvine-p · Answer

Hello artf, I have replaced "components: el.innerHTML" by "content: el.innerHTML" but the content is still not editable. Here is my code: ' let domc = this.editor.DomComponents; let textType = domc.getType("text");' domc.addType('span', { // Define the Model model: textType.model.extend({}, { isComponent(el) { if (el.tagName === 'SPAN') { // as template.children will return an empty array the traverser // will skip all nodes, therefore attach them as a string (they // will be processed later) r...

bakgat · Answer

``` return {type: 'Span', src: el.src, tagName: el.tagName.toLowerCase(), // components: el.innerHTML, content: el.innerHTML, editable: true }

Span are not editable as text

Question

Answers (3)

Related Questions and Answers

How to add !important in all the generated apis

Imported HTML, I can move components but not edit them

[BUG] Can not modify inner text of a DIV

Content will automatically removed while edit in editor

Paid Plugins That Match This Issue

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories