¿Cómo cambiar el tamaño del editor de CKEditor?

Como es un área de texto, probé cols = “50” en el atributo html pero no funciona.

Además, encontré la respuesta de la pregunta anterior. Él dijo que puedo hacer esto agregando. CKEDITOR.instances.myinstance.resize(1000, 900); Sin embargo, el tamaño aún no ha cambiado.

Aquí está el código que intenté, gracias.

Actualizado

        $(document).ready(function(){ $("#addlist").validate(); var editor = CKEDITOR.replace('editor1'); var div = document.getElementById('editor'); editor.resize($(div).width(),'900'); });    



File Name
(Naming Without .html eg MyTemplate1) :

intenta seguir

Para lograr esto, use la función de cambio de tamaño para definir las dimensiones de la interfaz del editor, asignando a la ventana un valor de ancho y alto en píxeles o unidades aceptadas por CSS.

 // Set editor width to 100% and height to 350px. editor.resize( '100%', '350' ) 

Mientras configura el valor de altura, use el parámetro isContentHeight para decidir si el valor se aplica a toda la interfaz del editor o solo al área de edición.

 // The height value now applies to the editing area. editor.resize( '100%', '350', true ) 

http://docs.cksource.com/CKEditor_3.x/Howto/Editor_Size_On_The_Fly

Solo ve a la carpeta ckeditor y encuentra config.js

  CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E'; config.height = '80vh'; }; 

Esto cambiará el tamaño de tu navegador en función del tamaño de la pantalla.

Para CKEditor 4.0, tuve que usar:

  CKEDITOR.replace('body', {height: 500}); 

// Esto ayudaría. Simplemente funciona para mí.

  

Aquí hay una función jQuery que usa el atributo cols = para cambiar el tamaño de la altura de ckeditor (escalar de 20px por fila)

 (function($) { jQuery.fn.cke_resize = function() { return this.each(function() { var $this = $(this); var rows = $this.attr('rows'); var height = rows * 20; $this.next("div.cke").find(".cke_contents").css("height", height); }); }; })(jQuery); CKEDITOR.on( 'instanceReady', function(){ $("textarea.ckeditor").cke_resize(); }) 

entonces su html como este cambiará el tamaño automáticamente

  

Usé esta solución (CKeditor4):

.cke_contents { height: 100% !important; }

fuente

Espero eso ayude 🙂

 Yes this worked perfectly We have to use config to override the styles   

en la versión 4.5 de ckeditor

puede forzar el cambio de altura mediante el uso


CKEDITOR.config.height = ‘800px’;


Tuve problemas para usar el método de cambio de tamaño en la versión 4.3.4.

Hice un truco y usé debajo de css: –

 .cke_reset {width:807px !important; } 

¡Trabajado como un encanto!

Use config para actualizar los estilos

 editor.config.width="100%"; editor.config.height="100px" 

CkEditor para cambiar el tamaño:

 CKEDITOR.replace('OnThisDateIwillLook', { toolbar: [['Bold', 'Italic', 'Underline'],], skin: 'v2', extraPlugins: 'autogrow', autoGrow_minHeight: 250, //autoGrow_maxHeight: auto, }); 

Como se indica en otras respuestas, la función resize () es lo que se debe usar. Para aquellos que se preguntan cómo se puede usar este código editor.resize( '100%', '350' ) consulte a continuación.

Supongamos que crea un editor para un área de texto con prueba de atributo de nombre. Luego puede llamar a la función resize () en la instancia del CKEditor de la siguiente manera:

 CKEDITOR.instances.test.resize( '100%', '80'); 
 CKEDITOR.config.width="80%"; CKEDITOR.config.height="500px" 

Usando jQuery ckeditor , la única forma en que finalmente me escucharía fue usando un truco:

  $('.ckeditor textarea').ckeditor(function () { editor = $('.ckeditor textarea').ckeditorGet(); $('.cke_inner').css({ 'width': '802px' }); }); 
 editor.resize('100%', '350'); editor.resize('550', '350'); 

Respondiendo a esto porque me llevó mucho tiempo descubrir cómo resolver esto usando jquery. Esto es similar a algunas de las respuestas anteriores, pero contiene la creación de la instancia para ser completa.

En mi opinión, esto no es elegante, y no tengo idea de por qué CKeditor no es inherente a su tamaño desde su contenedor principal, lo que sería mucho más deseable.

  var new_editor = $('#selected_textarea').ckeditor(function(){ var set_editor_height = $('#parent_container').height() $('.cke_contents').css({ 'height': set_editor_height }); }); 

Esto debería funcionar para selectores de clase, no solo por ID.

Para establecer la altura del CKEditor en el momento de la inicialización, puede seguir el procedimiento enumerado.

  

Este está perfectamente trabajado.

  

Si necesita un 100% de altura para su editor;

 setInterval(function(){ $('#cke_1_contents').css('height', $('#parent_div_id').outerHeight()); }, 700);