javascript - 在不退出格式的情况下为 GWT RichTextArea 插入 Html

我正在使用 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 进行一些后期处理以删除标签，但我想避免这种情况。

最佳答案

免责声明: 我不是 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 = [email protected]::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);
    }

我从 GoogleCode 上的项目中获得 RichTextToolbar 的地方。