1

<p></p>タグを表示し、スペース文字を含まないようにするために、ゼロ幅のスペース文字を使用しているコンテンツ編集可能な 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>

これはうまく機能しますが、ZWSPキャラクターの反対側のコンテンツを削除しようとすると、ユーザーはバックスペースを 2 回押すか、削除を 2 回押す必要があります。

を削除しようとしていることを検出してZWSP、削除を実行する前に削除するか、削除コマンドを 2 回実行できるようにしたいと考えています。これどうやってするの？また、これは 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;です。parentNode含まれている場合は、それがpタグであり、そのタグに が 1 つしか含まれていないかどうかをさらに確認し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

これは機能しているようです。

$(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 に答える
0

代わりに、提供するマークアップを変更することを検討します。特に、ユーザーが空白行を追加したときに、幅がゼロのスペースを含む段落になってしまうことはありません。

簡単な実験では、Firefox は <br/> を使用し、Chrome は <div><br/></div> を使用することを示しています。段落タグの代わりに <br/> を使用するのがおそらく最善だと思います。ただし、私が確信しているよりも多くの実験を行う必要があります。

于 2013-04-08T18:21:34.690 に答える