如何在 Drupal 中将自定义 javascript 文件添加到 CKEditor 4？

Question

有没有办法，如何在Drupal 7平台上轻松加载CKEditor4中的JS文件？

我想在编辑器中添加一些功能，以最大限度地提高用户体验。

谢谢

Answer 1

扩展和自定义 ckeditor 的标准方法是使用 plugins and widgets（这是一种特殊类型的插件）。

Answer 2

要充分利用 CKEditor，您需要将其与您的主题集成。

先去'CKEditor GLobal profile'/admin/config/content/ckeditor/editg

确保将 'CKEditor' 的路径设置为 full-all '//cdn.ckeditor.com/4.4.3/full-all' 因为它包含您想要使用的大部分酷插件。

保留其余默认值。单击“更新全局配置文件”按钮/

接下来，进入individual 'CKEditor profile' /admin/config/content/ckeditor/edit/Advanced（我的叫'Advanced'你的可能不一样。

展开'Editor Appearance'手风琴。向下滚动一会儿，您将看到 'Plugins' 标题。勾选一些更高级的插件。向上滚动并将一些 'Available buttons' 向上拖动到 'Current toolbar' 中，当您将它们向上拖动到工具栏中时，它们中的大多数会自动工作。它足够聪明地推断出如果按钮在那里，你希望它加载那些东西。但其中一些需要该复选框。

'Advanced Content Filter' 手风琴很重要。这是非常复杂的。但是一个重要的功能。在这个 post 中谈论起来太复杂了。 Google那个。

展开'CSS'手风琴。我喜欢将 'Editor CSS' 设置为使用 'Use theme css' 以获得准确的编辑体验。

再向下滚动一些。将主题路径中的 'Advanced Options' set 'Load ckeditor.config.js' 扩展到 'Yes' 以最大程度地控制您的配置。（如果需要，可以使用 "Custom JavaScript configuration"）。

滚动到底部并单击 'Save' 按钮。

将名为 'ckeditor.config.js' 的文件添加到您的 'Theme' 文件夹中。把你的配置放在那里。

我的是这样告诉你的网站你的其他配置文件的路径在哪里：

CKEDITOR.editorConfig = function(config) {
  pathToTheme = config.customConfig.substring(0, config.customConfig.lastIndexOf("/"));
  config.templates_files = [ pathToTheme + '/js/ckeditor_templates/ckeditor_templates.js' ];
  config.templates_replaceContent = false;
  config.image2_alignClasses = [ 'image_left', 'image_center', 'image_right' ];
  config.image2_captionedClass = 'image_captioned';
}

在您的主题“/js/”文件夹中添加一个名为 'ckeditor.styles.js' 的文件。

最重要你必须把单词 'drupal' 添加到参数中。这是 Drupal 知道从哪里加载这些东西的唯一方法。

var stylesSet = [{name: 'Button', element: 'div', attributes: {'class': 'button'}}];

CKEDITOR.addStylesSet('drupal', stylesSet);

在上面的示例中，它会在您的 CKEditor 编辑界面的 'Style' 下拉菜单下添加一个按钮。（它只是添加了一个 div 和一个 class 供您设置样式）

清除您的 Drupal 缓存几次，以及您的浏览器（这些东西会被缓存得很厉害）。

看看你的编辑器。您很可能拥有自定义样式。如果没有，请查看您的浏览器控制台进行调试。

我还在 '/js/ckeditor_templates/ 文件夹中添加了一些模板。

CKEDITOR.addTemplates('default', {
  imagesPath: pathToTheme + '/js/ckeditor_templates/',
  templates: [
    {
      title: 'Image with text',
      image: 'imagewtext.gif',
      description: 'Could be used for staff',
      html: '<div class="imagewtext clearfix"><div class="imagewtext__image"><img src="http://placehold.it/150x200"/></div><div class="imagewtext__text"><h3 class="imagewtext__title">Name</h3><p>Position</p><br/></div></div><br/><br/>'
    }
  ]
});

模板非常强大。不要忘记在配置的 'Editor Appearance' 手风琴中添加模板按钮。

如何在 Drupal 中将自定义 javascript 文件添加到 CKEditor 4？

How to add custom javascript file to CKEditor 4 in Drupal?

ckeditor

drupal-7