GWT 2.6 支持降价

Posted 2023-02-16

【中文标题】GWT 2.6 支持降价

【英文标题】：GWT 2.6 Supporting markdown

【发布时间】：2015-11-12 14:07:10

【问题描述】：

我正在做一个 GWT 项目，我想添加对降价的支持。到目前为止，我已经尝试过 Showdown 编辑器，尽管它可以开箱即用，但它缺少工具栏。结果，我尝试使用 Pagedown 但无法实例化编辑器。

到目前为止我所做的...有一个抽象基类（扩展 TextArea），它从其构造函数注入 Pagedown 脚本：

protected MarkdownEditorBase() 
    ScriptInjector.fromUrl("pagedown/Markdown.Converter.js")
        .setRemoveTag(false)
        .setWindow(ScriptInjector.TOP_WINDOW)
        .inject();

    ScriptInjector.fromUrl("pagedown/Markdown.Sanitizer.js")
        .setRemoveTag(false)
        .setWindow(ScriptInjector.TOP_WINDOW)
        .inject();

    ScriptInjector.fromUrl("pagedown/Markdown.Editor.js")
        .setRemoveTag(false)
        .setWindow(ScriptInjector.TOP_WINDOW)
        .inject();

    dock = new FlowPanel();
    FlowPanel wmdPanel = new FlowPanel();
    wmdPanel.setStyleName("wmd-panel");

    FlowPanel wmdButtonBar = new FlowPanel();
    wmdButtonBar.setStyleName("wmd-button-bar");

    setStyleName("wmd-input");
    this.getElement().setId("wmd-input");

    wmdPanel.add(wmdButtonBar);
    wmdPanel.add(this);

    dock.setStyleName("markdown-container");

    dock.add(wmdPanel);
    

然后有一个本地方法来实例化编辑器并使用它（根据演示说明）：

public native javascriptObject initEditor() /*-
    var converter = new $wnd.Markdown.getSanitizingConverter();
    var editor = new $wnd.Markdown.Editor(converter);
    if (editor) 
        editor.run();
    
    return editor;
-*/;

每当我从扩展器类中运行此方法时，

public PagedownEditor() 
    super();
    this.pagedownEditor = initEditor();

我得到以下信息：

Firebug 控制台窗口

TypeError: output is undefined
Markdown.Editor = function (markdownConverter, idPostfix, options) 
Markdown.Editor.js (line 92)

ReferenceError: Markdown is not defined
Markdown.Editor = function (markdownConverter, idPostfix, options) 
Markdown.Editor.js (line 92)

Eclipse 中的开发模式

com.google.gwt.core.client.JavaScriptException: (TypeError)
@com.google.gwt.core.client.impl.Impl::apply(Ljava/lang/Object;Ljava
/lang/Object;Ljava/lang/Object;)([JavaScript object(2344), JavaScript 
object(2343), JavaScript object(2360)]): $wnd.Markdown is undefined

顺便说一句，我在 GWT 中使用经典开发模式，因为与超级开发模式存在一些冲突，项目无法运行。

热烈欢迎任何帮助！

【问题讨论】：

第一行应该是var converter = $wnd.Markdown.getSanitizingConverter();，所以没有new，但我怀疑这会导致你的问题。

@Baz 感谢您的快速回复。我按照你的建议做了，但问题仍然存在。仍然得到“$wnd.Markdown is undefined”。但是，我稍后尝试实例化编辑器并得到了这个：“$wnd.Markdown.Editor is not a constructor”

你怎么打电话给new PagedownEditor()？如果您正在同步执行此操作，则这些脚本标签可能尚未加载（使用 ScriptInjector 回调）。如果您只是在应用启动时无条件加载这些脚本，请考虑将它们放在您的原始 html 页面中，或者将它们作为 TextResources 加载到应用本身中并直接注入它们而不是等待它们加载。

好点！是的，我对同步性也有同样的怀疑。我听从了您的建议，扩展的 ClientBundle 获取了 JS 文件的文本并用“fromString”注入它们。现在它更进一步，它抛出了这个异常： com.google.gwt.core.client.JavaScriptException: (TypeError) @com.google.gwt.core.client.impl.Impl::apply(Ljava/ lang/Object;Ljava/lang/Object;Ljava/lang/Object;)([JavaScript object(2631), JavaScript object(2630), JavaScript object(2651)]): elem 为空。感觉就像一个蛇坑:)

【参考方案1】：

感谢真正有用的 cmets。我决定坚持 TextResources 方法，因为 Pagedown 源文件非常“重”并且需要一段时间才能加载。尽管如此，我得到的最新异常（elem 为空）主要是由于 DIV 的设置不正确。无论如何，这里是解决问题的资源类：

interface PagedownResources extends ClientBundle 

    @Source("../../resources/pagedown/Markdown.Converter.js")
    TextResource markdownConverter();

    @Source("../../resources/pagedown/Markdown.Sanitizer.js")
    TextResource markdownSanizer();

    @Source("../../resources/pagedown/Markdown.Editor.js")
    TextResource markdownEditor();

    @Source("../../resources/pagedown/pagedown.css")
    TextResource markdownCSS();

另外，CSS 文件不是源代码的一部分，您可以从demo folder 获取并进行相应修改。

为了完成答案，这是重写的构造函数：

private PagedownResources mPagedownResourcesInstance = GWT.create(PagedownResources.class);

public PagedownEditor() 

    StyleInjector.inject(mPagedownResourcesInstance.markdownCSS().getText());
    ScriptInjector.fromString(mPagedownResourcesInstance.markdownConverter().getText())
        .setRemoveTag(false)
        .setWindow(ScriptInjector.TOP_WINDOW).inject();
    ScriptInjector.fromString(mPagedownResourcesInstance.markdownSanizer().getText())
        .setRemoveTag(false)
        .setWindow(ScriptInjector.TOP_WINDOW).inject();
    ScriptInjector.fromString(mPagedownResourcesInstance.markdownEditor().getText())
        .setRemoveTag(false)
        .setWindow(ScriptInjector.TOP_WINDOW).inject();     

    mainContainer = new SimplePanel();
    Element wmdPanel = DOM.createDiv();
    wmdPanel.addClassName("wmd-panel");

    Element wmdButtonBar = DOM.createDiv();
    wmdButtonBar.setId("wmd-button-bar");

    Element wmdtextArea = DOM.createTextArea();
    wmdtextArea.addClassName("wmd-input");
    wmdtextArea.setId("wmd-input");

    wmdPanel.appendChild(wmdButtonBar);
    wmdPanel.appendChild(wmdtextArea);

    mainContainer.setStyleName("markdown-container");
    mainContainer.getElement().appendChild(wmdPanel);
    initWidget(mainContainer);

让 Pagedown 工作唯一剩下的就是重写 onLoad() 方法（我正在扩展 Composite）并在该方法中调用 initEditor()。

玩得开心，谢谢。