Archivo ckeditor.styles.js personalizado con módulo WYSIWYG

Estoy tratando de personalizar el menú desplegable "Estilo de fuente" en CKeditor a través del módulo WYSIWYG, pero no veo forma de especificar una ruta para ckeditor.styles.js en el editor de perfil del módulo wysiwyg.

Consulte esta publicación para obtener más información: dice que debería haber una manera de especificar una ubicación para ese archivo.

Estas son 2 formas (ciertamente hay más) para agregar estilos de ckeditor personalizados utilizando el módulo drupal wyswiwyg.

1. Usando el módulo contribuido Estilos Ckeditor
2. Usando hook_wysiwyg_editor_settings_alter de la siguiente manera:

(código "inspirado" por el módulo ckeditor_styles)

En un módulo personalizado, agregue la implementación hook_wysiwyg_editor_settings_alter:

/**
 * Implements hook_wysiwyg_editor_settings_alter().
 *
 * @param type $settings
 * @param type $context
 */
function MYCUSTOMMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  // We only add the settings to ckeditor wysiwyg profiles.
  if ($context['profile']->editor == 'ckeditor') {
    $format = $context['profile']->format;
    $path = drupal_get_path('module', 'MYCUSTOMMODULE') . '/js';
    $settings['stylesSet'] = "mycustomstyleset:/$path/ckeditor_styles.js";
  }
}

y agregue un archivo llamado ckeditor_styles.js en un subdirectorio js del módulo personalizado:

CKEDITOR.stylesSet.add('mycustomstyleset',
  [
    { name : 'Red', element : 'span', styles : {'color' : 'red' } },
    { name : 'CSS Style', element : 'span', attributes: { 'class' : 'my_style' } },
    { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } },
    { name : 'Heading 4' , element : 'h4' },
    { name : 'Blue Button', element : 'div', attributes : { 'class' : 'blue-button' } },
  ]);

¡Hago esto para mis sitios de Drupal todo el tiempo! La respuesta de @ marblegravy es un primer paso, pero es posible que también desee hacer cosas como agregar las reglas CSS correspondientes a su CKEditor, de modo que cuando su editor aplique uno de sus estilos personalizados, el editor realmente los aplique y el editor pueda obtener una vista previa del cambios, sin tener que guardar!

Recientemente escribí una publicación de blog muy detallada sobre todas las partes móviles aquí: http://drupalwoo.com/content/how-customize-ckeditor-drupal-7-site

Lo que cubro en el tutorial es

1. Cómo personalizar la barra de herramientas

2. Crear el archivo ckeditor.styles.js personalizado. Aquí hay una muestra:

    CKEDITOR.addStylesSet( 'drupal',
    [
    /* Block Styles */
    { name : 'Heading 2'        , element : 'h2' },
    { name : 'Heading 3'        , element : 'h3' },
    { name : 'Heading 4'        , element : 'h4' },
    { name : 'Paragraph'        , element : 'p' },
    { name : 'Blue Image Button',
    element : 'div',
    attributes : {
    'class' : 'blue-image-button' }
    },
   
    /* Inline Styles */
    { name : 'Inline Quotation'    , element : 'q' },
     ...

3. Configurando su CKEditor para que sepa dónde encontrar este archivo de estilos personalizados

4. ¡Implementando el CSS correspondiente a estos estilos, y dejando que CKEditor también los conozca!

5. ¡Cómo usar la configuración como editor!

Espero que sea útil! ¡Háganos saber si esto funciona!

Acabo de escribir un pequeño módulo personalizado. Estoy usando el módulo Wysiwyg (en lugar del módulo CKEditor). Esto permite que se carguen los estilos de ckeditor.styles.js en mi tema.

/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $path = drupal_get_path('theme', 'THEMENAME');
    $settings['stylesSet'] = "drupal:/$path/ckeditor.styles.js";
  }
}

Puede definir estilos en la configuración del perfil WYSIWYG (admin / config / content / wysiwyg, edite el perfil deseado).

Pestaña "CSS"> "Clases CSS"

Opcionalmente, defina clases CSS para la lista desplegable "Estilo de fuente".

Ingrese una clase en cada línea en el formato: [etiqueta] = [elemento]. [Clase]. Ejemplo: Título = h1.title

Si se deja en blanco, las clases CSS se importan automáticamente de las hojas de estilo cargadas. Utiliza la configuración stylesSet internamente.

Simplemente coloque su archivo ckeditor.styles.js anulado en la raíz de su tema, luego vaya a / admin / config / content / ckeditor / edit / , luego para cada uno de sus perfiles, edítelos y abra el conjunto de campos css , encuentre el Campo Estilos predefinidos y elija Usar tema ckeditor.styles.js .

Desde la ayuda de campo * Estilo predefinido * s:

Defina la ubicación del archivo ckeditor.styles.js. Lo utiliza la lista desplegable Estilo disponible en la barra de herramientas predeterminada. Copie el archivo sites / all / modules / contrib / ckeditor / ckeditor.styles.js en su directorio de temas (themes / seven / ckeditor.styles.js) y ajústelo a sus necesidades.