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
}
}
}
}),
view: textType.view
});`
Here is my html template:
[5 octobre.html.zip](https://github.com/artf/grapesjs/files/1464913/5.octobre.html.zip)
Thanks for your help! :)Answers (3)
For editable contents, you have to use content
...
content: el.innerHTML
...
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)
return {type: 'Span',
src: el.src,
tagName: el.tagName.toLowerCase(),
// components: el.innerHTML,
content: el.innerHTML,
}
}
}
}),
view: textType.view
});`
If I keep ` components: el.innerHTML`, text are duplicated.return {type: 'Span',
src: el.src,
tagName: el.tagName.toLowerCase(),
// components: el.innerHTML,
content: el.innerHTML,
**editable: true**
}
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1836
How to add !important in all the generated apis
Hello @artf, While i am going to edit some html from editor with the help of css then i need to add !important into all the css which is ch...
Issue #438
Imported HTML, I can move components but not edit them
All I did was import HTML, except I can't modify the text in the HTML I can't type anything or remove any text
Issue #1055
[BUG] Can not modify inner text of a DIV
Hi, I'm using the latest version (grapesjs - 0.14.9). I have loaded an external HTML code to the editor. Then I tried to edit text within a...
Issue #1660
Content will automatically removed while edit in editor
Hello @artf I am facing an issue with grapes.js while editing any textual content. I am using grapes.js Version 0.14.37 with angular 1.6.1....
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.