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


Respostas:


6

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 realmente queria que isso funcionasse. Eu tive que usar um caminho completo em vez do caminho relativo para o arquivo stylesSet usado aqui, ou o wysiwyg desapareceria. Mesmo assim, o menu suspenso Estilos foi desativado e não consegui descobrir a causa.
digitgopher

não esqueça o global $ base_url: mycustomstyleset:$base_url/$path/ckeditor_styles.js
commonpike

@commonpike você não precisa$base_url
Felix Eve

4

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!

insira a descrição da imagem aqui

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

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


Onde você executa a etapa 3, informando o CKEditor sobre o arquivo ckeditor.styles.js personalizado .
Batandwa

5
Esta resposta não está correta. A pergunta é sobre como resolver isso usando o módulo Drupal Wysiwyg, mas o autor explica como resolvê-lo usando o módulo Drupal CKEditor. Duas coisas diferentes O módulo Wysiwyg não tem opção para adicionar arquivos custom.styles.js adicionais.
batigolix

4

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

Esta deve ser a resposta !!!
Alex Gill

0

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.


-1

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.


3
Esta resposta também assume a utilização do módulo ckeditor, o que não é o que a pergunta foi sobre
batigolix
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.