Drupal 7：WYSIWYG 模块自定义 CKEditor 配置

  • Z时代
  • 2024-01-10
  • 分类：综合

Drupal 中的 WYSIWYG 模块是将客户端 HTML 编辑器（更好地称为 WYSIWYG 编辑器）集成到 Drupal 站点的好方法。它支持各种不同的编辑器，所有这些编辑器都可以根据用户使用的输入格式进行配置。使用单个模块将许多不同的内容编辑器合并到一个站点的能力意味着它们的配置界面几乎相同。这也意味着如果现有站点需要不同的编辑器，这不是灾难。您只需要确保设置了正确的配置选项以允许类似的用户体验。

我通常在我的 Drupal 站点上使用 WYSIWYG 模块和 CKEditor 的组合，这往往是一个很好的组件组合。CKEditor 的大部分配置都可以通过 WYSIWYG 模块完成，但我发现需要在最近的项目中添加额外的配置选项。这是使用hook_wysiwyg_editor_settings_alter()WYSIWYG 模块中的钩子完成的。这个钩子是从一个被调用的函数中调用的wysiwyg_get_editor_config()，用于在 WYSIWYG JavaScript 写入页面之前设置配置。这个钩子有两个参数：

  • $settings：这是传递给编辑器的 JavaScript 设置的关联数组。这可以更改以更改编辑器中的内容。

  • $context：这是另一个关联数组，包含有关正在加载的环境的信息，并将包含以下元素：

    • editor : 正在使用的编辑器的名称（例如 ckeditor）。

    • profile：编辑器配置文件对象，从数据库加载。

    • theme : 当前编辑器主题的名称，而不是当前站点主题。

可以进入并更改config.js在 CKEditor 文件夹中找到的文件。但是，这可能会导致将来出现问题，特别是如果您想将 CKEditor 更新到最新版本。您将需要重新整合您所做的任何更改。出于这个原因，钩子方法必须更加健壮和面向未来。

我们现在可以在一个可以做各种不同事情的模块中创建这个钩子的实现。$settings 变量的元素直接映射到 CKEditor 配置设置，这意味着 CKEditor 的任何设置都可以通过寻址正确的元素来更改。CKEditor 文档详细说明了可以使用此设置将哪些设置应用于编辑器。例如，要更改 WYSIWYG 编辑器的高度，您需要设置$settings 数组的height元素。高度值默认为 200px 并接受任何 CSS 兼容值。下面是钩子的一个示例实现，它检查正在加载的 CKEditor，然后将编辑器窗口的高度设置为 100px。

/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function MY_MODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    // 将 WYSIWYG 元素的高度设置为 100px 高。
    $settings['height'] = '100px';
  }
}

我通常在这个钩子中做的第一件事是加载一个外部 JavaScript 文件，以便可以使用 JavaScript 为编辑器设置某些选项。这样做是有意义的，因为 CKEditor 的设置无论如何都是基于 JavaScript 的，因此您将在本机设置配置选项。这也意味着您不需要了解内外部的 WYSIWYG 挂钩，因此您可以允许您的设计人员向该文件添加选项，而无需编辑任何 PHP。$settings 数组的customConfig元素允许您将自定义 JavaScript 文件添加到编辑器配置中。当找到包含 CKEditor 的 WYSIWYG 文本区域时，此文件与其他配置文件一起加载。

/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function MY_MODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    // 使用 ckeditor，设置自定义配置文件。
    $settings['customConfig'] = base_path() . drupal_get_path('module', 'MY_MODULE') . '/MY_MODULE_ckeditor_config.js';
  }
}

然后所需要做的就是创建 JavaScript 选项文件并将其放入模块目录中。下面是一个典型的 customConfig 文件的例子，它设置了几个选项。在这种情况下，我们允许将两种类型的 HTML 标签添加到 WYSIWYG 输入，并激活自动内容剥离。allowedContent 选项用于防止由于粘贴的文本（通常来自 Word 等程序）而导致格式错误。

/**
 * @file MY_MODULE_ckeditor_config.js
 *
 * Custom configuration for CKEditor.
 */
 
/**
 * Set up custom configurations for the CKEditor editor.
 */
CKEDITOR.editorConfig = function(config) {
 
  // Allow <i></i> for Font Awesome.
  config.protectedSource.push( /<i class=\".*\"\><\/i\>/g );
 
  // Allow <div></div> tags through.
  config.protectedSource.push( /<div class=\".*\"\>.*?<\/div\>/g );
 
  // 激活自动 AFC 模式（如果尚未设置）。
 config.allowedContent= true;
};

我上面讨论的选项的优点在于它们都适用于所见即所得模块的 Drupal 6 和 Drupal 7 版本。这意味着您可以在旧项目中使用几乎完全相同的模块，而无需对 WYSIWYG 挂钩和编辑器配置细节进行任何更改。

以上是 Drupal 7：WYSIWYG 模块自定义 CKEditor 配置 的全部内容， 来源链接： utcz.com/z/353583.html

回到顶部