Issue #2336Opened October 17, 2019by adriangroch1 reactions

[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)

artfOctober 19, 20191 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.