Comment faire pour que CKEditor rende du texte avec un CSS?
J'ai un CKEditor utilisé pour éditer un texte dans une page web.
dans la page web, le texte rend dans son contexte et suit donc le formatage CSS de la page.
ma question Est Comment dire à CKEditor d'appliquer une feuille de style CSS au rendu de l'éditeur ? Sans bien sûr 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 CKEditor Config.le fichier js ne contient que la configuration de la barre d'outils.
CKeditor ne pas appliquer les paramètres de ".Actucontenu " à son rendu ...
6 réponses
La meilleure réponse à cette question serait:
CKEDITOR.config.contentsCss = '/mycustom.css';
CKEDITOR.replace('myfield');
parce que vous aimeriez probablement avoir des styles différents dans différents éditeurs. Si vous modifiez le principal content.css comme Jalil , vous ne seriez pas en mesure de le faire.
j'ai trouvé un moyen très facile de répondre à ma question :
le content.css fichier dans CKEditor répertoire !
je n'avais qu'à le mettre dans le style que je voulais être appliqué à l'intérieur de l'Éditeur :
body {
color: #416a8b;
font-family: Arial;
font-size: 18px;
font-weight: 400;
text-align: left;
}
C'est tout: -)
voir cette publication:
CKEditor: Classe ou l'ID de l'éditeur corps
la solution Postée par nemisj placera le nom de la classe sur le corps de la zone modifiable de l'éditeur.
vous pouvez faire cela dans une fonction onload d'éditeur. Appelez avant de vous appeler .remplacer.
CKEDITOR.on( 'instanceReady', function( ev )
{
CKEDITOR.instances.e1.document.$.body.className = "foo";
});
parfois, lorsque j'ai besoin de définir certains styles au lecteur CKEditor à la volée, par exemple en fonction des paramètres de l'utilisateur, j'utilise les fonctions setStyle() et setStyles() sur l'objet body de l'éditeur. Code échantillon:
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);
CKEditor utilise un DIV avec des éléments HTML normaux pour représenter le texte que vous éditez. Juste un coup d'oeil le contenu de ce DIV et d'écrire une feuille de style.
bien sûr, cela ne fonctionne que si vous ne modifiez pas la sortie de CKEditor avant de la rendre.
si vous changez le contenu.vous pourriez découvrir qu'il a été caché. Ce n'est pas une tâche triviale de le rafraîchir dans votre navigateur depuis CKEDITOR.timestamp n'est ajouté qu'aux fichiers js. J'ai trouvé la solution suivante:
// force to update all plugin files and styles
CKEDITOR.timestamp = '25062014';
CKEDITOR.config.contentsCss = CKEDITOR.config.contentsCss + '?' + CKEDITOR.timestamp;