使用WYSIWYG模块自定义ckeditor.styles.js文件

我试图通过WYSIWYG模块自定义CKeditor中的“字体样式”下拉菜单，但是我看不到在wysiwyg模块的配置文件编辑器中为ckeditor.styles.js指定路径的方法。

请参阅此帖子以获取更多信息-它说应该有一种方法可以指定该文件的位置。

这是使用drupal wyswiwyg模块添加自定义ckeditor样式集的2种方法（当然还有更多）。

1. 使用贡献的模块Ckeditor Styles
2. 如下使用hook_wysiwyg_editor_settings_alter：

（代码为ckeditor_styles模块“启发”）

在定制模块中，添加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";
  }
}

并在自定义模块的子目录js中添加一个名为ckeditor_styles.js的文件：

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

我一直在我的Drupal网站上这样做！@marblegravy的答案是第一步，但您可能还想做一些事情，例如向CKEditor添加相应的CSS规则，以便当您的编辑器应用一种自定义样式时，该编辑器实际上会应用它们，并且编辑器可以预览更改，无需保存！

我最近在这里写了一篇有关所有运动部件的非常详细的博客文章：http : //drupalwoo.com/content/how-customize-ckeditor-drupal-7-site

我在本教程中介绍的是

1. 如何自定义工具栏

2. 创建定制的ckeditor.styles.js文件。这是一个示例：

    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. 配置您的CKEditor，使其知道在哪里可以找到此自定义样式文件

4. 为这些样式实现相应的CSS，并让CKEditor也了解这些样式！

5. 如何将设置用作编辑器！

希望对您有所帮助！让我们知道您是否可以正常工作！

我只是写了一个很小的自定义模块。我正在使用Wysiwyg模块（而不是CKEditor模块）。然后，这将启用我主题中来自ckeditor.styles.js的样式。

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

您可以在“所见即所得”配置文件设置中定义样式（admin / config / content /所见即所得，编辑所需的配置文件）。

“ CSS”标签>“ CSS类”

（可选）为“字体样式”下拉列表定义CSS类。

在每一行中以以下格式输入一个类：[label] = [element]。[class]。示例：标题= h1.title

如果留为空白，则会从加载的样式表中自动导入CSS类。在内部使用stylesSet设置。

只需将覆盖的ckeditor.styles.js文件放在主题的根目录中，然后转到/ admin / config / content / ckeditor / edit /，然后为每个配置文件进行编辑并打开css字段集，找到预定义样式字段，然后选择使用主题ckeditor.styles.js。

从* 预定义样式 * s字段帮助中：

定义ckeditor.styles.js文件的位置。默认工具栏中的“样式”下拉列表使用它。将sites / all / modules / contrib / ckeditor / ckeditor.styles.js文件复制到主题目录（themes / seven / ckeditor.styles.js），并根据需要进行调整。