Rich Text Edit HTML / Modify without html tags (Quill)
Rich Text Edit HTML / Modify without html tags (Quill)
提问于 2018-07-20 01:25:31
我不确定我是否以正确的方式思考这个问题。我有一个包含文本的Div。我希望能够使用Quill编辑此文本，然后使用格式将其保存回Div。这一切都很好，但是如果我再次尝试编辑它，它会拉入所有的HTML格式化标签。
我想我是以错误的方式获取内容了。我一直在处理增量，但不明白如果有更新/错误，如何使用它来“编辑”文本。
下面是代码。你可以在这里看到codepen。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;
}
});谢谢你的帮助。
回答 1
Stack Overflow用户
发布于 2018-07-20 09:43:02
我尝试了一个小时来修复您的代码，我发现问题出在您的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;，否则您无法找到没有其他技巧的绝对解决方案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51428639
复制相关文章
相似问题