gwt - smartGWT 选项卡中的 CodeMirror-UI

Question

我有一个关于在 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>

我在打开（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。

我错过了什么？

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

谢谢

score 0 · Accepted Answer

找到了解决方案。

首先，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 中放置一个文本区域，而不调用“fireEditor()”。用“onclick”替换“onload”就可以了：一旦出现textarea元素，点击它，CodeMirrorUI也会出现。

问题：我需要自动可视化 CodeMirrorUI 界面，因此“onclick”方法没用。

为了完成这项任务，我需要以某种方式修改 smartGWT 选项卡的 DOM，将其内部 html 替换为 CodeMirrorUI 的 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) 最后，我用 MyEditor 的实例填充了 smartGWT 选项卡：

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

经测试。在职的。

gwt - smartGWT 选项卡中的 CodeMirror-UI

1 回答 1

Related

Reference