富文本格式的HTML编辑/不带html标签的修改（查询）

Question

I am not sure if I am thinking about this the right way. I have a Div which has text. I want to be able to edit this text with Quill then save it back to the Div with the formatting. This is all good but then if I try to edit it again it pulls in all the HTML formatting tags.

I think I am getting the content the wrong way or something. I have been messing with the delta but not understanding how that could be used to "edit" the text if there is an update/mistake.

Here is the code. You can see the codepen here. https://codepen.io/anon/pen/OwbRbQ

//Create container
var container = $('.editor').get(0);

//Setup Quill
var quill = new Quill(container, {
    modules: {
    clipboard: {
      matchVisual: false
    },
        toolbar: '#toolbar-container'
    },
    placeholder: 'Compose an epic...',
    theme: 'snow'
});

//Edit functions
$("#editPage").click(function () {
    var $this = $(this);
    var introText = document.getElementById('introText');

    var existingContent = $('#introText').html();

    if ($this.attr('editing') != '1') {
        $this.html('<i class="fas fa-search"></i> Preview').attr('editing', 1);

        //Set content on edit/save
        quill.setContents([
            {
                insert: existingContent
            }
        ]);

    } else {
        $this.html("<i class='fas fa-pencil-alt'></i> Modify this page").removeAttr('editing');
        delta = quill.getContents();

        var html = quill.root.innerHTML;
        introText.innerHTML = html;
    }

});

Thanks for any help.

Answer 1

I tried an hour to fix your code and I found the conclusion that the problem is in your Quill library which either you or me could not fix it. Therefore, the only party who can fix the library code is the library developer themselves. If you notice in var html = quill.root.innerHTML; the content already changed at there.

The only way to fix it for me is doing the trick that substracts the content from the quill editor which operated by its library. The code will be something like this:

var container = $('.editor').get(0);

var quill = new Quill(container, {
    modules: {
    clipboard: {
      matchVisual: false
    },
        toolbar: '#toolbar-container'
    },
    placeholder: 'Compose an epic...',
    theme: 'snow'
});
$("#editPage").click(function () {
    var $this = $(this);
    var introText = document.getElementById('introText');

    var existingContent = $('#introText').html();

    if ($this.attr('editing') != '1') {
        $this.html('<i class="fas fa-search"></i> Preview').attr('editing', 1);


        quill.setContents([
            {
                insert: existingContent
            }
        ]);



    } else {
        $this.html("<i class='fas fa-pencil-alt'></i> Modify this page").removeAttr('editing');
        delta = quill.getContents();

        var html = quill.root.innerHTML;
         html = substr(html);
        introText.innerHTML = html;

    }

});
function substr(content) {
  var str = "";
  if ((content[0] == "<") && (content[1] == "p") && (content[2] == ">")) {
    for (i=3;i<=content.length-5;i++) str += content[i];
  }
  else {
    str = content;
  }
  return str;
}

You cannot find an absolute solution without other tricks unless you have the source code of Quill library and do trial and error for changing this line var html = quill.root.innerHTML;