在GWT中动态替换DIV的内部文本

时间:2012-06-19 11:53:09

标签: gwt smartgwt

我正在寻找GWTSmartGWT在动态更改元素的内部HTML文本方面提供的可能性。

放开一个例子:

我在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>

所需功能

我希望允许用户在运行时决定哪些文本被“标记”(红色)。这对两件事产生了影响:

  • 能够删除一个span元素,从而替换
<span style="background-color:red">ipsum </span>

通过

ipsum
  • 能够添加一个span元素(通过相反的方式)

一旦用户选择了他想要“标记”的文本,我就会使用类似

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

使用新的选择更新HTML代码(为了实现我有一些跟踪标记文本的GWT类别)。

对我来说,这似乎是一个 little brutal ,因为我经常更新内部HTML代码。

有没有办法使用GWT(与DOM密切合作)或SmartGWT,以较少的暴力方式实现这一目标?

1 个答案:

答案 0 :(得分:3)

要访问您网页的DOM,您可以调用Document.get(),它有一种方便的方法,可以通过它的ID Document.get().getElementById("test");找到元素

当然,您应该保留对此元素的引用,以便每次要访问它时都不必搜索DOM,因为这是残酷的。

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

testDiv.setInnerHTML("Some html");
...
testDiv.setInnerHTML("Some other html");

但是一旦你引用了这个元素,调用setInnerHTML就是你想要的最有效的方法。我不确定你为什么认为这是残酷的。这可能比调用窗口小部件上的方法更改内容更有效,例如setText(" ...")上的TextBox,因为这些方法通常会检查作为安全性参数传递的值。 / p>

安全性也可能是您的关注点,具体取决于用户可以执行的操作。但通常情况下,如果用户可以修改页面中的HTML,这是一个值得关注的问题。您可能想要查看GWT的SafeHTML功能。

如果您正在寻找RichText组件,您可以查看GWT's RichTextArea。但是这种类型的组件通常不受所有浏览器的良好支持,并且会占用比你已经做的更多的资源,所以我不推荐它。