web-dev-qa-db-fra.com

Comment rendre CKEditor rendre le texte avec un CSS?

J'ai un éditeur de CKE utilisé pour éditer un texte dans une page Web.

Dans la page Web, le texte est restitué dans son contexte et suit donc le formatage CSS de la page.

Ma question est de savoir comment dire à CKEditor d’appliquer une feuille de style CSS au rendu de l’éditeur. Sans bien sûr changer le source généré?

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 fichier CKEditor Config.js contient uniquement la configuration de la barre d’outils.

CKeditor n'applique pas les paramètres de ".ActuContent" à son rendu ...

javascriptcssxhtmlckeditor
21
Jalil

La meilleure réponse à cette question serait:

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

Parce que vous voudriez probablement avoir différents styles dans différents éditeurs. Si vous modifiez le content.css principal comme Jalil l'a fait , vous ne pourrez pas le faire.

39
Rene

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

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

Je n'avais qu'à mettre 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 :-)

9
Jalil

Voir cette annonce:

CKEditor: Classe ou ID pour le corps de l'éditeur

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

Vous pouvez le faire dans une fonction de charge de l'éditeur. Appelez cela avant d'appeler .replace.

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

Parfois, lorsque j'ai besoin de définir certains styles dans CKEditor à la volée, par exemple, en fonction des paramètres utilisateur, j'utilise les fonctions setStyle() et setStyles() sur l'objet body 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 échantillon:

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

CKEditor utilise une DIV avec des éléments HTML normaux pour représenter le texte que vous modifiez. Il suffit de regarder le contenu de cette DIV et d’écrire une feuille de style appropriée.

Bien entendu, cela ne fonctionne que si vous ne modifiez pas la sortie de CKEditor avant de la rendre.

1
Aaron Digulla

Si vous modifiez le fichier content.css, vous découvrirez peut-être qu'il a été mis en cache. Ce n'est pas une tâche facile pour l'actualiser dans votre navigateur, car 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;
0
Sergey Payu