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

Respuestas:

6

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' } },
  ]);
batigolix
fuente
Realmente quería que esto funcionara. Tuve que usar una ruta completa en lugar de la ruta relativa al archivo stylesSet utilizado aquí, de lo contrario, el wysiwyg desaparecería. Aun así, el menú desplegable Estilos se deshabilitó y no pude averiguar la causa.
digitgopher
no olvides el global $ base_url: mycustomstyleset:$base_url/$path/ckeditor_styles.js
commonpike
@commonpike que no necesitas$base_url
Felix Eve
4

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

ingrese la descripción de la imagen aquí

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

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

Boriana Ditcheva
fuente
¿Dónde realiza el paso 3, informando a CKEditor sobre el archivo ckeditor.styles.js personalizado ?
Batandwa
55
Esta respuesta no es correcta. La pregunta es sobre cómo resolver esto usando el módulo Drupal Wysiwyg, pero el autor explica cómo resolverlo usando el módulo Drupal CKEditor. Dos cosas diferentes El módulo Wysiwyg no tiene opción para agregar archivos custom.styles.js adicionales
batigolix
4

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";
  }
}
usuario26794
fuente
¡Esta debería ser la respuesta!
Alex Gill
0

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.

digitgopher
fuente
-1

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.

salsa de mármol
fuente
3
Esta respuesta también supone el uso del módulo CKEDitor, que no es de lo que se trataba la pregunta
batigolix