我正在寻找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 style="background-color:red">ipsum </span>
通过
ipsum
一旦用户选择了他想要“标记”的文本,我就会使用类似
的内容RootPanel.get("text").getElement().
setInnerHTML("html content with some new spans tags");
使用新的选择更新HTML代码(为了实现我有一些跟踪标记文本的GWT类别)。
对我来说,这似乎是一个 little brutal ,因为我经常更新内部HTML代码。
有没有办法使用GWT(与DOM密切合作)或SmartGWT,以较少的暴力方式实现这一目标?
答案 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。但是这种类型的组件通常不受所有浏览器的良好支持,并且会占用比你已经做的更多的资源,所以我不推荐它。