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

我有一个内容可编辑的div，其中我使用零宽度空格字符，以便使我的

标记可见，并且不包含空格字符

像这样

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

---

我会考虑改变你提供的标记，特别是当你的用户添加空行时，它们不会以一个包含零宽度空间的段落结尾。

---

一个快速的实验显示Firefox使用
，Chrome使用
。我认为您最好使用
而不是段落标记。但是，你需要做更多的实验，而不是我必须确定的。

< P>我会考虑改变你提供的标记，特别是当你的用户添加空行时，它们不会以一个包含零宽度空间的段落结尾。

---

一个快速的实验显示Firefox使用
，Chrome使用
。我认为您最好使用
而不是段落标记。然而，你需要做更多的实验，而不是我必须确定的。

这远不是完美的，但它可能会给你一个好的开始。看看这里

我们的想法是确定我们要删除的字符是否位于只包含

​的
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.
    }
  }
}

$（document）.on（'keydown'，“#myeditor”，函数（e）{
var keyPressed=e.keyCode | e.which，
emptyCharsOnly=true，
节点，
范围
我
伦恩，
文本，
P
如果（按键==8 | |按键==46）{
//TODO:确定要删除的字符，如果是ZWSP，则将其删除
范围=document.getSelection（）.getRangeAt（0）；
节点=range.startContainer；
p=node.parentNode；
text=node.wholeText；
如果（！text）{
返回；
}
len=text.length；
对于（i=0；i

}))
 这远非完美，但可能会给你一个好的开始。看看这里

我们的想法是确定我们要删除的字符是否位于只包含
​的
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.
    }
  }
}

$（document）.on（'keydown'，“#myeditor”，函数（e）{
var keyPressed=e.keyCode | e.which，
emptyCharsOnly=true，
节点，
范围
我
伦恩，
文本，
P
如果（按键==8 | |按键==46）{
//TODO:确定要删除的字符，如果是ZWSP，则将其删除
范围=document.getSelection（）.getRangeAt（0）；
节点=range.startContainer；
p=node.parentNode；
text=node.wholeText；
如果（！text）{
返回；
}
len=text.length；
对于（i=0；i

}))
 这似乎奏效了

$(document).on('keydown', "#myeditor", function (e) {
    var keyPressed = e.keyCode | e.which;
    if(keyPressed == 8){
       //TODO: determine character to be deleted and remove it if it is ZWSP
       var range = document.selection.createRange();
        range.moveStart('character', -1);
        if(range.text === String.fromCharCode(8203))
        {
            range.text = "";
        }
    }
});

这似乎奏效了

$(document).on('keydown', "#myeditor", function (e) {
    var keyPressed = e.keyCode | e.which;
    if(keyPressed == 8){
       //TODO: determine character to be deleted and remove it if it is ZWSP
       var range = document.selection.createRange();
        range.moveStart('character', -1);
        if(range.text === String.fromCharCode(8203))
        {
            range.text = "";
        }
    }
});

不幸的是，我不能使用
标记，因为它们不能很好地插入列表。请尝试Chrome样式，一个包含br的div。我认为您最好使用与某个浏览器用于空行的样式相匹配的样式。由于生成的标记取决于浏览器的实现，因此制定跨浏览器解决方案并不容易。你有没有考虑过使用TinyMCE这样的知名编辑器？@plalx TinyMCE对于我来说太慢了（实际上我使用的是经过大量修改的NicEdit版本）。我只关心用于浏览器的internet explorer。所以，如果您清除可编辑的内容并按enter键，IE会在其中添加什么？将其用于您的空行。不幸的是，我不能使用
标记，因为它们不能很好地插入列表。请尝试Chrome样式，一个包含br的div。我认为您最好使用与某个浏览器用于空行的样式相匹配的样式。由于生成的标记取决于浏览器的实现，因此制定跨浏览器解决方案并不容易。你有没有考虑过使用TinyMCE这样的知名编辑器？@plalx TinyMCE对于我来说太慢了（实际上我使用的是经过大量修改的NicEdit版本）。我只关心用于浏览器的internet explorer。所以，如果您清除可编辑的内容并按enter键，IE会在其中添加什么？用它作为你的空行。