jhchen
commented
7 years ago You do not have to do all of this within Quill. I would suggest just building this custom control separately and use Quill's APIs like formatText when the user selects a color.
This is probably more an issue of mine, but I'm posting here also because it might help authors figure out specific requirements coming from specific usages of this wonderful editor, and I'd really love to use Quill but I'm finding it difficult to customize it for my needs.
In my scenario, I'd need a dropdown in the toolbar, listing a variable number of programmatically defined entries, each with its own name, and a color to be applied to the current selection when clicked. Some of these entries would be linked to hotkeys, too. All these parameters vary as they come from an external source, and should be configured programmatically.
Just as a fake sample, think of an entry named "emphasis", which applies red color to the selected text, and maybe is bound to a shortcut like Windows Ctrl+E. I'll have some 10-30 entries like this, externally defined, and to be programmatically set into the editor.
As for the hotkeys, this seems easy: I can just add a new binding to the keyboard module (
quill.keyboard.addBinding), bound to a function which formats the text with a specified color (this.quill.formatText), as per documentation (https://quilljs.com/docs/modules/keyboard/).Yet, I'd need to make a dropdown with the full list of color-related entries, and here I'm a bit confused as, despite the Quill's extensibility (which for me would be the best reason for preferring it over all the other rich text editors), this does not seem a trivial task:
I cannot just set the
colorvalue in the toolbar module (e.g.[{ 'color': ['#ff0000', '#00ff00'] }]). This would be perfect, as all what I need is setting the text's color; yet, I need a dropdown showing an arbitrarily defined name for each color, while the default color UI in Quill just shows a set of colored rectangles for each color.making a theme is not an option, because the entries list with names, colors and optional bindings comes from outside the editor, and should be changed dynamically, nor do they belong to a closed list. I just need a dropdown to be filled with different entries, according to the parameters received.
a promising alternative seems creating a custom handler (https://quilljs.com/docs/modules/toolbar/), which also has the bonus of being possible post initialization. This discussion shows a custom button linked to a custom handler: https://github.com/quilljs/quill/issues/1016. Yet, I cannot modify my CSS, and I would avoid direct DOM manipulation at all costs (e.g. a
document.querySelector('.ql-myownclass'), as the entries parameters come from outside the editor, they change dynamically, and I'm going to use a higher-abstraction level framework like Angular4. To this end, I'd start from a component like https://github.com/KillerCodeMonkey/ngx-quill, and customize it as much as needed to add this dynamic configuration.Could anyone help me figuring the best way of accomplishing this using Quill? Thanks!