1

我将非常感谢您的帮助，您会看到：我正在尝试获取构建SimpleMDE编辑器的 qooxdoo 小部件。您可以在操场上查看我的测试代码：

qx.Class.define("MdEditor", {
  extend: qx.ui.core.Widget,

  construct: function() {
    this.base(arguments);
    this.addListenerOnce("appear", this.__appearRenderer, this);
  },

  members: {
    __appearRenderer: function() {

      qx.bom.Stylesheet.includeFile('https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css');

      var dynLoader = new qx.util.DynamicScriptLoader (
        ["https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"]
      );

      dynLoader.addListenerOnce("ready", function(e) {
        this.debug("Simple MDE editor loaded");

        var contentEl = this.getContentElement();

        var editor = new SimpleMDE({
          element: contentEl.getDomElement(),
          spellChocker: false
        });

      }, this);

      dynLoader.start();
    },

    _createContentElement: function() {
      return new qx.html.Input("textarea");
    }
  }
});

var win = new qx.ui.window.Window("Simple MDE");
win.setWidth(400);
win.setHeight(280);
win.setShowMinimize(false);
win.setLayout(new qx.ui.layout.Grow());

var compo = new qx.ui.container.Scroll();
compo.add(new MdEditor());

win.add(compo);

this.getRoot().add(win, {left:20, top:20});


win.open();

实际上该实例已创建并显示，但是当您在可见空间之外写入文本时，“预期”滚动条不会显示，并且在控制台我收到此错误Error in property scrollY of class qx.ui.core.scroll.ScrollPane in method setScrollY with incoming value '131': Is invalid!。

我试图显示本机滚动条SimpleMDE但没有成功。现在，我想显示由 qooxdoo 管理的滚动条，但不知道如何存档。

4

1 回答 1

2

SimpleMDE 编辑器是一个包装好的 CodeMirror 编辑器，其功能与其他编辑器（如 CKEditor）相同：它将自己的 div 作为给定 textarea 元素的父 div 的子元素。

要使这项工作正常工作并将 div 作为 qooxdoo 小部件内容元素的子元素，您必须创建一个 div 作为内容元素，并将 textarea 作为该 div 的子元素：

_createContentElement: function() {
  // create a div content element which will be the parent for
  // the editor div
  var ce = new qx.html.Element("div");

  // and add a textarea as a child to the former div
  // as the editor only sets the textarea to display:none
  this.__textareaContentElement = new qx.html.Input("textarea");

  ce.add(this.__textareaContentElement);

  return ce;
}

第二件事是您必须通过检索编辑器的顶部 div 和滚动条 div 来手动设置编辑器的高度，因为它没有用于此的 API，这可以通过

this.__cm = qx.bom.Selector.query(".CodeMirror", content_element)[0];
this.__cmscroll = qx.bom.Selector.query(".CodeMirror-scroll", content_element)[0];

其中 content_element 是我们的包装小部件的（好）内容元素。现在，您可以在包装器的调整大小侦听器中初始设置 CodeMirror 和 CodeMirror-scroll 的高度，以使其适合。

var hint = this.getBounds();
var height = (hint.height-83-22-22-12)+"px";
this.__cm.style.height = height;
this.__cm.style.minHeight = height;
this.__cmscroll.style.minHeight = height;

请注意，高度的“魔法”计算应该通过检索工具栏的真实高度和编辑器的状态栏来优化。我在下面的操场示例中扩展了这些计算以计算元素的实际高度，并添加了一个用于调整工具栏大小的侦听器，这可能会根据一行或多行中显示的图标数量来改变它的高度。

请查看这个有效的游乐场示例，但应该改进：

http:// tinyurl.com/zn7on7l（请去掉http://后面的空格）

另请注意，SimpleMDE 和 codemirror 似乎在 API 中受到限制，因为它们具有设置编辑器部件/元素高度的方法。

于 2016-11-14T11:57:43.990 回答