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

Question

我正在寻找 GWT 的可能性, SmartGWT , 根据动态更改元素的内部 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

能够添加跨度元素(通过相反的方式)

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

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

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

这对我来说似乎有点残酷，因为我经常更新内部 HTML 代码。

有没有办法使用 GWT(与 DOM 密切合作)或 SmartGWT，以一种不那么暴力的方式实现这一目标？

Answer 1

要访问页面的 DOM，您可以调用 Document.get() ，它有一个方便的方法来通过它的 id Document.get().getElementById("test"); 查找一个元素

当然，你应该保留对这个元素的引用，这样就不必每次想要访问它时都必须在 DOM 中搜索，因为这很残酷。

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

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

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

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

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