[QUESTION] Make the content of component editable
Question
Is it possible to make the content of a component completely editable?
I want to make a custom anchor with a trait of the href, and then the user can style the anchor accordingly as I'm planning to make it styled as a button.
Basically I want to let the user style 'Click Me' as they would style any text.
editor.DomComponents.addType('custom_button', {
model: {
defaults: {
removable: true,
draggable: true,
badgable: true,
stylable: true,
highlightable: false,
selectable: true,
copyable: false,
resizable: false,
editable: true,
hoverable: true,
attributes: {class: 'btn gjs-button'},
tagName: 'a',
content: 'Click Me',
traits: [{
type: 'text',
label: 'URL',
name: 'href'
}],
},
reRender() {
this.view.render();
}
},
isComponent: function (el) {
if (el.tagName === 'custom_button')
return {type: 'custom_button'};
}
});
editor.BlockManager.add('custom_button', {
id: 'custom_button',
label: 'Button',
category: 'GUI',
content: {
type: 'custom_button'
}
});
I made a fiddle showing how it looks now: https://jsfiddle.net/tb2gyas8/
Any Idea?
Answers (1)
Worked it out:
Just had to make the type a link, and then include a text component. E.g.
editor.DomComponents.addType('custom_button', {
model: {
defaults: {
removable: true,
draggable: true,
badgable: true,
stylable: true,
highlightable: false,
selectable: true,
copyable: false,
resizable: true,
editable: true,
hoverable: true,
attributes: {class: 'btn gjs-button'},
type: 'link',
traits: [{
type: 'text',
label: 'URL',
name: 'href'
}],
content: 'hello wolrd'
},
reRender() {
this.view.render();
}
},
extend: 'link',
isComponent: function (el) {
if (el.tagName === 'custom_button')
return {type: 'custom_button'};
}
});
// Calendar Widget
editor.BlockManager.add('custom_button', {
id: 'custom_button',
label: 'Button',
category: 'GUI',
content: {
type: 'custom_button'
}
});
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3258
QUESTION: Prevent/Disable Custom Blocks from being dropped inside other Custom Blocks
Hello, I have a custom component, let's call it a Section Block. I want to prevent the user from dropping Section Blocks inside other Secti...
Issue #1639
[Question]: Would it be possible to have change settings under style manager in a way that it has href when a link is created?
I'm using preset newsletter with built-in RTE (do not want to use ck editor like the demo) In order to make any text to link, i need to cli...
Issue #2082
[Question]Is it possible to update existing pages when components are modified?
For example, a custom component is used by some existing published pages. When the component is modified, maybe the style is adjusted, or t...
Issue #1313
[Question] Set traits value from html on component load
I have custom component and want to set trait default values from html. below is html rendered by component. traits I am trying to set for...
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.