2014-07-16 7 views
7

Sono nuovo di CKeditor, cerco di averlo impostato sulla mia pagina. Ho un modulo HTML piuttosto elaborato che contiene circa 13 textareas. Ho provato ad avere 13 editor caricati sulla pagina, il che funziona ma è solo disordinato e travolgente per un utente. Mi piacerebbe se la barra degli strumenti dell'editor venisse visualizzata solo se gli utenti fanno clic (si focalizzano) sulla casella textarea e quindi nascondono la barra degli strumenti quando fanno clic.Come indirizzare tutti gli elementi textarea per CKeditor Inline

Mi piace molto l'editor in linea che hanno più o meno quello che sto cercando, ma ho faticato a far sì che il ckeditor venisse indirizzato e caricato su tutti i miei 13 elementi di aree di testo tramite inline. Ho letto così tanti siti ma non riesco a trovare una soluzione al mio problema. Ho provato la formula seguente, che dovrebbe indirizzare gli elementi tramite la loro classe ma sembra che in linea non possa tollerare più istanze contemporaneamente. Qualcuno potrebbe sapere di un modo per lavorare in linea su tutti gli elementi di textareas sulla pagina?

Questo è il codice che ho provato ma non va bene.

var elements = CKEDITOR.document.find('.foo'), 
    i = 0, 
    element; 

while ((element = elements.getItem(i++)) { 
    CKEDITOR.inline(element); 
} 
+0

Benvenuti Daniel & buona domanda. Ricordati di selezionare la risposta che ritieni migliore come risposta. A proposito, ho provato il codice @silksnare pubblicato dopo aver postato la tua soluzione provvisoria. Il breve frammento pubblicato da silksnare ha sostituito tutte le textareas in tutta l'applicazione che sto costruendo, quindi se qualcuno mi chiedesse, suggerirei questo oltre l'approccio che hai preso (anche se ovviamente il modo in cui lo hai fatto funzionerà anche, non è così mantenibile). – MER

risposta

8

È possibile utilizzare il metodo "ogni" in jquery per scorrere ciascuna area di testo e assegnarlo all'editor in linea. So che questo funziona, perché l'ho appena implementato in un progetto di lavoro. Come così:

$("textarea").each(function(){ 
    CKEDITOR.inline(this); 
}); 
0

Come una soluzione, ho utilizzato lo script seguente per caricare un'istanza per ogni elemento di testo. Ad ogni elemento textarea è stato assegnato un ID univoco, come potete vedere qui sotto, finora questo sembra essere l'unico modo per aggirare il mio problema.

<script> 
CKEDITOR.inline('inline_editor1'); 
CKEDITOR.inline('inline_editor2'); 
CKEDITOR.inline('inline_editor3'); 
CKEDITOR.inline('inline_editor4'); 
CKEDITOR.inline('inline_editor5'); 
CKEDITOR.inline('inline_editor6'); 
CKEDITOR.inline('inline_editor7'); 
CKEDITOR.inline('inline_editor8'); 
CKEDITOR.inline('inline_editor9'); 
CKEDITOR.inline('inline_editor10'); 
CKEDITOR.inline('inline_editor11'); 
CKEDITOR.inline('inline_editor12'); 
CKEDITOR.inline('inline_editor13'); 
</script> 
0

Questo funziona ... Funziona mio ...

<html> 
 
<head> 
 
<title>Untitled Document</title> 
 
</head> 
 
<body> 
 

 
<form id="form1" name="form1" method="post" action=""> 
 

 
    <table width="90%" border="0" cellspacing="0" cellpadding="0"> 
 
    <tr> 
 
     <td><textarea name="editor1" id="editor1" cols="45" rows="5" class="editor"></textarea></td> 
 
    </tr> 
 
    <tr> 
 
     <td><textarea name="editor2" id="editor2" cols="45" rows="5" class="editor"></textarea></td> 
 
    </tr> 
 
    <tr> 
 
     <td><textarea name="editor3" id="editor3" cols="45" rows="5" class="editor"></textarea></td> 
 
    </tr> 
 
    </table> 
 
</form> 
 
<script type="text/javascript" src="js/jquery.js"></script> 
 
<script type="text/javascript" src="ckeditor/ckeditor.js"></script> 
 
<script type="text/javascript"> 
 

 
    $("textarea.editor").each(function(){ 
 
    var txt = $(this).attr('name'); 
 
    CKEDITOR.replace(txt , { 
 
     extraPlugins : 'tableresize', 
 
     toolbar : 'Full', 
 
     skin: 'v2', 
 
     enterMode \t \t : 1, 
 
     shiftEnterMode \t : 2, 
 
     height :'400', 
 
    }); 
 
    }); 
 
\t \t 
 
    </script> 
 
</body> 
 
</html>

Problemi correlati