Previously in the article The popular WYSIWYG editors for the website I mentioned the Quilljs editor. This is also one of the most popular rich editor recently by the convenient support functions for editing (Including a very nice interface.
One of them is the Bubble interface with the same Editor display as Medium. When you need to format the text, simply highlight and Edior will appear 
The integration of Quilljs into the Rails application is also quite easy because there is now Gem supporting developers to do it quickly.You can refer to Gem at the link: https://github.com/abhinavmathur/quilljs -rails
How to install
Add this line to Gemfile
gem 'quilljs-rails'
Then type
$ bundle install
Or type the following command line directly from Terminal
$ gem install quilljs-rails
Using
Insert Script Js and embed CSS Quill into your web from CDN by inserting the following 2 code snippets in the HEADER section in application.html.erb file
1 2 3 | <script src="https://cdn.quilljs.com/1.1.9/quill.js"></script> <link href="https://cdn.quilljs.com/1.1.9/quill.snow.css" rel="stylesheet"> |
Add this line to the application.js file
//= require quill.global
** Note: ** If you do not want to Load js and css words via CDN, you can add the following 2 lines to the application.js file
1 2 3 | //= require quill.min //= require quill.global |
If you want to turn normal text_filed or text_area into Quill Editor, you just need to add quill_container class to it
For example
<%= f.text_field :title, label: 'Title', type: 'text', class: 'quill_container' %>
Or if you use Simple form , the way to declare is as follows
<%= f.input :title, input_html: { class: 'quill_container' } %>
By default, the settings for Quilljs will be as follows
1 2 3 4 5 6 7 8 9 10 11 12 13 | theme: 'snow', modules: { toolbar: [ [{ 'header': [1, 2, 3, false] }], [{ 'color': [] }, { 'background': [] }], ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], [{ 'indent': '-1'}, { 'indent': '+1' }], ['clean'] ] } |
To be able to customize, you can use the following code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var defaults = { theme: 'snow', modules: { toolbar: [ [{ 'header': [1, 2, 3, false] }], [{ 'color': [] }, { 'background': [] }], ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], [{ 'indent': '-1'}, { 'indent': '+1' }], ['clean'] ] } }; //This is the global config object Quilljs.setDefaults(defaults) |
Quilljs supports 2 themes (interface for editor), snow and bubble. You can use them by requiring corresponding to file application.css (or application.scss if using sass)
*= require quill.snow
*= require quill.bubble
See the Quilljs document for more ways to customize the Toolbar for your Editor: https://quilljs.com/docs/quickstart/