Ngx-quill: Setting font-family and font-size

[Rlcolli4]

This tool has been wonderful and I'm looking forward to continue to learn it but I seem to be struggling with the .format(), .formatText(), and .formatLine() functions, are these functions viable for trying to set the default font-family and font-size on load? I'm trying to change them the following way:

this.editor.quillEditor.format('font', 'Arial');
this.editor.quillEditor.formatText(0, 5, 'font', 'Arial');
this.editor.quillEditor.formatLine(0, 100, 'font', 'Arial');

this.editor.quillEditor.format('size', '8px');//Also tried this as 8 instead of a string
this.editor.quillEditor.formatText(0, 5, 'size', '8px');//Also tried this as 8 instead of a string
this.editor.quillEditor.formatLine(0, 100, 'size', '8px');//Also tried this as 8 instead of a string

I've looked at the example and see how you do everything through the @Component using the selectors for the components, etc. But when I tried that in my current app it did not work. I appreciate any insight or help you can give me as I'm learning to use your module!

[KillerCodeMonkey]

I never tried to use it.

Maybe there is a glitch between the changes made through quill api and angular?
Really, i never tried it :D.
Maybe you can check, how the format-functions are implemented in quill.

I only listen to the quill "text-change" to update the connected model. If this is never fired by using the format apis i do not know, how to update the model and the content :(

// update model if text changes
    this.quillEditor.on('text-change', (delta: any, oldDelta: any, source: string) => {
      let html: (string | null) = this.editorElem.children[0].innerHTML;
      const text = this.quillEditor.getText();

      if (html === '<p><br></p>') {
          html = null;
      }

      this.onModelChange(html);

      this.onContentChanged.emit({
        editor: this.quillEditor,
        html: html,
        text: text,
        delta: delta,
        oldDelta: oldDelta,
        source: source
      });
});

Maybe you can do some research for me, because i do not have so much time this month.

[Rlcolli4]

Thanks for the quick response even though you are busy!

By the looks of things so far this morning it looks like font and size are currently not supported by quilljs. When you do color or bold it performs an inline style that follow their rules or when you bold something it adds the html. However when working with font family or size, they remove inline styles and set a class for the font style based on the selected item in the dropdown. (see their change log for details about the removal of "styles" and watch the css change based on drop down use)

It looks like if I don't import any of the themes and set up my own custom css for the items I want hidden I can then control the font family and size through the component itself. This may work for what my app needs otherwise I do agree that adding the tag "enhancement" was a good idea :)

[KillerCodeMonkey]

closed, because quilljs does not provide this.