Quill is turning out to be fairly annoying to customize!
What I’d like to do is add some additional formats, so that my custom buttons can actually modify the underlying HTML stored in Quill. Quill filters out any HTML not defined in formats, so I can’t just use pasteHTML to force the HTML into the editor, and there doesn’t seem to be any way to disable that (not even if you use their dangerouslyPasteHTML function). Their advice if you want to use your own HTML without adding new Quill formats is to use a different editor.
I found this Javascript from the Quill documentation, and modified it for a new format I’d like to add:
let Inline = Quill.import('blots/inline');
class BigBlot extends Inline { }
BigBlot .blotName = 'sizeup';
BigBlot .tagName = 'big';
Quill.register(BigBlot );
First Try In Python
big = Quill['import']('blots/inline')
class BigBlot(big)
pass
BigBlot.blotName = 'sizeup'
BigBlot.tagName = 'big'
Quill.register(BigBlot)
That failed on the inheritance, as did various other permutations (class BigBlot(type(big))
, class BigBlot(big.__class__)
, and class BigBlot(type(big.__class__))
).
I have to copy what’s returned, otherwise I’m overwriting the tag name for the default style.
Second Try In Javascript
I also tried putting the Javascript directly into the native libraries section, but apparently the Quill Javascript isn’t loaded when the native libraries execute.
Third Try In Javascript
I then tried forcing the Quill Javascript to load before the Javascript to add a new format. That led to a Quill error about a non-existent format.
Fourth Try Back In Python
I tried going out to Javascript to create a copy of the object, e.g.:
big = Quill['import']('blots/inline')
big = window.Object.create(big)
BigBlot.blotName = 'sizeup'
BigBlot.tagName = 'big'
Quill.register(BigBlot)
That caused Anvil to give an Internal Error when applying the format.
I clearly have no idea how to do what I’m trying to do. Can any Quill/Javascript experts point me in the right direction?
Here’s a clone link for a small app where I’ve been playing with this: Anvil | Login