Issue #509Opened November 12, 2017by asvine-p0 reactions

Span are not editable as text

Question

Code SnippetTEXT
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)

artfNovember 14, 20170 reactions

For editable contents, you have to use content

...
content: el.innerHTML
...
asvine-pNovember 21, 20170 reactions
Code SnippetTEXT
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.
bakgatOctober 4, 20180 reactions
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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.