Question

我有一个关于在smartGWT选项卡中集成CodeMirror UI的问题。

基本上，我无法在附加到smartGWT选项卡的textarea元素中显示CodeMirror-UI编辑器。这是我做的：

我按its page所述安装了CodeMirror-UI，更正了匹配项目目录层次结构的路径

我在项目的主要html（头部）写了一个js脚本：

<head>
...
 <script>
  function fireEditor()
  {
   var textarea = window.document.getElementById('tab_editor' );
   var uiOptions = { path : 'codemirror-ui/js/', searchMode : 'inline' };
   var codeMirrorOptions = { mode: 'javascript' };
   var editor = new CodeMirrorUI(textarea,uiOptions,codeMirrorOptions);
  }
 </script>
</head>

我在打开（smartGWT）标签时调用了脚本：

// create a smartGWT tab
Tab tab = new Tab("tab");
tab.setID("tab");
tab.setCanClose(true);

// put the CodeMirror UI inside the smartGWT tab
// create a smartGWT canvas
Canvas tabContent = new Canvas();
tabContent.setID("tabc");
tabContent.setWidth100();
tabContent.setHeight100();

// use a GWT HTMLPanel to attach new html elements to the smartGWT canvas
// and invoke the fireEditor() function to load the CodeMirror UI
HTMLPanel editorContainer = new HTMLPanel(
 "<div id=\"editor_container\">"
 + "<textarea id=\"tab_editor\" style=\"width:100%;height:100%\" onload=\"fireEditor()\">"
 + "</textarea>"
 + "</div>");
editorContainer.setWidth("100%");
editorContainer.setHeight("100%");

从浏览器运行（我使用的是firefox - iceweasel 10.0.10），这会生成一个显示空textarea元素的smartGWT选项卡。使用firebug进行检查，smartGWT选项卡中的区域包含我在HTMLPanel中指定的HTML，但没有显示CodeMirror UI。

我错过了什么？

我正在使用Eclipse Indigo，gwt 2.4.0，smartgwt 3.0p，以及来自git repo的codemirror ui 0.0.19（它本身使用CodeMirror 2.3）。

谢谢

Answer 1

找到了解决方案。

首先，html textarea元素没有“onload”事件，所以代码

    HTMLPanel editorContainer = new HTMLPanel(
    "<div id=\"editor_container\">"
    + "<textarea id=\"tab_editor\" style=\"width:100%;height:100%\" onload=\"fireEditor()\">"
    + "</textarea>"
    + "</div>");

只会在HTMLPanel中放置一个textarea，而不调用“fireEditor（）”。用“onclick”替换“onload”就可以了：一旦textarea元素出现，点击它，CodeMirrorUI也会出现。

问题：我需要自动可视化CodeMirrorUI接口，因此“onclick”方法毫无用处。

要完成此任务，我需要以某种方式修改smartGWT选项卡的DOM，用CodeMirrorUI的html替换其内部html。我发现此文档非常有用：http://www.smartclient.com/smartgwtee-latest/javadoc/com/smartgwt/client/docs/DomIntegration.html

这是生成的代码：

1）我将js脚本保存在项目的主要html（头部）中：

    <head>
    ...
    <script>
      function fireEditor()
      {
        var textarea = window.document.getElementById('tab_editor' );
        var uiOptions = { path : 'codemirror-ui/js/', searchMode : 'inline' };
        var codeMirrorOptions = { mode: 'javascript' };
        var editor = new CodeMirrorUI(textarea,uiOptions,codeMirrorOptions);
      }
    </script>
    </head>

2）我按照上面提到的文档链接中的示例创建了一个新类 - “MyEditor”：

    public class MyEditor extends Canvas {
       private String editor_id = null;

   private static native void replace(String editor) /*-{
          $wnd.fireEditor(editor);
   }-*/;

   public MyEditor(Integer num) {
          editor_id = "editor_" + num;
          setRedrawOnResize(false);
   }

   @Override
   public String getInnerHTML() {
          return "<textarea id=\"" + editor_id + "\"" + "style=\"width:100%;height:100%\"></textarea>";
   }

   @Override
   protected void onDraw() {
          MyEditor.replace(editor_id);
   }

    }

3）最后，我在smartGWT选项卡中填写了一个MyEditor实例：

    // create a smartGWT tab
    Tab tab = new Tab("tab");
    tab.setID("tab");
    tab.setCanClose(true);

    MyEditor editor = new MyEditor(tabNumber); // an integer number
    tab.setPane(editor);

测试。工作

smartGWT选项卡中的CodeMirror-UI

1 个答案: