防止 Wordpress TinyMCE 在退格键上删除 div

Question

我正在编写一个小插件，可以在 tinymce 中添加网格行和列。它或多或少地工作正常，但 TinyMCE 坚持删除空的 div 。我希望我的列和行只能通过按钮控件删除。

我在 SO 上发现了另一个问题，这个问题和一个似乎正确的答案，但不太有效。

editor.on("keydown",function(e) {
  if (e.keyCode == 8 || e.keyCode == 46) {

    try {
      var elem = editor.selection.getNode();

      if (elem.classList.contains("columns") || elem.classList.contains("column") || elem.classList.contains("row")) {
        console.log(elem.textContent.length);
        if (elem.textContent.length == 0) {
          console.log('no content');
          e.preventDefault();
          return false;
        }
      }
    } catch (e) {}
  }
});

没用。如果我将 elem.textContent.length 更改为 == 1。它确实会阻止删除最后一个字符，但如果我将其保留为 0，它会删除 column/row，甚至不会到达 console.log .

答案似乎非常非常接近，但又遥不可及。

如有任何补救方法，我们将不胜感激。

Answer 1

经过多次调整，我设法通过调整上面的代码让它工作。

if (elem.textContent.length <= 1) {
    e.preventDefault();
    jQuery(elem).html('');
}

我认为问题在于将 textContent.length 设置为 0 为时已晚，因此我需要找到一种方法在只有 1 个字符时将 delete/backspace 设为目标。所以我基本上是通过添加空内容来防止通常的删除和模拟删除。

防止 Wordpress TinyMCE 在退格键上删除 div

Prevent Wordpress TinyMCE from deleting div on backspace

javascript

grid

tinymce