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

Question

我真的很感谢你的帮助，你看:我正在尝试获得一个构建 SimpleMDE 的 qooxdoo 小部件。编辑。你可以在playground查看我的测试代码:

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

实际上实例已创建并显示，但是当您在可见空间之外写入文本时，“预期”滚动条不会显示，并且在控制台我收到此错误 类 qx.ui.core 的属性 scrollY 中的错误带有传入值“131”的方法 setScrollY 中的 .scroll.ScrollPane:无效!。

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

Answer 1

SimpleMDE 编辑器是一个封装的 CodeMirror 编辑器，其功能与其他编辑器(如 CKEditor)相同:它将自己的 div 作为给定文本区域元素的父 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;
}

第二件事是你必须主动手动设置编辑器的高度，因为它没有用于此的 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;

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

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

http://tinyurl.com/zn7on7l(请去掉http://后面的空格)

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