smartGWT选项卡中的CodeMirror UI_Gwt_Smartgwt_Codemirror

smartGWT选项卡中的CodeMirror UI

gwt

smartGWT选项卡中的CodeMirror UI,gwt,smartgwt,codemirror,Gwt,Smartgwt,Codemirror,我有一个关于在smartGWT选项卡中集成CodeMirror UI的问题基本上，我无法在连接到smartGWT选项卡的textarea元素中显示CodeMirror UI编辑器。以下是我所做的：我按照上所述安装了CodeMirror UI，更正路径以匹配项目的目录层次结构我在项目的主html中写了一个js脚本： <head> ... <script> function fireEditor() { var textarea = window.doc

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

基本上，我无法在连接到smartGWT选项卡的textarea元素中显示CodeMirror UI编辑器。以下是我所做的：

我按照上所述安装了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>

    <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浏览器上运行时，会出现一个smartGWT选项卡，其中显示一个空的textarea元素。通过firebug检查，smartGWT选项卡内的区域包含我在HTMLPanel中指定的HTML，但不显示CodeMirror UI

我错过了什么

我使用的是EclipseIndigo、GWT2.4.0、SmartGWT3.0p和CodeMirrorUI0.0.19，它们来自GitRepo，后者本身使用CodeMirror2.3

谢谢你找到了解决方案

首先，html textarea元素没有onload事件，因此代码

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

测试。工作

    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);
   }

    }

    // 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);