当 contenteditable="false" 时删除拼写错误单词的突出显示答案

【问题标题】：Removing highlighting of misspelled words when contenteditable="false"当 contenteditable="false" 时删除拼写错误单词的突出显示
【发布时间】：2016-12-29 17:54:06
【问题描述】：

var editBtn = document.querySelector("button#edit"),
  editable = editBtn.previousElementSibling,
  saveBtn = editBtn.nextElementSibling;

editBtn.addEventListener('click', startEdit, false);
saveBtn.addEventListener('click', endEdit, false);

function startEdit() {
  editable.setAttribute("contenteditable", true);
  editable.focus();
}

function endEdit() {
  editable.setAttribute("contenteditable", false);
  // even tried
  // editable.removeAttribute("contenteditable");
}

body {
  background-color: #ccc;
}
p[contenteditable="true"] {
  font-family: "Arial", "Georgia", "Calibri";
  background-color: #fff;
  font-size: 14px;
  padding: 4px;
  color: #424245;
  border: 1px solid #C7C6CD;
}

<p>click edit, type some mispelled words, click save and highlighting remains</p>
<button id="edit">edit</button>
<button>save</button>

我有一个在 <p></p> 元素上设置 contenteditable="true" 的功能应用程序当单击编辑按钮时，按下 ENTER 键时将其设置为 false。

现在按下 ENTER 键并在元素上设置 contenteditable="false" 后，即使现在该元素不再可编辑，突出显示的所有拼写错误的单词仍然突出显示。

在这种情况下，有没有办法消除拼写错误单词的突出显示。

我在编辑器中运行代码 sn-p 时遇到问题，所以如果有任何问题，请告诉我。

【问题讨论】：

stackoverflow.com/questions/6562727/…

标签： javascript html contenteditable

【解决方案1】：

最简单的方法可能是自己覆盖内容：

var html = editable.innerHTML;
editable.innerHTML = "";
editable.innerHTML = html;

不幸的是，必须先清空内容。
只是 editable.innerHTML = editable.innerHTML; 似乎不起作用。

var editBtn = document.querySelector("button#edit"),
    editable = editBtn.previousElementSibling,
    saveBtn = editBtn.nextElementSibling;

editBtn.addEventListener('click', startEdit, false);
saveBtn.addEventListener('click', endEdit, false);

function startEdit() {
  editable.setAttribute("contenteditable", true);
  editable.focus();
}

function endEdit() {
  editable.setAttribute("contenteditable", false);
  var html = editable.innerHTML;
  editable.innerHTML = "";
  editable.innerHTML = html;
}

body {
  background-color: #ccc;
}
p[contenteditable="true"] {
  font-family: "Arial", "Georgia", "Calibri";
  background-color: #fff;
  font-size: 14px;
  padding: 4px;
  color: #424245;
  border: 1px solid #C7C6CD;
}

<p>click edit, type some mispelled words, click save and highlighting remains</p>
<button id="edit">edit</button>
<button>save</button>

【讨论】：