Make the content of component editable
Worked it out: Just had to make the type a link, and then include a text component. E.g.
Read full answer below ↓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
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 #3409
[QUESTION] Custom component property that is not a trait
I would like to create a custom component with a property that will be updated by specific code, but I don't want this property to be visib...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.