Inline style instead of quill editor inbuilt classes as classes are not available at the time to render HTML

Question

I am using ngx-quill editor as my rich text editor in my angular project. So that I can save HTML generated by it in DB and then render it on different browsers as innerHTML. As it is not using inline CSS and there is a class attribute to style the HTML which refers to the inbuilt classes of this editor. I want to render this HTML on the platform where these inbuilt-classes are not available.

How to render the HTML on the page where these inbuilt classes are not available?

OR

Is there any way to convert these classes into inline styles?

OR

and if any other options to render HTML saved by this editor with the styling applied to it?

Any help would be appreciated

Quill does its own styling, but offers its own data as HTML. This means CSS styling is also used, an approach that any rich text editor usually also takes. That is, you will have HTML elements with inline styling, as well as through a CSS file, where they are recognized by the usual CSS selectors. As I understand it ... Do you want to translate Quill CSS styling to another format? Is that it? — Loa, Jan 12 '20 at 02:46

WtFudgE · Answer 1 · 2020-04-28T09:24:56.537

It's definitely possible. I managed to do it, but not in an Angular way, so in the end I am only using quill and not ngx-quill. I've been trying to figure out how to adjust ngx-quill to reflect this but with no success yet.

Anyway if you want to know how I am currently doing it.

First I create the html element:

<div id="editor"></div>

Then I add this to the top of my component:

 import Quill from 'quill'
var DirectionAttribute = Quill.import('attributors/attribute/direction');
Quill.register(DirectionAttribute, true);
var AlignClass = Quill.import('attributors/class/align');
Quill.register(AlignClass, true);
var BackgroundClass = Quill.import('attributors/class/background');
Quill.register(BackgroundClass, true);
var ColorClass = Quill.import('attributors/class/color');
Quill.register(ColorClass, true);
var DirectionClass = Quill.import('attributors/class/direction');
Quill.register(DirectionClass, true);
var FontClass = Quill.import('attributors/class/font');
Quill.register(FontClass, true);
var SizeClass = Quill.import('attributors/class/size');
Quill.register(SizeClass, true);
var AlignStyle = Quill.import('attributors/style/align');
Quill.register(AlignStyle, true);
var BackgroundStyle = Quill.import('attributors/style/background');
Quill.register(BackgroundStyle, true);
var ColorStyle = Quill.import('attributors/style/color');
Quill.register(ColorStyle, true);
var DirectionStyle = Quill.import('attributors/style/direction');
Quill.register(DirectionStyle, true);
var FontStyle = Quill.import('attributors/style/font');
Quill.register(FontStyle, true);
var SizeStyle = Quill.import('attributors/style/size');
Quill.register(SizeStyle, true);

And then in my init method I declare it:

  ngOnInit() {
this.editor = new Quill('#editor', {
  modules: {
    'toolbar': [
      [{ 'font': [] }, { 'size': [] }],
      ['bold', 'italic', 'underline', 'strike'],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'script': 'super' }, { 'script': 'sub' }],
      [{ 'header': '1' }, { 'header': '2' }, 'blockquote', 'code-block'],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
      ['direction', { 'align': [] }],
      ['link', 'image', 'video']
    ]
  },
  theme: 'snow'
})

}

And then wherever I want to read the content:

this.email.message = this.editor.root.innerHTML

Of course this is not ideal at all, and it's a lot of code that I prefer to have inside a component. Maybe somebody else can help out squeezing this in a component

I've tried this here; https://codepen.io/helloCaptMomo/pen/OJzMded but the classes are still used. Is there any way to get the styles inlined? — Lee, Mar 18 '22 at 08:05

score 0 · Answer 2 · answered Feb 24 '23 at 16:28

For ngx-quill you can import attributors like this, which will then use style attributes:

In your typescript:

customOptions: CustomOption[] = [{
  import: 'attributors/style/size',
  whitelist: ['12px', '20px', '24px']
  },
  // You can import additional attributors for alignments, colors etc. here
];

In your html:

<quill-editor [customOptions]="customOptions">....

Inline style instead of quill editor inbuilt classes as classes are not available at the time to render HTML

2 Answers2