This Stimulus controller will let you easily integrate Quill.js into your Rails project, including adding some missing table functionality.
I’ve used lots of different WYSIWYG editors in the past, most are clunky or produce messy HTML, but Quill.js is a pretty light weight option that actually works fairly well. The following will show how to use Stimulus to create a Quill editor as well as add some missing table functionality.
Add Quill Module
Note, the table module is only available in the upcoming 2.0.0 release, so you’ll need to add the latest dev version to be able to use it.
yarn add quill@2.0.0-dev.4-or-npm install quill@2.0.0-dev.4
Create Quill Editor Partial
The partial has two important parts, the hidden field which will get updated via Stimulus so it can be submitted with the Rails form, and div container which will host the Quill editor that is initialized by Stimulus. It also is connecting Stimulus targets and actions.
<%= form.hidden_field :html, data: { quill: { target: "input" } } %>
<div style="min-height:500px;" data-quill-target="editor"></div>