BUG: how to change gjs-ckeditor-format component
Question
hi guys, we all know that gjs-ckeditor-plugin working with [data-gjs-type]="text" components. I wanna know , could we change this option? I want to make my own custom component with for example [data-gjs-type]="anyDiv" and have the same functionality like in [data-gjs-type]="text". maybe someone knows how to change that? maybe i can change that in ckeditor config? when we initialize ckeditor for example: options: { !!!!!for example: format: 'text' , want to add ('anyDiv'), language: 'en', startupFocus: true, extraAllowedContent: '();{}', // Allows any class and any inline style allowedContent: true, // Disable auto-formatting, class removing, etc. enterMode: ckeditor.ENTER_BR, uiColor: '#0000001a', // Inline editor color extraPlugins: 'justify,colorbutton,panelbutton,font,sourcedialog,showblocks', height: 5, toolbar:[ [ "Format", 'Font', 'FontSize',"-", "Bold", "Italic", "Strike", "Underline", "Subscript", "Superscript", "RemoveFormat", "-", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock", "-", "TextColor", "BGColor", "-", "-", "-"] ] }, position: 'left',
Answers (3)
@vatte21 To make your component editable.You've to extend the text type in your component like this way
editor.Components.addType('anyDiv', {
model: {
defaults: {
type: 'text',
traits:[
...editor.Components.getType(type.id).model.prototype.defaults.traits,
...[]
]
},
reRender() {
this.view.render();
},
},
extend: 'text',
isComponent: function (el) {
if (el.tagName === 'anyDiv')
return {type: 'anyDiv'};
}
});
@Abhisheknanda1344463 Thank you! Ill try
@Abhisheknanda1344463 your code fragment gives me an error Uncaught ReferenceError: type is not defined on the line
...editor.Components.getType(type.id).model.prototype.defaults.traits,
where is type defined?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1464
Customizing the Component Position
First of all thank you guys for this awesome library, And I have one Clarification that is how do i customize the drop position example if...
Issue #917
[QUESTION] Custom style properties per element
Is it possible to have custom style property UI per element. For example, consider that I want the font-size to be shown as textbox for tex...
Issue #2404
Question: how to observe children changes in component
Is there an easy way to subscribe/listen to changes in the components/children of my custom component type? Perhaps an event I can subscrib...
Issue #3328
How can I update the nodeValue (text value) of components by inputs forms
Hello. Grapesjs is a great tool. Thanks for it. I want to update the text value of a component by inputs, how can I do that?? if a user fil...
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.