Free Online Tutorials

Quill is a powerful rich text editor.

Home page:
https://quilljs.com/

How to Add View source button

Method 1:

CSS:

button.ql-showHtml:after {
  content: "[ source ]";
}

(change [ source ] to [source])

Javascript:

var quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: {
      container: [
        [{
          font: []
        }],
        [{
          header: [false, 1, 2, 3, 4, 5, 6]
        }],
        ["bold", "italic", "underline", "strike"],
        [{
          align: []
        }],
        ["blockquote", "code-block"],
        [{
          list: "ordered"
        }, {
          list: "bullet"
        }, {
          list: "check"
        }],
        [{
          indent: "-1"
        }, {
          indent: "+1"
        }],
        [{
          color: []
        }, {
          background: []
        }],
        ["link", "image", "video"],
        ["clean"],
        ["showHtml"]
      ],
      handlers: {
        showHtml: () => {
          if (quill.txtArea.style.display === "") {
            const html = quill.txtArea.value;
            if (html === '<p><br/></p>') {
              quill.html = null;
            } else {
              quill.html = html.replace(new RegExp('<p><br/>', 'g'), '<p>')
            }
            quill.pasteHTML(html);
          }
          quill.txtArea.style.display =
            quill.txtArea.style.display === "none" ? "" : "none";
        }
      }
    }
  }
});

if (Quill.prototype.getHTML == undefined)
  Quill.prototype.getHTML = function() {
    return this.container.firstChild.innerHTML;
  };

//fix for Quill v2
if (Quill.prototype.pasteHTML == undefined)
  Quill.prototype.pasteHTML = function(html) {
    {
      this.container.firstChild.innerHTML = html;
    }
  }

quill.txtArea = document.createElement("textarea");
quill.txtArea.style.cssText =
  "width: 100%;margin: 0px;background: rgb(29, 29, 29);box-sizing: border-box;color: rgb(204, 204, 204);font-size: 15px;outline: none;padding: 20px;line-height: 24px;font-family: Consolas, Menlo, Monaco, &quot;Courier New&quot;, monospace;position: absolute;top: 0;bottom: 0;border: none;display:none;resize: none;";

var htmlEditor = quill.addContainer("ql-custom");
htmlEditor.appendChild(quill.txtArea);

quill.on("text-change", (delta, oldDelta, source) => {  
  var html = quill.getHTML();
  quill.txtArea.value = html;
});

quill.txtArea.value = quill.getHTML();

HTML:

<div id="editor"><a href="http://www.tutorialspots.com" target="_blank">www.tutorialspots.com</a> - Add view source button - Quill v2</div>

Online demo for Quill v2: https://jsfiddle.net/sans_amour/juqr5zew/

Quill v1: https://jsfiddle.net/sans_amour/juqr5zew/1/

Quill: Add View source button – part 2