1

我有一个内容可编辑的 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
    }
});
4

3 回答 3

1

它远非完美，但它可能会给你一个启动。看看这里http://jsbin.com/eweqon/3/edit

这个想法是确定我们要删除的字符是否在textNode仅包含&#8203;字符的 a 中。如果是，我们进一步检查它是否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.
    }
  }
}

});

于 2013-04-08T19:39:48.067 回答
0

我会考虑更改您提供的标记，特别是当您的用户添加空行时，他们不会以包含零宽度空间的段落结束。

一个快速实验显示 Firefox 使用 <br/>，而 Chrome 使用 <div><br/></div>。我认为您最好使用 <br/> 而不是段落标签。但是，您需要做的实验比我必须确定的要多。

于 2013-04-08T18:21:34.690 回答
0

这似乎奏效了。

$(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 = "";
        }
    }
});
于 2013-04-09T18:37:21.860 回答