Quill + Rails + Stimulus

_form.html.erb

<!-- ./app/views/posts/_form.html.erb -->
<div class="form-group mb-3">
  <%= content_fields.label :body, class: 'col-form-label' %>
  <div data-controller="quill-editor">
  <div data-target="quill-editor.container" style="min-height: 250px;"></div>
    <%= content_fields.text_area :body, class: 'form-control d-none', placeholder: 'Content' %>
  </div>
</div>

application.scss

// ./app/javascript/stylesheets/application.scss
@import '~quill/dist/quill.snow';

quill_editor_controller.js

// ./app/javascript/controllers/quill_editor_controller.js
import { Controller } from "stimulus";
import Quill from 'quill';

export default class extends Controller {

  static targets = ['container'];

  connect() {
    this.quillInit();
  }

  quillInit() {
    this.containerTargets.forEach(containerTarget => {
      const quill = new Quill(containerTarget, this.quillOption);
      const textareaElement = containerTarget.nextElementSibling;

      if (textareaElement.type !== 'textarea') {
        console.warn('You have to put <textarea> after <div data-target="quill-editor.container">')
        return;
      }

      if (textareaElement.value !== '') {
        quill.setContents(JSON.parse(textareaElement.value)['ops']);
      }

      quill.on('text-change', function() {
        let delta = quill.getContents();
        textareaElement.value = JSON.stringify(delta);
      })
    })
  }

  get quillOption() {
    return {
      modules: {
        toolbar: this.toolbarOption
      },
      placeholder: 'Type something here...',
      readOnly: false,
      theme: 'snow',
    }
  }

  get toolbarOption() {
    return {
      container: [
        [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['link', 'image'],
        [{ 'color': [] }, { 'background': [] }],
      ]
    }
  }
}

quill_viewer_controller.js

import { Controller } from 'stimulus';
import Quill from 'quill';

export default class extends Controller {

  connect() {
    this.element.innerHTML = this.quillInnerHTML();
  }

  quillInnerHTML() {
    if (this.params === '') {
      return;
    }

    let emptyElement = document.createElement('div');
    const quill = new Quill(emptyElement);
    quill.setContents(JSON.parse(this.params)['ops']);
    return quill.root.innerHTML;
  }

  // Use getter to clean code
  get params() {
    return this.data.get('params');
  }
}

show.html.erb

<!-- ./app/views/posts/show.html.erb -->

<div data-controller="quill-viewer"
  data-quill-viewer-params="<%= content.body %>"
>
</div>