2012-06-20 26 views
10

Me gustaría tener varias instancias de CKEditor basadas en la misma configuración, pero con diferentes alturas. He intentado establecer config con la altura predeterminada, la creación de la primera instancia, a continuación, anulando la altura & la creación de la segunda instancia:¿Cómo configurar CKEditor para múltiples instancias con diferentes alturas?

var config = { 
    ..... 
    height:'400' 
}; 

$('#editor1').ckeditor(config); 
config.height = '100'; 
$('#editor2').ckeditor(config); 

... pero consigo dos instancias CKeditor que ambos tienen 100px altura .

También probé esto:

CKEDITOR.replace('editor2',{ 
    height: '100' 
}); 

.. me dieron mensajes de error que la instancia ya existía. Busqué alrededor de un poco & encontré a alguien en una situación similar recibió el consejo de que tiene que destruir() la instancia antes de reemplazar(), pero eso parece demasiado complicado para simplemente establecer una altura inicial altura.

Al final he creado dos configuraciones diferentes & copiadas sobre la propiedad toolbar_Full:

var config1 = { 
    height:'400', 
    startupOutlineBlocks:true, 
    scayt_autoStartup:true, 
    toolbar_Full:[ 
     { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] }, 
     { name: 'editing', items : [ 'Find','Replace','-' ] }, 
     { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] }, 
     { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] }, 
     '/', 
     { name: 'links', items : [ 'Link','Unlink','Anchor' ] }, 
     { name: 'insert', items : [ 'Image','HorizontalRule' ] }, 
     { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] }, 
     { name: 'colors', items : [ 'TextColor','BGColor' ] }, 
     { name: 'tools', items : [ 'Maximize', 'ShowBlocks' ] }, 
     { name: 'document', items : [ 'Source' ] } 
    ] 
} 

var config2 = { 
    height:'100', 
    startupOutlineBlocks:true, 
    scayt_autoStartup:true 
}; 
config2.toolbar_Full = config1.toolbar_Full; 

$('#editor1').ckeditor(config1); 
$('#editor2').ckeditor(config2); 

¿hay una manera mejor? ¿Algo que me falta? Hay this question pero no se publicaron lo suficiente como para ser útiles, & this very similar question no se ha respondido. ¡Gracias!

Actualización:

Ésta parece ser una peculiaridad manejo de sincronización/config de CKEditor - la configuración se lee & aplicó más tarde (supongo que después de DOM marco del editor se ha establecido) en lugar de cuando el editor se crea por primera vez.

Por lo tanto, cualquier cambio en los ajustes de configuración hicieron inmediatamente después de la primera editor se instancia con .ckeditor() son efectivamente aplicado por el editor en algún momento de los siguientes varios milisegundos. Yo diría que esto no es un comportamiento normal o lógico.

Por ejemplo, puede obtener el comportamiento esperado en mi primer ejemplo (anulando la propiedad config.height después de que se haya creado una instancia del primer editor) al retrasar la segunda instancia de CKEditor con setTimeout(). Firefox necesitaba ~ 100ms, IE necesitaba 1ms. Wacky & mal.

CKEditor debe leer las configuraciones de configuración cuando se crea la primera instancia de cada editor. Por ahora, todos deben evitar esa peculiaridad.

Respuesta

19

La forma más fácil para inicializar dos editores con alturas personalizados es:

$('#editor1').ckeditor({ height: 100 }); 
$('#editor2').ckeditor({ height: 200 }); 

o sin jQuery:

CKEDITOR.replace('editor1', { height: 100 }); 
CKEDITOR.replace('editor2', { height: 200 }); 

yo sepa, no es posible cambiar la altura del editor sobre la marcha.

Si estos métodos no funcionaban para usted, entonces estaba haciendo lo mismo.

Actualización:

En respuesta a su comentario - su pregunta, de hecho, no se trataba de CKEditor, pero en lugar de compartir un objeto con sólo dos propiedades diferentes. Así que se puede tratar de esta manera:

var configShared = { 
     startupOutlineBlocks:true, 
     scayt_autoStartup:true, 
     // etc. 
    }, 
    config1 = CKEDITOR.tools.prototypedCopy(configShared), 
    config2 = CKEDITOR.tools.prototypedCopy(configShared); 
config1.height = 100; 
config2.height = 200; 

CKEDITOR.replace('editor1', config1); 
CKEDITOR.replace('editor2', config2); 

CKEDITOR.tools.prototypedCopy es una herramienta que crea nuevo objeto con el prototipo al que más pasó. Por lo tanto, comparten todas las propiedades, excepto las que sobrescribes más adelante.

Actualización 2:

Ésta es la actualización de la sección "Actualizar" en la pregunta :).

No hay ninguna peculiaridad en el tiempo o error de CKEditor o en absoluto; es JavaScript puro y cómo BOM/DOM y navegadores funcionan más algún enfoque práctico.

Lo primero es que el 90% de BOM/DOM es sincrónico, pero hay algunas cosas que no lo son. Debido a que todo este editor debe tener naturaleza asincrónica. Es por eso que ofrece tantos eventos.

En segundo lugar, en el objeto JS se pasan por referencia y, como queremos que CKEditor se inicialice muy rápidamente, debemos evitar tareas innecesarias. Uno de ellos es copiar el objeto de configuración (sin una buena razón). Por lo tanto, para guardar algunos mseg (y debido a que los complementos asíncronos también se cargan), CKEditor amplía el objeto de configuración pasado al establecer su prototipo en el objeto que contiene las opciones predeterminadas.

Resumiendo - Sé que esto puede parecer un error, pero así es como funcionan las bibliotecas JS/BOM/DOM. Estoy bastante seguro de que muchos otros métodos asincrónicos de libs se ven afectados por el mismo problema.

+0

todavía tengo todos los demás ajustes de configuración, aunque - por lo que yo puedo decir, su sugerencia no permite el uso de los otros ajustes de configuración en mi pregunta original, ¿verdad? – Wick

+0

He actualizado mi respuesta, ¿es útil ahora? :) – Reinmar

+0

¡Buen trabajo en la función PrototypedCopy()! Solo estoy en desacuerdo con que mi pregunta "no se tratara sobre CKEditor" - tu respuesta de clonar el objeto de configuración es una solución, pero el hecho es que mi pregunta es sobre el capricho de CKEditor con la configuración de configuración ... – Wick

0

La solución anterior de Reinmar funciona para mí, sin embargo, decidí dar una solución más que antes.

Es muy simple, todo lo que necesita saber es que ckeditor crea el elemento de contenido div para cada instancia con casi el mismo ID, la única diferencia es el valor incremental. Entonces, si tiene 2,3,4 instancias, la única diferencia será el número ordinal. Código está aquí:

CKEDITOR.on('instanceReady', function(){ 
    $('#cke_1_contents').css('height','200px'); 
}); 

Este evento se activará para cada instancia que tenga, por lo que si desea ajustar la altura para todos los casos se podría crear variable global y utilizarlo como x en #cke_"+x+"contents, cada acontecimiento vez que se active aumente x para 1, verifique qué instancia en la fila es simple y luego configure la altura.

var x=1; 
CKEDITOR.on('instanceReady', function(){ 
    if(x==1) h='200px'; 
    else if(x==2)h='400px'; 
    else if(x==3)h='700px'; 
    $('#cke_'+x+'_contents').css('height',h); 
    x++; 
}); 

Ésta no es la mejor solución, pero se está trabajando, el problema es que realmente ver el contenido div cambio de tamaño.

2

Añadir este obtendrá la barra de herramientas diferentes para ambos CKeditor en una sola página

<script> 

    CKEDITOR.on('instanceCreated', function (event) { 
     var editor = event.editor, 
      element = editor.element; 

     if (element.is('h1', 'h2', 'h3') || element.getAttribute('id') == 'editorTitle') { 
      editor.on('configLoaded', function() { 
       // Remove unnecessary plugins to make the editor simpler. 
       editor.config.removePlugins = 'find,flash,' + 
        'forms,iframe,image,newpage,removeformat,' + 
        'smiley,specialchar,stylescombo,templates'; 

       // Rearrange the layout of the toolbar. 
       editor.config.toolbarGroups = [ 
        { name: 'editing', groups: ['basicstyles'] }, 
        { name: 'undo' }, 
        //{ name: 'clipboard', groups: ['selection', 'clipboard'] }, 
        { name: 'styles' }, 
        { name: 'colors' }, 
        { name: 'tools' } 
        // { name: 'about' } 
       ]; 
      }); 
     } 
    }); 

</script> 
+0

Esta respuesta parece ser subestimada mucho: ¿hay algún problema con el enfoque mostrado? ¿Consumo excesivo de recursos, acaparamiento del rendimiento, violación de las mejores prácticas? – collapsar

0

Si agrega los ckeditor.js a la página más de una vez demasiado, puede causar este problema. El código del script debe definirse una vez en cada página. <script type="text/javascript" src="Fck342/ckeditor.js"></script>

0

sólo tiene que utilizar CKEDITOR.replaceAll();

Cuestiones relacionadas