Removing highlighted words with errors in content ability = "false"

Question

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>

Run codeHide result

I have a function application that sets contenteditable="true"in an element <p></p> when the edit button is pressed, then set it to falsewhen the ENTER key is pressed.

Now, when the ENTER key is pressed and installed on an element contenteditable="false", all selected words with a spelling error remain highlighted, even if now the element is no longer being edited.

Is there a way to remove the selection of misspelled words in this case.

I had a problem running the code snippet in the editor, so if there is any problem, let me know.

Answer 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>

Hide result