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

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

让我们来看一个例子：

我在DIV元素中有一些lorem ipsum文本，如下所示：

乱数假文 多洛·塞特·艾米特，奉献给我们的精英们。 伊库利斯康瓦利斯酒店 乱数假文 矢状大肌。洛勒姆 ipsum dolor sit amet。 所需功能：

我希望允许用户在运行时决定哪些文本标记为红色。这种影响有两个方面：

能够拆除跨度元件，从而更换 乱数假文 借

能够通过执行相反的操作来添加跨度元素 一旦用户选择了要标记的文本，我就使用

RootPanel.gettext.getElement。 设置InnerHtmlHtml内容和一些新的span标记； 为了用新的选择更新HTML代码，我对一些GWT进行了分类，以跟踪标记的文本

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

---

是否有任何方法可以使用GWT与DOM或SmartGWT密切合作，以不太激烈的方式实现这一点？

要访问页面的DOM，可以调用Document.get，它有一个方便的方法通过元素的id Document.get.getElementByIdtest查找元素

当然，您应该保留对该元素的引用，这样就不必在每次访问DOM时都搜索它，因为这太残忍了

private Element testDiv = Document.get().getElementById("test"); ... testDiv.setInnerHTML("Some html"); ... testDiv.setInnerHTML("Some other html"); 但是，一旦有了对该元素的引用，调用setInnerHTML是实现所需功能的最有效方法。我不知道你为什么认为这很残忍。这可能比在小部件上调用方法来更改其内容（如setText）更有效。。。例如，在文本框上，因为这些方法通常会检查作为安全参数传递的值

安全性也可能是您关心的问题，这取决于用户可以做什么。但通常情况下，如果用户可以修改页面中的HTML，这是一个问题。您可能想看看GWT的特性

---

如果您正在寻找RichText组件，您可以查看例如。但是这种类型的组件通常不受所有浏览器的支持，并且会占用比您现在所做的更多的资源，因此我不推荐使用这种组件。

要访问页面的DOM，您可以调用Document.get，它有一种方便的方法，可以通过id Document.get.getElementByIdtest查找元素

当然，您应该保留对该元素的引用，这样就不必在每次访问DOM时都搜索它，因为这太残忍了

private Element testDiv = Document.get().getElementById("test"); ... testDiv.setInnerHTML("Some html"); ... testDiv.setInnerHTML("Some other html"); 但是，一旦有了对该元素的引用，调用setInnerHTML是实现所需功能的最有效方法。我不知道你为什么认为这很残忍。这可能比在小部件上调用方法来更改其内容（如setText）更有效。。。例如，在文本框上，因为这些方法通常会检查作为安全参数传递的值

安全性也可能是您关心的问题，这取决于用户可以做什么。但通常情况下，如果用户可以修改页面中的HTML，这是一个问题。您可能想看看GWT的特性

---

如果您正在寻找RichText组件，您可以查看例如。但是，这种类型的组件通常不受所有浏览器的支持，并且会占用比您现在所做的更多的资源，因此我不推荐使用这种组件。

这对我来说似乎很残酷，因为要更改1%的html代码，您必须更改所有代码。它使浏览器执行不必要的渲染计算。是的，但您只能编辑所需的零件。因此，您只需编辑所需的1%。RootPanel.getthe_div_you_wantI可能是错的，但是你不能用一个？我认为可以用div来包围一切。我说的是，试着给你想要的部分一个id。你可以用一个div来实现这一点，或者以任何其他方式来实现。这对我来说似乎很残酷，因为要改变1%的html代码，你必须改变所有的html代码。它使浏览器执行不必要的渲染计算。是的，但您只能编辑所需的零件。因此，您只需编辑所需的1%。RootPanel.getthe_div_you_wantI可能是错的，但是你不能用一个？我认为可以用div来包围一切。我说的是，试着给你想要的部分一个id。你可以用一个div来实现这一点，或者以任何其他方式来实现GWT的RichTextArea就是我试图实现的功能的一个很好的例子。我的DIV就像应用程序的CanEdit区域。我已经在我的问题的评论中解释了为什么我认为这是残酷的每次你在网页上看到一些变化，页面的DOM都会被修改。没有办法解决这个问题，但现代浏览器在渲染方面非常出色。更改一个div的innerHTML应该不会引起任何问题，即使您这样做了

---

你得到了很多。像RichTextArea这样的小部件最终也会在div上调用setInnerHTML，但在此之前它们做了很多工作，因此如果您只想在某个文本周围设置跨距，那么您的解决方案将更加有效。我问自己的一个大问题是：什么是最好的方法？1.保持GWT类跟踪范围选择，并在每次发生更改时激发setInnerHTML。或者，2。在DOM级别进行所有的修改，只修改受影响的元素。要做到这一点，我必须用跨距将未标记的文本包围起来。这取决于您的问题。div中的文本可以更改吗？用户可以选择它的任何部分吗？用户可以选择任意多个部件，还是只选择一个或两个部件。根据这些约束，您可以将文本分隔为较小的div和span，并且只更改相关div和span的内容。在我看来，如果你的div只包含简单的HTML文本和跨距，并且不是太大，只需一直更改它的innertHTML。文本不能更改，用户可以选择任意多的部分，就像RichTextArea一样，他可以选择任何部分。我可以有300多个标记的文本在一个500字的文本。我会记住你所有的建议。GWT的RichTextArea就是我试图实现的功能的一个很好的例子。我的DIV就像应用程序的CanEdit区域。我已经在我的问题的评论中解释了为什么我认为这是残酷的每次你在网页上看到一些变化，页面的DOM都会被修改。没有办法解决这个问题，但现代浏览器在渲染方面非常出色。更改一个div的innerHTML应该不会引起任何问题，即使您经常这样做。像RichTextArea这样的小部件最终也会在div上调用setInnerHTML，但在此之前它们做了很多工作，因此如果您只想在某个文本周围设置跨距，那么您的解决方案将更加有效。我问自己的一个大问题是：什么是最好的方法？1.保持GWT类跟踪范围选择，并在每次发生更改时激发setInnerHTML。或者，2。在DOM级别进行所有的修改，只修改受影响的元素。要做到这一点，我必须用跨距将未标记的文本包围起来。这取决于您的问题。div中的文本可以更改吗？用户可以选择它的任何部分吗？用户可以选择任意多个部件，还是只选择一个或两个部件。根据这些约束，您可以将文本分隔为较小的div和span，并且只更改相关div和span的内容。在我看来，如果你的div只包含简单的HTML文本和跨距，并且不是太大，只需一直更改它的innertHTML。文本不能更改，用户可以选择任意多的部分，就像RichTextArea一样，他可以选择任何部分。我可以有300多个标记的文本在一个500字的文本。我会记住你所有的建议。