javascript - modes - codemirror react

codemirror-textarea cambia de tamaño como un área de texto estándar

Question

¿Alguien sabe cómo hacer que un área de texto de código codificado se pueda cambiar de tamaño como área de texto?

Para que se pueda cambiar el tamaño del área de texto de Codemirror arrastrando su esquina inferior hacia abajo.

Sé que es posible para divs html (ver div redimensionables como área de texto ) pero no he logrado lograr lo mismo en el espejo de código.

Answer 1

¿Qué has probado?

Acabo de descargar la instantánea de desarrollo de CodeMirror desde http://codemirror.net/

La ejecución de complete.html desde el directorio de demostración tiene un área de texto que se puede cambiar de tamaño (en mi navegador Chrome). De hecho, al menos algunas otras demostraciones también tienen áreas de texto de tamaño variable.

Si esto no responde a su pregunta, actualícelo con información más específica sobre lo que ha intentado y lo que no funciona.

Answer 2

Algunos Googlings sugieren que no está soportado en CodeMirror pero puedes lograrlo con jQuery UI :

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

Answer 3

Hice este pequeño ejemplo .

Tenga en cuenta que esto cambia de tamaño solo verticalmente, ¿cuál es probablemente lo que realmente quiere? La capacidad de redimensionamiento horizontal de un área de texto normal tiende a romper los diseños. Por lo general, es mucho más fácil crear un diseño en el que el editor tenga un ancho fijo y el contenido que se encuentra debajo se empuje hacia abajo si cambia el tamaño.

No he visto el diseño en el que pretendes que encaje, así que supongo.

No debería ser demasiado difícil modificar esto y obtener un widget de cambio de tamaño que funcione en ambas direcciones, si eso es lo que quería.

Answer 4

Si jQuery no es una opción, y puede vivir sin cambiar el tamaño en IE (y Edge, hasta que alcance el resize: CSS resize: ...), aquí hay un ejemplo de prueba de concepto de una técnica agradable y ligera que no tiene No es necesario el truco de arrastrar y soltar iniciado por @ mindplay.dk.

En su lugar, aquí:

1. Se utiliza un contenedor DIV , con
2. un sencillo controlador de tamaño CSS , y
3. los eventos de cambio de tamaño se asignan a CM a través de ResizeObserver / MutationObserver (ya que onResize solo dispara para la window , solo para hacer que la programación web sea mucho más miserable;)).

Un problema que hay que resolver (en CM? En WebKit? O como solución alternativa, no he tenido la paciencia + tiempo de destilar ...) es el relleno inferior adicional agregado para el escenario "CM en WebKit" , donde el tamaño del CSS El asa se superpondría con las propias ollas y sartenes de CM. OTOH, Firefox lo dibuja por encima de todo lo demás, así que a pesar de que CM no es consciente de la manija y dibuja sus varios (¡varios!) Rectángulos allí, Firefox aún se las arregla para ganar rescatándola, y el cambio de tamaño funcionaría, aunque la manija se pegaría sobre Las flechas de la barra de desplazamiento. (Jugar con z-index o el estilo de la mierda de CM no me ayudó).

Por cierto, nota: esto significa que el overflow: hidden; resize: both; simple de CSS overflow: hidden; resize: both; overflow: hidden; resize: both; , aplicado directamente en el .CodeMirror principal .CodeMirror DIV, casi funciona en Firefox sin ningún tipo de magia (sin marco adicional, sin ajustes de geometría, etc.). cm.setSize(cm_div.clientWidth, cm_div.clientHeight) aún sería necesario enganchar los eventos de cambio de tamaño (de la misma manera que se indicó anteriormente) para un cm.setSize(cm_div.clientWidth, cm_div.clientHeight) .

Pero detectar Firefox vs. Chrome para optimizarlo probablemente complicaría mucho más el código que dejarlo igual para ambos ...

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>

(Nuevamente: esto es solo un ejemplo, demostrando que la técnica funciona. El fragmento de código JS debe interpretarse como un pseudocódigo.) ¡Una implementación real y pulida, siempre que se mantenga la simplicidad del enfoque, es muy bienvenida! )

(Ver también en CodePen ...)

Answer 5

SIN JQUERY , solo CSS

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

Después de un poco de lucha, este simple código realmente funcionó para mí. Obtuve una instancia de Codemirror redimensionable verticalmente con el desplazamiento funcionando correctamente.

Answer 6

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

Si alguien está interesado en una versión más corta y jQuery de @ mindplay.dk responda (por cierto, gracias por esto).