Question

我正在开发一个GWT项目，我想添加对markdown的支持。到目前为止，我已经尝试了 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中使用经典开发模式，因为在超级开发模式下存在一些冲突，项目无法运行。

热烈欢迎任何帮助！

Answer 1

感谢您提供非常有用的评论。我决定坚持使用TextResources方法，因为Pagedown源文件非常“繁重”，需要一段时间才能加载。然而，我得到的最新例外（elem为null）主要是由于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()。

玩得开心，谢谢你。

GWT 2.6支持降价

1 个答案: