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

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


  • npm install quill

  • Include stylesheet <link href="" 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=""></script>

  • Initialize Quill editor

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



  • 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')


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:


(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>`;


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

// [Delta not defined #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.