Drupal 7:WYSIWYG 模块自定义 CKEditor 配置
Drupal中的WYSIWYG模块是将客户端HTML编辑器(更好地称为WYSIWYG编辑器)集成到Drupal站点的好方法。它支持各种不同的编辑器,所有这些编辑器都可以根据用户使用的输入格式进行配置。使用单个模块将许多不同的内容编辑器合并到一个站点的能力意味着它们的配置界面几乎相同。这也意味着如果现有站点需要不同的编辑器,这不是灾难。您只需要确保设置了正确的配置选项以允许类似的用户体验。
我通常在我的Drupal站点上使用WYSIWYG模块和CKEditor的组合,这往往是一个很好的组件组合。CKEditor的大部分配置都可以通过WYSIWYG模块完成,但我发现需要在最近的项目中添加额外的配置选项。这是使用hook_wysiwyg_editor_settings_alter()WYSIWYG模块中的钩子完成的。这个钩子是从一个被调用的函数中调用的wysiwyg_get_editor_config(),用于在WYSIWYGJavaScript写入页面之前设置配置。这个钩子有两个参数:
$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 for Font Awesome. config.protectedSource.push( /<\/i\>/g ); // Allow tags through. config.protectedSource.push( /.*?<\/div\>/g ); //激活自动AFC模式(如果尚未设置)。 config.allowedContent= true; };我上面讨论的选项的优点在于它们都适用于所见即所得模块的Drupal6和Drupal7版本。这意味着您可以在旧项目中使用几乎完全相同的模块,而无需对WYSIWYG挂钩和编辑器配置细节进行任何更改。