Free Online Tutorials

Part 1: Quill: Add View source button
Part 2: Quill: Add View source button – part 2

Add name for Textarea:
We use example from Part 2:

Edit Javascript, add:

    if(this.id)
        this.quill.id = this.id;
    else{
        var y = 'quill'+(new Date().getTime());
        this.quill.id = this.id = y;
    }

and

this.quill.txtArea.setAttribute('name',this.quill.id);

Full example:
Javascript

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

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

Quill.prototype.showSource = function() {
  if (this.txtArea.style.display === "") {
    const html = this.txtArea.value;
    if (html === '<p><br/></p>') {
      this.html = null;
    } else {
      this.html = html.replace(new RegExp('<p><br/>', 'g'), '<p>')
    }
    this.pasteHTML(html);
  }
  this.txtArea.style.display =
    this.txtArea.style.display === "none" ? "" : "none";
}

Quill.ShowSource = function(t) {
  $(t).parents('.wyswyg')[0].quill.showSource()
}

$(function() {
  $(".wyswyg").each(function() {
    var e = $(this).find(".editor"),
      o = $(this).find(".toolbar");
    this.quill = new Quill(e.get(0), {
      theme: "snow",
      modules: {
        toolbar: o.get(0)
      }
    })
    if(this.id)
        this.quill.id = this.id;
    else{
        var y = 'quill'+(new Date().getTime());
        this.quill.id = this.id = y;
    }

    this.quill.txtArea = document.createElement("textarea");
    this.quill.txtArea.setAttribute('name',this.quill.id);
    this.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 = this.quill.addContainer("ql-custom");
    htmlEditor.appendChild(this.quill.txtArea);

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

Online demo: https://jsfiddle.net/sans_amour/9d6jxeut/3/

Done, now we see name of Textarea: