Why Quill?

1. support math
2. internal format, not html

Question:

1. where local image saved?
2. support image url?

Problem:

1. can't have two editors on the same page
2. jquery syntax not work to find body
3. missing images under packs
   • import 'quill/dist/quill.snow.css';
   • https://medium.com/@technoblogueur/rails-6-and-webpacker-what-you-need-to-know-e3534fded7ff
4. limit size by bootstrap
   • wrapper by another div, col-10 ok, do not use form-control
5. math
   • need kaTex
   • include js in application.html.erb directly
6. image with URL
   • https://github.com/quilljs/quill/issues/2044
   • new format: image_link
   • set icons: https://github.com/quilljs/quill/issues/1099
   • need to install font-awesome for icons

Guide:

1. https://github.com/abhinavmathur/quilljs-rails
2. https://www.kohrvid.com/blog/posts/using-quilljs-with-rails-6
3. https://medium.com/@technoblogueur/rails-6-and-webpacker-what-you-need-to-know-e3534fded7ff
4. https://stackoverflow.com/questions/56198624
5. demo: https://harlemsquirrel.github.io/jekyll/update/2016/12/11/rails-and-quill.html

Install

1. yarn add quill
2. include in application, import css as well.
3. view:
   • add hidden_field with class 'rich-text-content',
   • add a div with id 'editor', wrapped by div with 'col-10' to limit size
4. in js:
   • copy content from div with id='editor' to input with class 'rich-text-content', thus save and upload to server
   • config options and toolbar
5. support math
   • include js in application.html.erb directly
6. image with URL
   • https://github.com/quilljs/quill/issues/2044
   • new format: image_link
   • set icons: https://github.com/quilljs/quill/issues/1099

7. min height

   • https://www.fabiofranchino.com/log/setting-a-minimun-default-height-to-quill-text-area/

   .ql-editor{
     min-height: 200px;
   }