Question

我将RichTextArea格式化程序设置为

void initUI(){//invoke in default constructor...
            getRichTextArea().getFormatter().setFontName("Verdana");
            getRichTextArea().getFormatter().setFontSize(FontSize.X_SMALL);
            getRichTextArea().getFormatter().setForeColor("gray");
}

接下来我想知道如何正确清除RichTextArea并保留其格式化器，因为我尝试了类似

的代码

getRichTextArea().setText(null);//invoke on some button click...

...它确实删除了所有内部文本，但是当我尝试重新输入文本时，整个格式设置被触发或者因为重新输入的文本具有默认字体和颜色等而不是格式化的文本：（

...顺便说一下像getRichTextArea().getFormatter().undo();这样的方法也会删除格式化设置:(

所以我的问题是......如何清除富文本区域并保持格式化？

谢谢

P.S。 GWT 2.3

Answer 1

你需要了解＆＃34;格式化＆＃34;是。富文本意味着它包含多个部分，每个部分都有自己的样式和属性。所以没有＆＃34;默认＆＃34;一。你必须定义一个。

实际上在富文本区域下，它只是一个具有contenteditable = true的div。如果你把它放入一个样式容器（另一个div），它将继承它的样式。这样你就可以定义一些默认样式。

另一种方法是确保你想要什么属性，并直接用Formatter指定它。

我没有看到有任何其他方法可以实现这一目标。 Formatter只是execCommand的包装器，行为依赖于浏览器。我们来做一些分析。

这是您的富文本区域

<div contenteditable=true>hello, world!</div>

如果您选择所有文字并调用Formatter.toggleBold()，您将获得：

<div contenteditable=true><b>hello, world!</b></div>

如果您setText('')确实div.innerText=''，那么您将获得

<div contenteditable=true></div>

您的格式丢失了。

您只能通过将样式放入容器并在容器上设置样式来维护样式，或者记住使用的格式并在setText（）之后重新应用它。

Answer 2

您似乎需要RichTextArea中的光标控制来定位光标，选择范围和删除文本。

gwt RichTextArea中没有此功能，但有一个issue有很长的讨论，一些补丁和library (gwt-selection)实现它。这个问题最近已经关闭，因为gwt维护者正在摆脱所有没有最近活动的问题，但也许你可以重新打开它或ping所有者来做到这一点。使用此库，您可以获取文档的一部分并删除它而不删除格式标记。

无论如何，如果你需要删除完整的文本并为所有内容设置一些默认的CSS，你可以做的是设置RichTextArea iframe的主体样式。

使用gwtquery将内容正文设置为样式很容易：

import static com.google.gwt.query.client.GQuery.*;

[...]

// First attach the widget to the DOM
RootPanel.get().add(richTextArea);

// We only can manipulate the body, once the iframe document has been created, 
// and this happens after it has been attached. 
// Because richtTextArea uses a timeout to initialize we need a delay.
$(richTextArea)
  .delay(1, 
    lazy()
      .contents().find("body")
        .css("font-name", "verdana")
        .css("font-size", "x-small")
        .css("color", "gray")
    .done());

如果你想在不导入gwtquery的情况下做同样的事情，你需要一些jsni来在连接和初始化RichTextArea之后获取body元素：

// First attach the widget to the DOM
RootPanel.get().add(richTextArea);

// We only can manipulate the body, once the iframe document has been created, 
// and this happens after it has been attached.
// Using a timer because richtTextArea uses a timeout to initialize
new Timer() {

  // There is no method to get the body, so we use JSNI
  private native Element getBodyElement(Element iframe) /*-{
    return iframe.contentWindow.document.body;
  }-*/;

  public void run() {
    Element e = getBodyElement(richTextArea.getElement());
    e.getStyle().setProperty("fontName", "Verdana");
    e.getStyle().setProperty("fontSize", "x-small");
    e.getStyle().setProperty("color", "gray");
  }
}.schedule(1);

GWT - RichTextArea - 格式化程序触发

2 个答案: