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 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;做些试错，否则您将找不到其他技巧的绝对解决方案

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

1 个答案: