Trying to override of link trait
Question
Hi @artf I am trying to add new types of trait Below is my code.It's updating the values in code also but on reload link trait will set to default.
Here is my code
`editor.DomComponents.addType('link', {
model: dModel.extend({
defaults: Object.assign({}, dModel.prototype.defaults, {
removable: false,
traits: [
// strings are automatically converted to text types
{
type: 'select',
label: 'Pages',
name: 'href',
changeprop: 1,
options: [
{value: 'index.html', name: 'Home'},
{value: 'index2.html', name: 'Home2'},
{value: 'index3.html', name: 'Home3'},
{value: 'index4.html', name: 'Home4'},
]
},
{
type: 'href',
label: 'Pages',
name: 'href',
changeprop: 1,
category: { id: 'general',
label: 'General', }
},
{
type: 'select',
label: 'Target',
changeprop: 1,
name: 'target',
options: [
{value: '', name: 'same'},
{value: '_blank', name: 'new'},
]
},
],
}),
}, {
isComponent: function(el) {
if(el.tagName == 'A'){
return {type: 'link'};
}
},
}),
view: dView,
`});``
After reload when i click the existing one it shows the default one and when i drag new link element to the canvase in that case it shows me the custom one which i made above.
@artf @ryandeba Could you please help me on this.
ThanksAnswers (1)
It worked after placing a code in plugin.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1998
Extending Link component not working properly.
hello @hello @artf I am trying to extend the link component and add new traits like href and target the code is given below. `function load...
Issue #3225
How to Update Style from checkbox Trait?
Hi @artf I am trying to update the style using the checkbox trait but it's not calling the function. Here is the code I really appreciate a...
Issue #3237
Add Trait For wrapper
Hi @artf I've added trait for wrapper this way. How can I perform the init function for the same Here is the code @artf Could you please he...
Issue #3512
Child elements not draggable ,droppable highlightable. also the CSS of all child elements not pushed in style section while develop a banner component in as plugin
Hello @artf , I am trying to develop a simple banner plugin which will be include a heading , subheading and link. and every element can be...
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 →Related tutorials
In-depth guides on the same topic.
Tutorial
10 Mistakes When Building a Visual Editor (And How to Avoid Them)
Visual editors are powerful tools — they enable non-technical users to create websites, emails, landing pages, and applications without writing code
Tutorial
ScribeJS: Lightweight Inline Rich Text Editor
In the world of web development, rich text editors often feel bulky, slow, and difficult to integrate.
Tutorial
How to Build a Drag-and-Drop Page Builder in Angular Using GrapesJS (Step-by-Step Guide + Code)
Build a visual drag-and-drop page builder in Angular with GrapesJS. Learn setup, plugins, and backend saving in this full code guide.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.