Question

我有一个工作内容编辑器，它使用一个contenteditable div作为基本的WYSIWYG编辑器。

如果他们愿意，我需要允许用户编辑contenteditable div的源HTML。我有一个主要工作的解决方案来实现这一点，如下所示：

// function to show bootstrap modal and insert contenteditable html into modal's textarea
function editHTML(){
  editorTextarea.attr('contenteditable', false);
  var htmlContent = document.getElementById("main-editor").innerHTML;
  editorModal.modal({backdrop: false});
  editorTextarea.html(document.createTextNode(htmlContent));
}

// function to replace contenteditable's HTML with edited HTML in textarea
function saveNewHTML(){
  mainEditor.empty();
  mainEditor.html($.parseHTML(editorTextarea.val()));
  editorModal.modal('hide');
  editorTextarea.attr('contenteditable', true);
  editorTextarea.empty();
}

上述功能在第一次使用时起作用。即我可以成功地将内容写入contenteditable div，然后在textarea中编辑其HTML;新的HTML成功写回到可信的div。

但是，如果我继续在contenteditable div中进行编辑，然后再次触发editHTML();，则会在第一个editHTML();事件中使用相同的HTML填充textarea。

我已尝试将htmlContent设置为全局变量，并在htmlContent = null;内使用saveNewHtml();将其“无效”，但这无济于事......但仍然使用浏览器的检查工具，调用$('#main-editor').html();会返回正确的值。

这是非常简单的事情，所以我有点不知道为什么这不起作用......！

P.S。我正在使用Safari（最新版）而且我不需要支持旧版浏览器（如果需要，可以完全删除对IE的支持。真高兴！）。

手动编辑可信的源HTML

0 个答案: