Как получить работу с прокруткой контейнера с SimpleMDE и Qooxdoo?

Question

Я по-настоящему благодарю вашу помощь, вы видите: я пытаюсь получить виджет qooxdoo, который создает редактор SimpleMDE. Вы можете проверить мой тестовый код на 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(); 

На самом деле экземпляр создается и отображается, но при вводе текста за пределами видимого пространства «ожидается» скроллбары не показывают, и на консоли я получил эту ошибку 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 данного элемента textarea.

Чтобы сделать эту работу и иметь 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 сначала и внутри прослушивателя изменения размера обертки так, чтобы он соответствовал.

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 с помощью методов установки высоты частей/элементов редактора.