Come impostare CKEditor per istanze multiple con altezze diverse?

Question

Mi piacerebbe avere più istanze di CKEditor basate sulle stesse impostazioni di configurazione, ma con altezze diverse. Ho provato ad installare config con l'altezza di default, impostare il primo esempio, allora ignorando l'altezza & impostazione del 2 ° esempio:

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

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

... ma ho due istanze CKEditor che entrambi hanno 100px di altezza .

Ho anche provato questo:

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

.. ho avuto messaggi di errore che l'istanza già esisteva. Ho cercato un po 'su & e ho trovato qualcuno in una situazione simile a cui ho consigliato di distruggere() l'istanza prima di replace(), ma sembra troppo complicato per impostare semplicemente un'altezza iniziale diversa .

Alla fine ho creato due configurazioni differenti & copiati sulla proprietà 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); 

C'è un modo migliore? Qualcosa che mi manca? C'è this question ma non hanno pubblicato abbastanza per essere utile, & this very similar question non ha avuto risposta. Grazie!

Aggiornamento:

Questo sembra essere un capriccio di movimentazione tempistica/config di CKEditor - config viene letta & applicato dopo (sto cercando di indovinare dopo quadro DOM del redattore è stato istituito), piuttosto che quando l'editor viene prima istanziato.

Quindi, qualsiasi modifica alle impostazioni di configurazione effettuate subito dopo il primo redattore è istanziato con .ckeditor() sono effettivamente applicata dal curatore ad un certo punto nei seguenti diversi millisecondi. Direi che questo non è un comportamento normale o logico.

Ad esempio, è possibile ottenere il comportamento previsto nel mio primo esempio (ignorando la proprietà config.height dopo l'istanza del primo editor) per ritardare la seconda istanza di CKEditor con setTimeout(). Firefox aveva bisogno di ~ 100ms, IE aveva bisogno di 1ms. Wacky & sbagliato.

CKEditor dovrebbe leggere le impostazioni di configurazione al momento della prima istanza di ogni editor. Per ora, tutti devono aggirare quella stranezza.

Answer 1

Il modo più semplice per inizializzare due redattori con altezze personalizzate è:

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

o senza jQuery:

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

per quanto ne so, non è possibile cambiare l'altezza del redattore al volo.

Se questi metodi non funzionassero per te, allora stavi sbagliando qualcos'altro.

Aggiornamento:

Rispondere al tuo commento - la tua domanda in realtà non si trattava di CKEditor, ma piuttosto di condividere un oggetto con solo due proprietà diverse. Così si può provare in questo modo:

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 è uno strumento che crea nuovo oggetto con il prototipo impostato sul passato uno. Quindi condividono tutte le proprietà tranne quelle che si ignorano in seguito.

Aggiornamento 2:

Questo è l'aggiornamento per la sezione "Aggiorna" nella questione :).

Non c'è stranezza nei tempi di CKEditor o bug o qualsiasi cosa - è puro JavaScript e come BOM/DOM e browser funzionano più un approccio pratico.

Prima cosa: il 90% di BOM/DOM è sincrono, ma ci sono un paio di cose che non lo sono. A causa di questo intero editor deve avere natura asincrona. Ecco perché fornisce così tanti eventi.

Seconda cosa: nell'oggetto JS vengono passati per riferimento e poiché CKEditor deve inizializzarsi molto rapidamente, dovremmo evitare attività non necessarie. Uno di questi è copiare oggetti di configurazione (senza una buona ragione). Quindi per salvare alcuni msec (e anche a causa del caricamento di plugin asincroni) CKEditor estende l'oggetto config passato solo impostando il suo prototipo su oggetto contenente opzioni predefinite.

Riepilogando - So che questo può sembrare un bug, ma è come funzionano le librerie JS/BOM/DOM. Sono abbastanza sicuro che molti metodi asincroni di altre librerie sono influenzati dallo stesso problema.

Answer 2

La soluzione di cui sopra da Reinmar sta funzionando per me, tuttavia ho deciso di fornire un'altra soluzione che ho usato prima di questa.

È davvero semplice, tutto ciò che è necessario sapere è che ckeditor crea un elemento div content per ogni istanza con quasi lo stesso id, l'unica differenza è il valore incrementale. Quindi se hai 2,3,4 .. l'unica differenza sarà il numero ordinale. Codice è qui:

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

Questo evento viene attivato per ogni istanza che hai, quindi se si desidera impostare l'altezza per tutte le istanze è possibile creare variabile globale e utilizzarlo come x in #cke_"+x+"contents, ogni evento tempo viene attivato aumentare x per 1, verificare quale istanza in fila è con semplice se e quindi impostare l'altezza.

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

Questo non è la soluzione migliore, ma si sta lavorando, il problema è che non si vedrà il contenuto div ridimensionamento.

Answer 3

Aggiungere questo si otterrà la diversa barra degli strumenti sia per CKEditor in singola pagina

<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> 

Answer 4

Se si aggiungono i ckeditor.js alla pagina più di una volta di troppo, può causare questo problema. Il codice dello script deve essere definito una volta in ogni pagina. <script type="text/javascript" src="Fck342/ckeditor.js"></script>

Answer 5

basta usare CKEDITOR.replaceAll();