say you have a model named Article, and you wanna use Quilljs to edit it's content.

edit.html.erb

<!-- Include Quill stylesheet -->
<link href="https://cdn.quilljs.com/1.3.5/quill.snow.css" rel="stylesheet">

<div id="form-container">
  <%= form_for @portfolio do |f| %>
    <div class="form-group">
      <%= f.label :title %>
      <%= f.text_field :title, class: "form-control" %>
    </div>
    <div class="form-group">
      <%= f.label :content %>
      <%= f.text_area :content, class: "d-none" %>
      <div id="toolbar-container">
        <span class="ql-formats">
          <select class="ql-font"></select>
          <select class="ql-size"></select>
        </span>
        <span class="ql-formats">
          <button class="ql-bold"></button>
          <button class="ql-italic"></button>
          <button class="ql-underline"></button>
          <button class="ql-strike"></button>
        </span>
        <span class="ql-formats">
          <select class="ql-color"></select>
          <select class="ql-background"></select>
        </span>
        <span class="ql-formats">
          <button class="ql-script" value="sub"></button>
          <button class="ql-script" value="super"></button>
        </span>
        <span class="ql-formats">
          <button class="ql-header" value="1"></button>
          <button class="ql-header" value="2"></button>
          <button class="ql-blockquote"></button>
          <button class="ql-code-block"></button>
        </span>
        <span class="ql-formats">
          <button class="ql-list" value="ordered"></button>
          <button class="ql-list" value="bullet"></button>
          <button class="ql-indent" value="-1"></button>
          <button class="ql-indent" value="+1"></button>
        </span>
        <span class="ql-formats">
          <button class="ql-direction" value="rtl"></button>
          <select class="ql-align"></select>
        </span>
        <span class="ql-formats">
          <button class="ql-link"></button>
          <button class="ql-image"></button>
          <button class="ql-video"></button>
        </span>
        <span class="ql-formats">
          <button class="ql-clean"></button>
        </span>
      </div>
      <div id="editor-container">
        <!-- the script on the botoom will setContents() here on document ready -->
      </div>
    </div>
    <%= f.button :submit, class: "btn btn-primary" %>
  <% end %>
</div>

<!-- Include the Quill library here -->
<script src="https://cdn.quilljs.com/1.3.5/quill.js"></script>

<style type="text/css">
  #editor-container {
    height: 375px;
  }
</style>

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor-container', {
    modules: {
      toolbar: '#toolbar-container'
    },
    placeholder: 'Compose an epic...',
    theme: 'snow'
  });

  var form = document.querySelector('form');
  form.onsubmit = function() {
    // Populate hidden form on submit
    var content = document.querySelector('textarea[name="portfolio[content]"]');
    content.value = JSON.stringify(quill.getContents());
    // console.log("Submitted", $(form).serialize(), $(form).serializeArray());
  };
  (function() {
    quill.setContents(JSON.parse('<%= j raw(@portfolio.content) %>'))
  })()
</script>