如何使用 SimpleMDE 和 Qooxdoo 获取滚动容器？

Question

非常感谢你的帮助，你看：我正在尝试获得一个构建 SimpleMDE Editor. You can check my test code at playground:

的 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();

实际上已经创建并显示了实例，但是当您编写超出可见范围的文本时 space «预期» 滚动条不会显示，并且在控制台我收到此错误 Error in property scrollY of class qx.ui.core.scroll.ScrollPane in method setScrollY with incoming value '131': Is invalid!。

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

Answer 1

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

要使此工作正常并使 div 作为 qooxdoo 小部件内容元素的子元素，您必须创建一个 div 作为内容元素，并将文本区域作为该元素的子元素 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;
}

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

完成

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;

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

请看一下这个可行的 playground 示例，但应该对其进行改进：

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

另请注意，SimpleMDE 和 codemirror 在 API 中似乎受到限制，方法是设置编辑器的高度 parts/elements。

如何使用 SimpleMDE 和 Qooxdoo 获取滚动容器？

How get works scroll container with SimpleMDE and Qooxdoo?

javascript

qooxdoo

simplemde