javascript - example - install ckeditor

¿Cómo hacer que CKEditor renderice texto con un CSS?

Question

Tengo un CKEditor utilizado para editar un texto en una página web.

En la página web, el texto se representa en su contexto y, por lo tanto, sigue el formato CSS de la página.

Mi pregunta es ¿cómo decirle a CKEditor que aplique una hoja de estilo CSS al renderizado del editor? ¿Sin cambiar por supuesto la fuente generada?

Mi código :

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

y mi CSS:

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

Y mi archivo CKEditor Config.js solo contiene la configuración de la barra de herramientas.

CKeditor no aplica la configuración de ".ActuContent" a su representación ...

Answer 1

A veces, cuando necesito establecer algunos estilos para el CKEditor sobre la marcha, por ejemplo, dependiendo de la configuración del usuario, uso las funciones setStyle() y setStyles() en el objeto del cuerpo del editor. Código de muestra:

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

Otra muestra:

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

Answer 2

CKEditor usa un DIV con elementos HTML normales para representar el texto que está editando. Solo eche un vistazo al contenido de este DIV y escriba una hoja de estilo apropiada.

Por supuesto, esto solo funciona si no modifica la salida de CKEditor antes de procesarlo.

Answer 3

Encontré una manera muy fácil de responder a mi pregunta:

El archivo content.css en el directorio CKEditor!

Solo tuve que poner el estilo que quería que se aplicara dentro del Editor:

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

Eso es todo :-)

Answer 4

La mejor respuesta real a esta pregunta sería:

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

Porque probablemente te gustaría tener diferentes estilos en diferentes editores. Si cambia el contenido principal.css como lo hizo Jalil , no podrá hacerlo.

Answer 5

Si cambia el archivo content.css, puede descubrir que se ha almacenado en caché. No es una tarea trivial actualizarlo en su navegador, ya que CKEDITOR.timestamp se agrega solo a los archivos js. Se me ocurrió la siguiente solución:

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

Answer 6

Ver esta publicación:

CKEditor: Clase o ID para el cuerpo del editor

La solución publicada por nemisj establecerá el nombre de la clase en el cuerpo del área editable del editor.

Puedes hacer esto en un editor de la función de carga. Llame a esto antes de llamar .replace.

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