如何实现不带html标签的富文本编辑HTML/修改(Quill)?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (783)

我想要能够编辑这个文本与Quill,然后保存回Div格式。这是很好的,但如果我再次尝试编辑它,它会拉出所有的HTML格式标签。

我想我把内容搞错了。我一直在处理增量,但不理解如果出现更新/错误,如何使用它来“编辑”文本。

这是代码:

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

});
提问于
用户回答回答于

我尝试了一个小时来修复你的代码,我发现问题是在你的Quill库中, 因此,唯一能够修复库代码的是库开发人员自己。

如果你注意到var html = quill.root.innerHTML;那里的内容已经变了。

为我修复它的唯一方法是做一个技巧,从由它的库操作的Quill编辑器中减去内容。代码将如下所示:

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

扫码关注云+社区

领取腾讯云代金券