Agregar estilos personalizados a CKEditor

Question

Recientemente agregué CKEditor a mi aplicación y me gustaría incluir mis propias hojas de estilo CSS dentro del editor para poder seleccionarlas dentro del editor.

¿Cómo puedo lograr esto? Mi código hasta ahora se ve así:

<script type="text/javascript"> 

    CKEDITOR.replace('editor1',{ 
     uiColor : '#9AB8F3', 
    }); 

</script> 

Answer 1

Por favor, busque en respuesta @metavida para una mejor respuesta que esta

<script type="text/javascript"> 

    CKEDITOR.replace('editor1',{ 

      uiColor : '#9AB8F3', 
      stylesSet.add('default', [ 
       { name: 'My Custom Block', element: 'h3', styles: { color: 'Blue'} }, 
       { name: 'My Custom inline style', element: 'q'} 
      ]);  
    }); 

</script> 

Aunque si está usando esto en más de un lugar que' Será mejor considerar poner esto en el archivo stylescombo \ styles \ default.js y actualizar su archivo config.js en consecuencia según api.

Answer 2

Llegó tarde a la fiesta aquí, pero los estilos predeterminados están en _source/plugins/styles/styles/default.js. Podrías usar eso como tu configuración de estilo y agregar estilos y se agregaría efectivamente.

Answer 3

<script type="text/javascript"> 
    // This code could (may be should) go in your config.js file 
    CKEDITOR.stylesSet.add('my_custom_style', [ 
    { name: 'My Custom Block', element: 'h3', styles: { color: 'blue'} }, 
    { name: 'My Custom Inline', element: 'span', attributes: {'class': 'mine'} } 
    ]); 
    // This code is for when you start up a CKEditor instance 
    CKEDITOR.replace('editor1',{ 
    uiColor: '#9AB8F3', 
    stylesSet: 'my_custom_style' 
    }); 
</script> 

También puede leer la documentación completa de la sintaxis stylesSet.add:

• CKEditor 4 documentation
• CKEditor 3 documentation, como se ha mencionado Vicente.
• CKEditor 4 How Do I Customize the Styles Drop-Down List?
• CKEditor 3 How Do I Customize the Styles Drop-Down List?

Answer 4

Como ya se ha mencionado, hay una página que explica cómo configurar un conjunto de custom styles. Lo que la pequeña joya escondida en esa página (y no muy claro) es que en lugar de crear un conjunto con nombre de estilos, puede definir los estilos en línea en su configuración, como esto:

stylesSet : [ 
    { 
     name : 'Green Title', 
     element : 'h3', 
     styles : 
     { 
      'color' : 'Green' 
     } 
    } ], 

Answer 5

Esto funciona para mí

CKEDITOR.addCss('body{background:blue;}'); 

Answer 6

La mejor manera es utilizar este plugin: http://ckeditor.com/addon/stylesheetparser

pegarla en el interior directorio 'ckeditor/plugins', a continuación, incluir algo como esto en su 'ckeditor/config.js':

config.extraPlugins = 'stylesheetparser'; 
config.contentsCss = '/css/inline-text-styles.css'; 
config.stylesSet = []; 

Donde '/css/inline-text-styles.css' es una ruta a su propia carpeta CSS en su webroot, fuera de ckeditor. Eso te ahorra tener que mezclar css con javascript.