javascript - GWT RichTextArea 的 insertHtml，无需退出格式化

Question

我正在使用 GWT RichTextArea 并且需要在当前光标位置插入文本。我阅读了有关使用 RichTextArea.getFormatter().insertHTML() 方法来执行此操作的信息，并且它工作正常。

我的一个问题是，它不是将我的文本作为原始 HTML 插入光标位置，而是关闭当前格式化 HTML 标签，然后围绕我的 HTML 重新打开新的标签。澄清一下，我实际上并没有插入任何类型的 HTML 字符串，只是文本。这是一个例子:

原始 HTML:

<font size="2">Walk the dog</font>

如果我的光标放在“d”之后，并且我调用了 insertHTML("ASDF")，我得到的 html 将是这样的:

<font size="2">Walk the d</font>ASDF<font size="2">og</font>

有什么办法可以避免这种格式转义吗？我需要文本的格式与周围的文本相同。当用户手动输入文本时，它会正确执行此操作。我需要在脚本中做同样的事情。

我不熟悉在 GWT 中编写 native javascript，但我认为可能有一种使用 native 方法实现此目的的简单方法。任何关于如何实现这一目标的想法将不胜感激。我显然可以对 HTML 进行一些后期处理以删除标签，但我想避免这种情况。

Answer 1

免责声明:我不是 JavaScript 专家，我的回答可能不适用于所有浏览器。请随时指出任何错误或改进我的答案的方法，使其适用于所有浏览器。

RichTextArea.getFormatter().insertHTML() 方法调用 executeCommand("insertHTML", ...) JavaScript 方法，据我所知, 在当前位置创建一个子节点，同时打破父节点的格式。因此，任何 insertHTML 方法都不会提供所需的行为。

相反，您应该获取包含当前位置的文本对象，并使用 insertData(pos, text) 插入新文本。这可以通过扩展 RichTextArea 类并添加 JSNI 轻松完成。方法。

---

在下面的示例中，我扩展了 RichTextArea 类并添加了以下 JSNI 方法:

public class CustomRichTextArea extends RichTextArea {

    public native void insertText(String text, int pos) /*-{
        var elem = this.@com.google.gwt.user.client.ui.UIObject::getElement()();
        var refNode = elem.contentWindow.getSelection().getRangeAt(0).endContainer;
        refNode.insertData(pos, text);
    }-*/;
}

insertText 方法获取与当前选择关联的文本对象，然后将文本插入该文本对象中的指定位置。此代码提供了您想要的行为，但我只在 Chrome 中对此进行了测试。
此外，可以通过自动查找当前位置来改进此方法——获取 RichTextArea 的当前位置是 completely different topic。 .

我用以下入口点测试了上面的代码片段:

    private CustomRichTextArea crta;

    public void onModuleLoad() {
        crta = new CustomRichTextArea();
        crta.ensureDebugId("cwRichText-area");
        crta.setSize("100%", "14em");
        RichTextToolbar toolbar = new RichTextToolbar(crta);
        toolbar.ensureDebugId("cwRichText-toolbar");
        toolbar.setWidth("100%");
        Button b = new Button();
        b.setText("Insert HTML");
        b.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                crta.setFocus(true);
                crta.insertText("ASDF", ((int)crta.getText().length() / 2));
            }
        });
        Grid grid = new Grid(2, 1);
        grid.setStyleName("cw-RichText");
        grid.setWidget(0, 0, toolbar);
        grid.setWidget(1, 0, crta);
        // display:
        RootPanel.get().add(grid);
        RootPanel.get().add(b);
    }

我在哪里获得 RichTextToolbar来自 GoogleCode 上的项目。