Come rendere CKEditor renderizzato il testo con un CSS?

Question

Ho un CKEditor usato per modificare un testo in una pagina web.

Nella pagina Web, il testo esegue il rendering nel suo contesto e pertanto segue la formattazione CSS della pagina.

La mia domanda è come dire a CKEditor di applicare un foglio di stile CSS al rendering dell'editor? Senza ovviamente cambiare la sorgente generata?

Il mio codice:

<textarea class="ActuContent" name="actu-content" cols="100" rows="20">my content></textarea> 
<script type="text/javascript"> 
     window.onload = function() 
     { 
       CKEDITOR.replace('actu-content'); 
     }; 
</script> 

e la mia CSS:

.ActuContent{ 
    padding:10px 10px 10px 10px; 
    color:#416a8b; 
    font-size:1.6em; 
} 

E il mio CKEditor config file contiene solo la configurazione della barra degli strumenti.

CKEditor non si applica le impostazioni di ".ActuContent" per la sua resa ...

Answer 1

La migliore risposta reale a questa domanda sarebbe:

CKEDITOR.config.contentsCss = '/mycustom.css'; 
CKEDITOR.replace('myfield'); 

Perché probabilmente vorresti avere stili diversi in diversi editor. Se cambi il content.css principale come Jalil did, non saresti in grado di farlo.

Answer 2

CKEditor utilizza un DIV con normali elementi HTML per rappresentare il testo che si sta modificando. Basta dare un'occhiata al contenuto di questo DIV e scrivere un foglio di stile appropriato.

Ovviamente, questo funziona solo se non si modifica l'output di CKEditor prima del rendering.

Answer 3

Vedere questo annuncio:

CKEditor: Class or ID for editor body

La soluzione postato da nemisj imposterà il nome della classe sul corpo della zona editabile dell'editor.

È possibile eseguire questa operazione in una funzione di caricamento su editor. Chiama questo prima di chiamare .replace.

CKEDITOR.on('instanceReady', function(ev) 
    { 
     CKEDITOR.instances.e1.document.$.body.className = "foo"; 
    }); 

Answer 4

Ho trovato un modo molto semplice per rispondere alla mia domanda:

il file nella directory content.css CKEditor!

ho solo dovuto mettere nello stile che volevo da applicare all'interno del redattore:

body { 
    color: #416a8b; 
    font-family: Arial; 
    font-size: 18px; 
    font-weight: 400; 
    text-align: left; 
} 

Questo è tutto :-)

Answer 5

A volte quando ho bisogno di impostare alcuni stili su CKEditor al volo, ad esempio in base alle impostazioni dell'utente, utilizzo le funzioni setStyle() e setStyles() nell'oggetto corpo dell'editor.Esempio di codice:

var editor = CKEDITOR.instances.editor1; 
var size = ... // assign size value 
editor.document.getBody().setStyle('font-size',size); 

Un altro campione:

var editor = CKEDITOR.instances.editor1; 
var styles = { 
    "font-family": "Arial", 
    "color": "#333" 
}; 
editor.document.getBody().setStyles(styles); 

Answer 6

Se si modifica il file content.css si può scoprire che è stato memorizzato nella cache. Non è un'attività banale aggiornarla nel browser poiché CKEDITOR.timestamp viene aggiunto solo ai file js. Ho trovato la seguente soluzione:

// force to update all plugin files and styles 
CKEDITOR.timestamp = '25062014'; 
CKEDITOR.config.contentsCss = CKEDITOR.config.contentsCss + '?' + CKEDITOR.timestamp;