2

要素の内側の HTML テキストを動的に変更するという点で、、、が提供GWTする可能性を探しています。SmartGWT

例を見てみましょう：

DIV次のように、要素にいくつかの lorem ipsum テキストがあります。

<div id="text">
    Lorem <span style="background-color:red">ipsum </span>
    dolor sit amet, consectetur adipiscing elit. 
    Duis convallis iaculis 
    <span style="background-color:red">ipsum </span>
    magna sagittis vel. Lorem
    <span style="background-color:red">ipsum </span> dolor sit amet.
</div>

必要な機能:

ユーザーが実行時にどのテキストを「マーク」(赤色) するかを決定できるようにしたい。この影響は 2 つあります。

  • スパン要素を削除できるため、置き換えることができます
<span style="background-color:red">ipsum </span>

に

ipsum
  • span 要素を追加できるようにする (逆の方法で)

ユーザーが「マーク」したいテキストを選択したら、次のようなものを使用します

RootPanel.get("text").getElement().
setInnerHTML("html content with some new spans tags");

HTMLコードを新しい選択で更新します（マークされたテキストを追跡するGWTクラスをいくつか持っていることを達成するため）。

私は内部の HTML コードを頻繁に更新する状況にあるので、これは私にとって少し残忍なようです。

GWT (DOM と密接に連携) または SmartGWT を使用して、より暴力的でない方法でそれを達成する方法はありますか?

4

1 に答える 1

4

ページの DOM にアクセスするには、 を呼び出すことができますDocument.get()。これには、ID で要素を見つけるための便利なメソッドがあります。Document.get().getElementById("test");

もちろん、アクセスするたびに DOM を検索する必要がないように、この要素への参照を保持しておく必要があります。これは残忍なことだからです。

private Element testDiv = Document.get().getElementById("test");
...

testDiv.setInnerHTML("いくつかの html");
...
testDiv.setInnerHTML("その他の HTML");

ただし、この要素への参照を取得したら、setInnerHTML を呼び出すのが最も効率的な方法です。これが残忍だと思う理由がわかりません。これらのメソッドは通常、セキュリティのためにパラメーターとして渡された値をチェックするため、setText(" ...")これは、ウィジェットのコンテンツを変更するためにメソッドを呼び出す場合よりもおそらくさらに効率的です。TextBox

ユーザーができることによっては、セキュリティも懸念事項になる可能性があります。しかし、通常、ユーザーがページ内の HTML を変更できる場合、これは問題になります。GWT のSafeHTML機能を参照してください。

RichText コンポーネントを探している場合は、たとえばGWT の RichTextAreaを見ることができます。しかし、このタイプのコンポーネントは通常、すべてのブラウザーで十分にサポートされているわけではなく、既に行っているよりも多くのリソースを必要とするため、お勧めしません。

于 2012-06-19T14:52:16.737 に答える