Codemirror-textarea изменяет размер как стандартное текстовое поле

Ответ 1

Некоторые поисковые системы Google говорят, что он не поддерживается в CodeMirror, но вы можете достичь с jQuery UI:

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  lineNumbers: true,
});
$('.CodeMirror').resizable({
  resize: function() {
    editor.setSize($(this).width(), $(this).height());
  }
});

Ответ 2

Я сделал этот маленький пример.

Обратите внимание, что это изменение размера только по вертикали, что, вероятно, то, что вы действительно хотите? Способность обычного текстового поля к горизонтальному изменению размера имеет тенденцию нарушать макеты - обычно гораздо проще создать макет, в котором редактор имеет фиксированную ширину, а содержимое под ним выталкивается при изменении размера.

Я не видел дизайн, в который вы намерены вписаться, поэтому я предполагаю.

Не должно быть слишком сложно изменить это и получить рабочий виджет для изменения размера, который работает в обоих направлениях, если это то, что вы хотели.

В качестве альтернативы, попробуйте этот плагин с помощью @Sphinxxx, который был получен из этого примера.

Ответ 3

БЕЗ JQUERY, только CSS

.CodeMirror {
      resize: vertical;
      overflow: auto !important;
    }

После некоторой борьбы этот простой код действительно работал для меня. Я получил изменяемый по размеру экземпляр Codemirror по вертикали, при этом прокрутка работает правильно.

Ответ 4

let CodeMirrorCustomResize = (params) => {
    var start_x, start_y, start_h,
        minHeight = params && params.minHeight ? params.minHeight : 150,
        resizableObj = params && params.resizableObj ? params.resizableObj : '.handle'

    let onDrag = (e) => {
        sqlEditor.setSize(null, `${Math.max(minHeight, (start_h + e.pageY - start_y))}px`);
    }

    let onRelease = (e) => {
        $('body').off("mousemove", onDrag);
        $(window).off("mouseup", onRelease);
    }

    $('body').on("mousedown", resizableObj, (e) => {
        start_x = e.pageX;
        start_y = e.pageY;
        start_h = $('.CodeMirror').height();

        $('body').on("mousemove", onDrag);
        $(window).on("mouseup", onRelease);
    });
}

Если кто-то заинтересован в более короткой и более jQuery-версии ответа @mindplay.dk(кстати, спасибо за это).

Ответ 5

Если jQuery не является опцией, и вы можете жить без изменения размера в IE (и Edge, пока он не догонит CSS resize:...), то вот пример проверки концепции приятного простого и легкого метода, который не не требует взлома перетаскивания, впервые введенного @mindplay.dk.

Вместо этого здесь:

1. контейнер DIV используется, с
2. простой дескриптор изменения размера CSS, и
3. события resize передаются в CM через ResizeObserver/MutationObserver (поскольку onResize только для window, просто чтобы сделать веб-программирование намного более несчастным;)).

Одна проблема, которую нужно сгладить (в CM? В WebKit? Или как обходной путь, у которого у меня не было терпения + времени, чтобы отогнать...), это дополнительный нижний отступ, добавленный для сценария "CM on WebKit", где CSS изменяет размер ручка будет перекрываться собственными кастрюлями и кастрюлями CM. OTOH, Firefox рисует его поверх всего остального, поэтому, несмотря на то, что CM не знает о дескрипторе и рисует там свои различные (несколько!) Прямоугольники, Firefox все же удается победить, спасая его, и изменение размера будет работать, хотя ручка будет вставлена поверх стрелки полосы прокрутки. (Игра с z-index или стилизация дерьма из CM мне не помогла.)

Кстати, обратите внимание: это означает, что простое overflow: hidden; resize: both; CSS overflow: hidden; resize: both; overflow: hidden; resize: both; , непосредственно применяется к основному .CodeMirror DIV, практически работает в Firefox без какой-либо магии (без дополнительных кадров, без настроек геометрии и т.д.). cm.setSize(cm_div.clientWidth, cm_div.clientHeight) событий изменения размера (так же, как указано выше) для cm.setSize(cm_div.clientWidth, cm_div.clientHeight) все равно будет необходим.

Но обнаружение Firefox и Chrome для его оптимизации, вероятно, сделало бы код намного сложнее, чем просто оставило его одинаковым для обоих...

document.addEventListener("DOMContentLoaded", function(event) {
  
  fr = document.querySelector("#cm-resize-frame")
  
  // This 5-6 lines below is only for the WRAP/NOWRAP demo switch:
  cm = null
  reset = document.getElementById("wrap").onclick = function() {
    cm && cm.toTextArea() // clean up previous CM instance
    cm = CodeMirror.fromTextArea(document.getElementById("cm"),
        {lineWrapping: document.getElementById("wrap").checked,
         lineNumbers: true } // just to see if CM is actually alive & resizing
    )

    function cm_resize() {
        cm.setSize(fr.clientWidth + 2,   // chrome needs +2, others don't mind...
                   fr.clientHeight - 10) // and CM needs room for the resize handle :-/
    }

    // Needed (on FF, Edge & IE11, but not Chrome) for the scrollbars to properly initialize:
    cm_resize()

    // This is the actual "business logic" of the whole thing! ;)
    if (window.ResizeObserver) // Chrome 64+
        new ResizeObserver(cm_resize).observe(fr)
    else if (window.MutationObserver) // others
        new MutationObserver(cm_resize).observe(fr, {attributes: true})
  }
  reset()
})

#cm-resize-frame {
  overflow: hidden; /* CM will manage its own scrollbars. */
  resize: both;
  
  height: 10em; /* A fixed initial height is required in Chrome both for the resize handle to appear and to not fall into a shrinking loop due to the neg. offset in cm_resize()! */

  /* Optional... */
  border: 1px solid lightgrey;
  width: 20em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.min.js"></script>

<div id="cm-resize-frame">
<textarea id="cm">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc rhoncus ornare diam eget consequat. Suspendisse potenti.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
  
Sed scelerisque, ex nec pharetra ultrices, ipsum mi aliquam arcu, sit amet pulvinar erat mauris sit amet mi.
Fusce pulvinar vel ex semper imperdiet. Quisque dapibus purus eu commodo volutpat.

Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
  
Sed scelerisque, ex nec pharetra ultrices, ipsum mi aliquam arcu, sit amet pulvinar erat mauris sit amet mi.
Fusce pulvinar vel ex semper imperdiet. Quisque dapibus purus eu commodo volutpat.</textarea>
</div>

WRAP: <input id="wrap" type="checkbox" checked>

Ответ 6

Это сделало это для меня. Прост в использовании. https://github.com/Sphinxxxx/cm-resize

Ответ 7

.CodeMirror__wrapper {
    resize: both;
    overflow: auto !important;
}

Попытка добавления изменения размера в .CodeMirror, но это не сработало. Добавление изменения размера в обертку сработало для меня, хотя.

Ответ 8

Что вы пробовали?

Я только что загрузил моментальный снимок разработки CodeMirror из http://codemirror.net/

Запуск complete.html из демонстрационного каталога имеет хорошую изменяемую размерную область текста (в браузере браузера Chrome). Фактически, по крайней мере некоторые другие демо также имеют изменяемые размеры текстовых полей.

Если это не отвечает на ваш вопрос, пожалуйста, обновите его с более конкретной информацией о том, что вы пробовали и что не работает.