Comment rendre le texte de rendu CKEditor avec un CSS?

Question

J'ai un CKEditor utilisé pour éditer un texte dans une page web.

Dans la page Web, le texte s'affiche dans son contexte et suit donc la mise en forme de la page CSS.

Ma question est de savoir comment dire à CKEditor d'appliquer une feuille de style CSS au rendu de l'éditeur? Sans changer la source générée?

Mon code:

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

et mon CSS:

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

Et mon dossier CKEditor Config.js ne contient la configuration de la barre d'outils.

CKeditor ne concerne pas les paramètres de « .ActuContent » à son rendu ...

Answer 1

La meilleure réponse à cette question réelle serait:

Parce que vous aimeriez probablement avoir des styles différents dans différents éditeurs.

Si vous changez le content.css principal comme Jalil did, vous ne seriez pas en mesure de le faire.

Answer 2

CKEditor utilise un DIV avec des éléments normaux HTML pour représenter le texte que vous modifiez. Jetez un oeil au contenu de cette DIV et écrivez une feuille de style appropriée.

Bien sûr, cela ne fonctionne que si vous ne modifiez pas la sortie de CKEditor avant de le rendre.

Answer 3

Voir cette annonce:

CKEditor: Class or ID for editor body

La solution publié par nemisj donnera le nom de la classe sur le corps de la zone modifiable de l'éditeur.

Vous pouvez le faire dans une fonction de chargement d'éditeur. Appelez ceci avant d'appeler .replace.

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

Answer 4

J'ai trouvé un moyen très facile de répondre à ma question:

le fichier dans le répertoire content.css CKEditor!

je ne devais mettre dans le style que je voulais appliquer dans l'éditeur:

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

C'est tout :-)

Answer 5

Parfois, lorsque j'ai besoin de définir certains styles dans le CKEditor à la volée, par exemple en fonction des paramètres utilisateur, j'utilise les fonctions setStyle() et setStyles() sur l'objet corps de l'éditeur.Exemple de code:

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

Un autre exemple:

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

Answer 6

Si vous modifiez le fichier content.css vous découvrirez peut-être qu'il a été mis en mémoire cache. Ce n'est pas une tâche triviale de l'actualiser dans votre navigateur puisque CKEDITOR.timestamp est ajouté uniquement aux fichiers js. Je suis venu avec la solution suivante:

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