GWT，通过非 GWT（或“常规”）javascript 访问 RichTextArea答案

【问题标题】：GWT, access RichTextArea by non-GWT (or "regular") javascriptGWT，通过非 GWT（或“常规”）javascript 访问 RichTextArea
【发布时间】：2010-07-21 18:26:35
【问题描述】：

我正在 GAE 上编写一个非常简单的 CMS，我希望我的用户能够上传图片。我已经编写了实际上传和显示图像的部分，这就是我想做的：

显示新帖子的常用表单（带有包含富文本区域和格式栏的小部件）和用户曾经上传（完成）的图像列表。然后我希望当用户单击该图像时，该图像会出现在文本区域中。

我在服务器上生成图像列表，但我找不到从非 GWT javascript 调用富文本区域上的任何方法的方法。而且我真的不想通过 AJAX 来生成图像列表，因为它看起来很麻烦，而且希望随着 HTML5 的出现它会变得更简单。

好吧，问题是，我如何从页面上的普通 javascript 访问小部件中的 RichTextArea，或者是否有另一种将图像插入其中的方法（即另一种方法是生成图像列表这样它们将在一种小部件中，但不使用 AJAX）。

谢谢。

【问题讨论】：

标签： google-app-engine gwt

【解决方案1】：

要回答有关通过手写 Javascript 访问 GWT 代码的一般问题，您可以使用 general built in method 或 Ray Cromwell 的 gwt-exporter project。这样，您可以公开您尝试从外部 Javascript 访问的 RichTextArea 实例的特定方法。

至于您的其他问题，生成图像列表应该只需要获取图像的网址并使用给定的网址创建一堆图像对象。然后在PopupPanel 或其他小部件中显示此列表。

【讨论】：

【解决方案2】：

这是我最终解决问题的方法（感谢上面 Arthur 的回复）：

public class NewSection implements EntryPoint {
    private static RichTextAreaWithFormatBar rta;
    private Button                    pseudoSubmit;

    @Override
    public void onModuleLoad() {
        invokeExternal("hello");

        rta = new RichTextAreaWithFormatBar();
        pseudoSubmit = new Button(">>>");
        <...>
    }


<some other code here>
    public static void addImage(String a) {
        rta.textarea().setHTML(
                rta.textarea().getHTML() + "<br /><img src=\"/cms/i/"+ a +"\" alt=\"\"><br />");
    }

    native void invokeExternal(String int1) /*-{
        $wnd.externalJsFunction(function(int1) {
            @ur.g05.smc.client.NewSection::addImage(Ljava/lang/String;)(int1);
        });
    }-*/;
}

这是我模板中的“手写”javascript：

（首先是在同一模板中创建图像列表的 FreeMaker 代码）：

<#list images as i>
            <td><img src="/cms/i/${i.keyString()}.t" alt='' onclick='addImage("${i.keyString()}.p");'/><br /><p>${i.fullWidth()}·${i.fullHeight()}</p><p>${i.previewWidth()}·${i.previewHeight()}</p><p>${i.thumbWidth()}·${i.thumbHeight()}</p></td>
        </#list>

还有脚本本身：

    <script language="javascript">
        var callBackFunction; 
        function externalJsFunction(func) {
            callBackFunction = func;
        }

        function addImage(imgid) {
            callBackFunction(imgid);
        }


    </script>

实际上发生的是：首先，我们创建一个图像列表，为每个图像添加一个“onClick”侦听器，并将每个相应图像的 url 作为参数。图像 url 由它们在数据存储中的键组成，加上“.t”用于缩略图，“.p”用于预览，而没有用于全尺寸图像。

每个图像都调用“addImage”函数。但是 addImage 函数必须知道 textarea，它不知道。为此，我们创建了“callBackFunction”变量和“externalJsFunction”，用于设置“callBackFunction”变量的值。并将其设置为作为参数得到的任何值。

现在，我们可以从 Widget 代码中调用 externalJsFunction 并将添加图像的函数传递给 textarea。但是，当richtextarea 不是静态的时，我无法使其工作。

基本上就是这样。并感谢您的回复和投票:)

【讨论】：