5

http://jsfiddle.net/Y7tgx/2/

Firefox はこれを Chrome よりもうまく処理しますが、私が望んでいる方法とはまったく異なります。どちらも、隣接するすべての HTML タグをまとめて 1 つとして扱います (これは望ましくありません)。

Firefox: カーソルがタグ (または隣接するタグのグループ) の左側にあり、右を押すと、カーソルはタグの前の最初の文字を超えてジャンプします。次に、左を押すと、文字とタグの間を移動します。(左右を押しても同じです。)

Chrome: タグとそれに続く最初の文字がまとめられます。タグと次の文字の間にカーソルを置くことはできません。

望ましい: タグは、カーソルに対して単一の文字として扱われます。カーソルがタグの左側にあるときに右を押すと、タグの右側に移動し、左を押すとその逆になります。

ブラウザで望ましい動作を強制するにはどうすればよいですか?

これは WYSIWIG エディター向けではありません。特定の目的を果たすために、タグは、jsfiddle と同じように、本番環境でも視覚的に表現されます。ユーザーは、カーソルを含む要素を任意に制御したいと考えています。

b:before, b:after,
i:before, i:after,
p:before, p:after {
    color: blue;
}

b:before {
    content: '<b>';
}

b:after {
    content: '</b>';
}

p:before {
    content: '<p>';
}

p:after {
    content: '</p>';
}

i:before {
    content: '<i>';
}

i:after {
    content: '</i>';
}​

----------

<p contenteditable='true'>regular regular<b>bold</b>regular - 
try moving the cursor to either side of either blue tag.</p>
<p contenteditable='true'>try it in this: regular<b><i>bolditalic</i></b></p>
4

1 に答える 1

1

文字がスキップされないようにコードを変更することは合理的な修正ですが、隣接するタグ間を移動したり、タグを編集したりできるようにすることは、ブラウザーがマークアップを処理する方法 (目に見えないタグをテキスト コンテンツとして処理すること) に反します。これを行うには、タグの視覚的表現をテキスト コンテンツとして行う必要があります。魔法のような解決策は、ある時点でそれに頼らなければならない可能性が高くなります (そのため、完全に行う方が明確になります)。かなり単純なアプローチは、次のようなものを使用してから、そのスパンを単一のユニットとして移動するカーソルを制御するために <span class="tag">&lt;b&gt;</span>アタッチする JavaScript を追加することです。*[contenteditable='true'] span.tag

サーバー側のコードを使用して変換を行うのが最適ですが、それ以外の場合は JavaScript で基本的なイントロスペクションを使用すると、必要なコードの置換または補足が可能になります (置換により編集がはるかに簡単になりますが、追加のスパンを追加するだけで侵襲性が低くなります)要素構造が固定されていて、テキスト コンテンツのみが編集されている場合。

于 2012-10-06T13:40:59.613 に答える