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.
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.
Respostas:
Existem duas maneiras (certamente existem mais) de adicionar estilos de estilos personalizados do ckeditor usando o módulo drupal wyswiwyg.
(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' } },
]);
mycustomstyleset:$base_url/$path/ckeditor_styles.js
$base_url
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 é
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' },
...
Configurando seu CKEditor para que ele saiba onde encontrar esse arquivo de estilos personalizados
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.