[QUESTION] Custom component - how to set editable to true

Question

Hi, I've created a custom component type, but I am having some trouble making it editable. The component is a "span" with component type "tag". it will contain only text, but I want it to extend the default, not the text component. Any idea how can I make it editable, even if it is not "text".

comps.addType('tag', {
        
        model: { 
            defaults:  {
                type: 'tag',
                tagName: 'span',
                editable: true,
                droppable: false,
                attributes: {
                  'data-gjs-type': 'tag',
                },
                textable: 1,
                traits: [{
                    type: 'select',
                    label: 'Tag',
                    name: 'selected-tag',
                    options: tagTypes,
                }], 
            },

            isComponent: function(el) {
              let result;
              if (el.tagName == 'SPAN' && el.getAttribute("data-gjs-type") === "tag") {
                result = {
                  type: 'tag',
                };
              }
              return result;
            }
        }, ...

Answers (3)

inaLar• August 8, 20191 reactions

Thank you! I have done something similar, but yours is not so complicated. I've had other events attached to onActive, so I couldn't use it. Now I detached them and I will do as you suggest. About the data-gjs-type - I need it because the content I am creating is stored and when reloaded the components have to be recognized in order for their settings/traits to be loaded and especially this custom type component I've added. There is also a possibility to change the content via traits, which complicates things a bit too :) P.S.: @artf You have done a great work by far!

zgover• July 26, 20190 reactions

What would be your intention and goal of making it editable if you don't intend to extend the text component type? The text component type extends the default type and adds editing capabilities such as the rich text editor. Are you looking at implementing your own RTE? RichTextEditor API. Otherwise look at the source of the text component type and see what parts you don't want and reimplement it those parts that you do want in your own component.

inaLar• July 29, 20190 reactions

I'd prefer not to use RTE, as I do not need any of its functionality. I only want to be able to edit the content and save it ( by edit I mean - click into the span change the text and save it again). Also the new type will have specific traits and will be added to the canvas after a choice.

If I wanted to use a component of type text, I wouldn't ask the question :)

Thank you for the advise to look more closely into the text component - I will.

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.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

[QUESTION] Custom component - how to set editable to true

Question

Answers (3)

Related Questions and Answers

[QUESTION] How to update styles in Style Manager

[QUESTION] - Bind inner text/html (like div, p, h1) to Trait

[Question] Edit innerHTML in a custom button

[Question] Having trouble dragging external html with draggable="true"

Paid Plugins That Match This Issue

Browse Plugin Categories