Member-only story
Dynamically customizing Quill/ngx-quill editors in an Angular application
In this article, I’ll share the first iteration of a technical design I’m working on for the application I’m developing.
The problem
In my current project (an Angular application), I’m using the Quill rich text editor, with the help of the ngx-quill utility library (which provides an easy way to use Quill in Angular projects.
Unfortunatly, as it stands, Quill isn’t really i18n/l10n friendly: https://github.com/quilljs/quill/issues/2922. Out of the box it isn’t possible to customize the labels shown by Quill, for instance those shown when adding a like, an embedded video or when changing font sizes.
If you check out the issue linked above, you’ll see that the recommended workaround is to manipulate the editor’s DOM directly. Other solutions include modifying the text using CSS. I don’t know about you, but dealing with i18n/l10n through CSS isn’t really something I want to be doing…
Since internationalization and localization are important requirements for my project, I needed to find a solution.
In addition, I know that rich text editors will have quite some importance in my application, hence it’ll be useful for me to have a uniform way of handling the customization of those editors across the whole system.
