Saltar al contenido

codemirror-textarea redimensionable como un área de texto estándar

Hola, tenemos la respuesta a tu búsqueda, continúa leyendo y la hallarás aquí.

Solución:

Algunas búsquedas en Google sugieren que no es compatible con CodeMirror, pero puede lograrlo con jQuery UI:

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

SIN JQUERY solo CSS

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

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

Hice este pequeño ejemplo.

Tenga en cuenta que esto cambia el tamaño solo verticalmente, ¿que es probablemente lo que realmente quiere? La capacidad de cambio de tamaño 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 debajo se reduzca si cambia el tamaño.

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

Sin embargo, 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 desea.

Alternativamente, considere probar este complemento de @Sphinxxx que se derivó de este ejemplo.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *