7

How can I get the html from Quill editor with the css included?

Currently I get the html using editor.root.innerHTML. It works, but when I open the html file in browser the styling isn't there. For example I aligned a paragraph to be in center. The result is a paragraph tag with class ql-align-center but without the definition of the class itself, so it renders without center alignment in browser.

Is there a method to generate html with the style included?

otong
  • 936
  • 2
  • 12
  • 22

1 Answers1

5

You can use inline style attributes instead of classes. This Quill guide explain how.

var ColorClass = Quill.import('attributors/class/color');
var SizeStyle = Quill.import('attributors/style/size');
Quill.register(ColorClass, true);
Quill.register(SizeStyle, true);

// Initialize as you would normally
var quill = new Quill('#editor', {
  modules: {
    toolbar: true
  },
  theme: 'snow'
});
Ben Browitt
  • 1,507
  • 5
  • 8
  • thanks, after reading above, I found the import docs https://quilljs.com/docs/api/#import, it says that "In general the path should map exactly to Quill source code directory structure", so I assume it is in `node_modules/quill/` but there isn't a directory called attributors. However, when I use `Quill.import('attributors/style/align')` it works, it returns inline align styling in HTML. and about the example https://quilljs.com/playground/#class-vs-inline-style the background and color class is still using classes with span tag. – otong Sep 14 '18 at 02:11
  • 1
    Quill registers attributors here: https://github.com/quilljs/quill/blob/develop/quill.js#L46 – Ben Browitt Sep 14 '18 at 19:39
  • 1
    Color and background attributors use style by default so just delete ColorClass from the example above. – Ben Browitt Sep 14 '18 at 19:41
  • Could someone please help me with this https://stackoverflow.com/questions/63479292/how-to-register-alignment-styles-in-react-quill – jarivak Aug 19 '20 at 08:15