富文本格式的HTML編輯/不帶html標簽的修改（查詢）

Question

我不確定我是否在考慮正確的方法。 我有一個有文字的Div。 我希望能夠使用Quill編輯此文本，然后使用格式將其保存回Div。 一切都很好，但是如果我再次嘗試對其進行編輯，它將提取所有HTML格式標記。

我認為我以錯誤的方式或某些方式獲取了內容。 我一直在弄亂增量，但不了解如果有更新/錯誤，如何將其用於“編輯”文本。

這是代碼。 您可以在此處查看代碼筆。 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;
    }

});

謝謝你的幫助。

Answer 1

我花了一個小時來修復您的代碼，但得出的結論是問題出在您的Quill庫中，您或我都無法修復它。 因此，唯一可以修復庫代碼的一方是庫開發人員。 如果您在var html = quill.root.innerHTML;注意到var html = quill.root.innerHTML; 內容已經在那里更改。

為我修復此錯誤的唯一方法是執行從庫的庫管理器中減去內容的技巧。 該代碼將是這樣的：

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;
}

除非您擁有Quill庫的源代碼並為更改此行進行反復試驗，否則您將無法找到其他技巧var html = quill.root.innerHTML;