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>

所需功能：

我希望允许用户在运行时决定“标记”哪些文本（红色）。这种影响体现在两件事上：

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

经过

ipsum
  • 能够添加跨度元素（通过相反的方式）

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

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 中搜索，因为这很残酷。

私有元素 testDiv = Document.get().getElementById("test");
...

testDiv.setInnerHTML("一些 html");
...
testDiv.setInnerHTML("其他一些 html");

但是一旦你引用了这个元素，调用 setInnerHTML 是做你想做的最有效的方法。我不知道你为什么认为这是残酷的。这可能比在小部件上调用方法来更改其内容（例如setText(" ...")在 a上）更有效TextBox，因为这些方法通常检查作为参数传递的值以确保安全。

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

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

于 2012-06-19T14:52:16.737 回答