Question

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

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

由于

Answer 1

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

首先转到'CKEditor GLobal个人资料'/ admin / config / content / ckeditor / editg

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

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

接下来，进入个人'CKEditor个人资料'/ admin / config / content / ckeditor / edit / Advanced（我的名字叫'高级'，你的可能会有所不同。

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

'高级内容过滤器'手风琴非常重要。这很复杂。但是一个重要的功能。在这篇文章中谈论复杂的方式。谷歌那个。

扩展'CSS'手风琴。我喜欢将'Editor CSS'设置为使用'使用主题css'来获得准确的编辑体验。

向下滚动一些。展开“高级选项”，将“加载ckeditor.config.js”从主题路径'设置为'是'，以便最大程度地控制您的配置。（如果需要，可以使用“自定义JavaScript配置”。）

滚动到底部，然后点击“保存”按钮。

将名为'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编辑界面的“样式”下拉列表下添加一个按钮。（它只是添加了一个带有类的div来进行样式化）

清除你的Drupal Cache几次，以及你的浏览器（这些东西很难缓存）。

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

我还在'/ 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'手风琴中添加模板按钮。

Answer 2

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

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

2 个答案: