[QUESTION] `RichTextEditor` update
Question
Hi @artf ,
I'm thinking of opening a PR for an update on the RichTextEditor. I thought I'd run the idea past you first before getting to work on it.
It proposes a change to the actions to have a state, which is an optional function that returns an integer to depict the state of each action; 1 for active, 0 for inactive, -1 for disabled.
This essentially allows the ability to set the styling and functionality of the actions without having to set the name field of the object the same as the Document.queryCommandSupported or Document.queryCommandState parameter. If there is no state function provided, we can default to the previous logic
An example use case for this the inserting and removing of an anchor:
editor.RichTextEditor.add('insertAnchor', {
icon: '<i class="fa fa-link"/>',
attributes: {title: 'Insert link'},
state: (doc, rte) => {
const anchor = rte.selection().anchorNode;
const nextSibling = anchor && anchor.nextSibling;
if (nextSibling && nextSibling.nodeName == 'A') {
// If we've selected an anchor tag, return positive
return 1;
} else {
// since you can nest anchor tags, we technically don't want to `disable` this command
// so we return 0 for inactive.
return 0;
}
},
result: rte => rte.insertHTML(`<a class="link" href="">${rte.selection()}</a>`)
});
editor.RichTextEditor.add('removeAnchor', {
icon: '<i class="fa fa-unlink"/>',
attributes: {title: 'Remove link'},
state: (doc, rte) => {
const anchor = rte.selection().anchorNode;
const nextSibling = anchor && anchor.nextSibling;
if (nextSibling && nextSibling.nodeName == 'A') {
// If we've selected an anchor tag, return 0 for inactive, meaning we can toggle this command.
return 0;
} else {
// however, if they have not selected an anchor tag, this action should be `disabled`
return -1;
}
},
result: rte => rte.exec('unlink')
});
Also, what do you think about the idea of passing an empty array to actions on the config, not rendering any of the default actions. I say this because, I'm creating my own RTE without using CKEditor (as CKEditor has some unusual behaviour with custom components), and in order to not render the bold action first, I pass it in the actions: ['bold'] configuration, but then editor.RichTextEditor.remove('bold'), as I would like have other commands before the bold and this is the only way i could think of doing so
I'm very happy to work on this, just thought I'd get your input/concerns/blessing first
Answers (1)
It proposes a change to the actions to have a state, which is an optional function that returns an integer to depict the state of each action; 1 for active, 0 for inactive, -1 for disabled.
Thanks for the suggestion, I think it might be a good idea to have this kind of custom check, so go ahead. Remember to add some example here
Also, what do you think about the idea of passing an empty array to actions on the config, not rendering any of the default actions
It would be a breaking change, so I'd like to avoid it.
I'm creating my own RTE without using CKEditor (as CKEditor has some unusual behaviour with custom components), and in order to not render the bold action first, I pass it in the actions: ['bold'] configuration, but then editor.RichTextEditor.remove('bold'), as I would like have other commands before the bold and this is the only way i could think of doing so
Well, if you're creating a plugin for the built-in RTE and you want to remove all of the initial actions you can do this:
const rte = editor.RichTextEditor;
rte.getAll().forEach(action => rte.remove(action.name))
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1081
[BUG] - removePanel does not remove panels
I'm trying to remove a panel. The function returns the panel the first time I run removePanel and then returns undefined if I run it again....
Issue #906
[Question]How to change custom component content (html) from ajax?
Hi @artf, First of all thanks for this awesome plugin. Can you please let me know how i can update/change block content? I created custom b...
Issue #2742
[QUESTION] How to prevent unique ids generation?
Hi! Thanks for your work @artf. This is a simplified code of how I use grapesjs, I want to save the styles and then want to apply them agai...
Issue #2337
[BUG / QUESTION] Deleting default styles does not work
Hello, i'm trying to delete some of the default styles of the blocks. I wrote everything I changed in a plugin. I used this function to upd...
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.