javascript - 如何检测要删除的字符何时为零宽度空格并执行删除或退格命令两次？

Question

我有一个内容可编辑的 div，其中我使用零宽度空格字符来制作我的 <p></p>标签可见且不包含空格字符。

像这样

<div id="myeditor" contenteditable="true">
    <p><b>My Heading 1</b></p>
    <p>&#8203;</p>
    <p>&#8203;</p>
    <p>&#8203;</p>
    <p><b>My Heading 2</b></p>
    <p>&#8203;</p>
    <p>&#8203;</p>
    <p>&#8203;</p>
    <p><b>My Heading 3</b></p>
    <p>&#8203;</p>
    <p>&#8203;</p>
    <p>&#8203;</p>
</div>

这很有效，只是用户在尝试删除 ZWSP 另一侧的内容时必须按两次退格键或两次删除键。性格。

我希望能够检测到我即将删除 ZWSP并在删除执行之前将其删除或执行删除命令两次。我怎样才能做到这一点？我还需要这个才能在 Internet Explorer 中工作...

到目前为止我已经

$(document).on('keydown', "#myeditor", function (e) {
    var keyPressed = e.keyCode | e.which;
    if(keyPressed == 8 || keyPressed == 46){
        //TODO: determine character to be deleted and remove it if it is ZWSP
    }
});

Answer 1

它远非完美，但它可能会给你一个良好的开端。看看这里 http://jsbin.com/eweqon/3/edit

这个想法是确定我们要删除的字符是否位于仅包含​字符的textNode内。如果是，我们进一步检查它的 parentNode 是否是 p 标记，并且该标记仅包含单个 textNode。如果满足所有条件，我们可以安全地从其父级中删除 p 标记。它似乎工作得很好，但是，我不确定如何处理 p 标记包含其他子元素的情况。

$(document).on('keydown', "#myeditor", function (e) {
var keyPressed = e.keyCode | e.which,
    emptyCharsOnly = true,
    node,
    range,
    i,
    len,
    text,
    p;
if(keyPressed == 8 || keyPressed == 46){
    //TODO: determine character to be deleted and remove it if it is ZWSP
  range = document.getSelection().getRangeAt(0);
  node = range.startContainer;
  p = node.parentNode;
  text = node.wholeText;

  if (!text) {
    return;
  }

  len = text.length;

  for (i = 0; i < len; i++) {
    if (text.charCodeAt(i) !== 8203) {
      emptyCharsOnly = false;
      break;
    }
  }

  if (
    node.nodeType === 3 &&
    emptyCharsOnly &&
    p && p.tagName === 'P'
  ) {

    //make sure the p tag only contains this text node
    if (p.childNodes.length === 1) {
      p.parentNode.removeChild(p);
    } else {
      //not sure what to do here exactly
      //i tried removing the previousSibling but it
      //did not give expected results.
    }
  }
}

});