Arquivo ckeditor.styles.js personalizado com o módulo WYSIWYG

Estou tentando personalizar o menu suspenso "Estilo da fonte" no CKeditor por meio do módulo WYSIWYG, mas não vejo como especificar um caminho para ckeditor.styles.js no editor de perfil do módulo wysiwyg.

Consulte este post para obter mais informações - ele diz que deve haver uma maneira de especificar um local para esse arquivo.

Existem duas maneiras (certamente existem mais) de adicionar estilos de estilos personalizados do ckeditor usando o módulo drupal wyswiwyg.

1. Usando o módulo contribuído Estilos Ckeditor
2. Usando hook_wysiwyg_editor_settings_alter da seguinte maneira:

(código "inspirado" pelo módulo ckeditor_styles)

Em um módulo personalizado, adicione a implementação 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";
  }
}

e inclua um arquivo chamado ckeditor_styles.js em um subdiretório js do módulo customizado:

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' } },
  ]);

Eu faço isso nos meus sites Drupal o tempo todo! @ A resposta de marblegravy é um primeiro passo, mas você também pode adicionar regras de CSS correspondentes ao seu CKEditor, de modo que, quando seu editor estiver aplicando um de seus estilos personalizados, ele realmente os aplique e o editor possa visualizar o alterações, sem ter que salvar!

Recentemente, escrevi um post muito detalhado sobre todas as partes móveis aqui: http://drupalwoo.com/content/how-customize-ckeditor-drupal-7-site

O que eu cubro no tutorial é

1. Como personalizar a barra de ferramentas

2. Criando o arquivo ckeditor.styles.js personalizado. Aqui está uma amostra:

    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 seu CKEditor para que ele saiba onde encontrar esse arquivo de estilos personalizados

4. Implementando o css correspondente a esses estilos e informando o CKEditor sobre eles também!

5. Como usar a instalação como um editor!

Espero que seja útil! Deixe-nos saber se você conseguir isso!

Acabei de escrever um pequeno módulo personalizado. Estou usando o módulo Wysiwyg (em vez do módulo CKEditor). Isso permite que estilos de ckeditor.styles.js no meu tema sejam carregados.

/**
 * 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";
  }
}

Você pode definir estilos nas configurações do perfil WYSIWYG (admin / config / content / wysiwyg, editar o perfil desejado).

Guia "CSS"> "Classes CSS"

Opcionalmente, defina classes CSS para a lista suspensa "Estilo da fonte".

Digite uma classe em cada linha no formato: [label] = [element]. [Class]. Exemplo: Title = h1.title

Se deixadas em branco, as classes CSS são importadas automaticamente das folhas de estilo carregadas. Usa a configuração stylesSet internamente.

Basta colocar seu arquivo ckeditor.styles.js substituído na raiz do seu tema, vá para / admin / config / content / ckeditor / edit / e , em seguida, para cada um dos seus perfis, edite- os e abra o conjunto de campos css , localize o Estilos predefinidos e escolha Usar tema ckeditor.styles.js .

Na ajuda do campo * Predefined Style * s:

Defina o local do arquivo ckeditor.styles.js. É usado pela lista suspensa Estilo disponível na barra de ferramentas padrão. Copie o arquivo sites / all / modules / contrib / ckeditor / ckeditor.styles.js no diretório de temas (themes / seven / ckeditor.styles.js) e ajuste-o de acordo com suas necessidades.