Quill: how to get html data with the styling included?

Question

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?

Answer 1

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'
});