1

ユーザーが含まれるテキストを選択し<div></div>て、太字のテキストに変更できるようにしています。つまり から<div>this is some text</div>まで<div>this is <b>some</b> text</div>。div.innerHTML を に変更すると、HTML としてレンダリングされて太字で表示されるのではなくthis is <b>some</b> text、タグがユーザーに表示されることを除いて、すべてが機能しています。これはすべて Javascript を使用してクライアント側で行われます。<b>some</b>

タグをユーザーに公開するのではなく、ブラウザに強制的にレンダリングさせるにはどうすればよいですか?

リクエストごとに、ここにコードがあります...

HTML...

<div id="blob">
One simple, but not very efficient implementation of a dictionary is a linked 
list. In this implementation all operations take linear time in the worst case 
(and even in the average case), assuming that insertions first check whether the 
item is in the current list. A more scalable implementation of a dictionary is a 
balanced search tree. In this lecture note we present two even more efficient data 
structures based on hashing.
</div>

ジャバスクリプト...

tagText(document.getElementById("blob"),"<b>","</b>");

と...

//======================================================================
function tagText(el,tagstart,tagend)
    {
    var range = window.getSelection().getRangeAt(0);
    var rtxt = range.startContainer.textContent;
    var rlen = rtxt.length;
    var start = range.startOffset;
    var stop = range.endOffset;
    var result = rtxt.substring(0,start) + tagstart + rtxt.substring(start,stop) + tagend + rtxt.substring(stop,rlen);
//  el.innerHTML = result;
    range.startContainer.textContent = result;
    var txt = el.innerHTML;
    el.innerHTML = txt;
    }
//======================================================================

firebug を介して div:innerHTML を見ると、タグが&lt;b&gt;ではなくエスケープされていることがわかります<b>。

4

3 に答える 3

3

それはあなたの問題を引き起こしているものではありませんが..これは間違っていませんか？

var txt = el.innerHTML;
el.innerHTML = txt;

編集：

これを試して：

<div id="blob">
One simple, but not very efficient implementation of a dictionary is a linked 
list. In this implementation all operations take linear time in the worst case 
(and even in the average case), assuming that insertions first check whether the 
item is in the current list. A more scalable implementation of a dictionary is a 
balanced search tree. In this lecture note we present two even more efficient data 
structures based on hashing.
</div>

<input type="button" value="sample" onclick='tagText();'>

and...

<script>
  function tagText() {
    var range = window.getSelection().getRangeAt(0);
    range.surroundContents(document.createElement("b"));
  }
</script>
于 2009-11-25T16:46:27.947 に答える
2

問題は次の行だと思います：

range.startContainer.textContent = result;

実際には div 要素の innerHTML を設定しているのではなく、タグを HTML として解釈しない範囲のコンテナーのテキストを設定しています。代わりに、div の内部 HTML を結果から直接設定して、範囲をクリアしてみてください。

明確にするために、このコードは実際に選択したコンテンツを太字に変換します。 

var rtxt = range.startContainer.textContent;
var rlen = rtxt.length;
var start = range.startOffset;
var stop = range.endOffset;
var result = rtxt.substring(0,start) + tagstart + rtxt.substring(start,stop) + tagend + rtxt.substring(stop,rlen);
el.innerHTML = result;

選択を維持したい場合は、プログラムで範囲をリセットする必要があります。

于 2009-11-25T16:52:37.260 に答える
-1

jQueryでは、それはになります$('#blob').wrap('<b></b>');。その場合、ヘルパー関数を作成する必要はありません。真剣に、ライブラリを使用してください。低レベルのものを理解するためにあなたの時間を無駄にしないでください。

于 2009-11-25T16:49:23.010 に答える