Use Quill Rich Text Editor in ASP.NET Core Web Application

Creating a rich text editor in ASP.NET Core using QuillJs

Quill

  • npm install quill

  • Include stylesheet <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />

  • Quill is initialized with a DOM element to contain the editor. The contents of that element will become the initial contents of Quill. Does not work with a <textarea>

  • Create the editor container <div id="editor"><p>Hello World!</p> </div>. Can either be a CSS selector or a DOM object.

  • Include the Quill library <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

  • Initialize Quill editor

<script>
  var options = {
  debug: 'info',
  modules: {
    toolbar: '#toolbar'
  },
  placeholder: 'Compose an epic...',
  readOnly: true,
  theme: 'snow'
};
var editor = new Quill('#editor', options);
</script>
/*index.css: increase length of the text editor */
...
#editor {
  height: 375px;
}
strong {
  font-weight: bold !important;
}
...

Images

Workflow

  • user Quill to gather user input
  • Send Quill Delta JSON to the server var json = JSON.stringify(deltaobject);
  • Sanitize - assume it came from a malware bot that mimics Quill
  • Store sanitized version in database
  • For read-only, convert Delta to HTML and display
  • For edit mode,
    • fetch Quill Delta JSON
    • convert to object var delta = JSON.parse(json);
    • render Delta object quill.setContents(delta, 'silent')

Tables

var form = document.getElementById("FormID"); // get form by ID
form.onsubmit = function () {
  // onsubmit do this first
  var name = document.querySelector("input[name=name]"); // set name input var
  name.value = JSON.stringify(quill.getContents()); // populate name input with quill data
  return true; // submit form
};

// Ah ok, you can populate the quill editor with your Delta data from the DB like so:

quill.setContents(<?=$object->name?>);

// https://codepen.io/iice/pen/vQKrWY
(function () {
    function init(html) {
        var quill = new Quill('#editor-container', {});

        var delta = quill.clipboard.convert(html);
        quill.setContents(delta, 'silent');
    }

    var html = `<h1>Hello</h1><p>World</p>`;

    init(html);
})();

https://github.com/benwinding/quill-image-compress


///
window.onload = (event) => {
  var qua = document.getElementById('qualifications');
  {qua}
};


// [Delta not defined #1573](https://github.com/quilljs/quill/issues/1573)
// Delta is a dependency of Quill and included with the library. However if you have a build pipeline you probably still want to do the standard CommonJS import:

import Delta from 'quill-delta';
// but if you are just in the browser environment Quill also supplies an import method:

var Delta = Quill.import('delta');
// You are right the paste is not passing to the editor because of the thrown error.