Skip to content

Commit

Permalink
Issue backdrop#101: Initial Backdrop image and link plugins for CKEdi…
Browse files Browse the repository at this point in the history 
…tor.
  • Loading branch information
@quicksketch
quicksketch committed Jun 17, 2015
1 parent 3badaaf commit 589d1ba
Show file tree
Hide file tree
Showing 11 changed files with 774 additions and 522 deletions.
36 changes: 31 additions & 5 deletions core/modules/ckeditor5/core/modules/ckeditor/ckeditor.api.php
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<?php

/**
* @file
* Documentation for CKEditor module APIs.
Expand Down Expand Up @@ -132,19 +131,44 @@ function hook_ckeditor_plugins_alter(array &$plugins) {
* @param $css
* An array of CSS files, passed by reference. This is a flat list of file
* paths relative to the Backdrop root.
* @param $editor
* The editor object as returned by editor_load(), for which these files are
* being loaded.
* @param $format
* The corresponding text format object as returned by filter_format_load()
* for which the current text editor is being displayed.
*
* @see _ckeditor_theme_css()
*/
function hook_ckeditor_css_alter(array &$css, $editor, $format) {
function hook_ckeditor_css_alter(array &$css, $format) {
$css[] = backdrop_get_path('module', 'mymodule') . '/css/mymodule-ckeditor.css';
}

/**
* Modify the raw CKEditor settings passed to the editor.
*
* This hook can be useful if you have created a CKEditor plugin that needs
* additional settings passed to it from Backdrop. In particular, because
* CKEditor loads JavaScript files directly, use of Backdrop.t() in these
* plugins will not work. You may use this hook to provide translated strings
* for your plugin.
*
* @param array $settings
* The array of settings that will be passed to CKEditor.
* @param $format
* The filter format object containing this editor's settings.
*/
function hook_ckeditor_settings_alter(array &$settings, $format) {
foreach ($format->editor_settings['toolbar'] as $row) {
foreach ($row as $button_group) {
// If a particular button is enabled, then add extra settings.
if (array_key_exists('MyPlugin', $button_group)) {
// Pull settings from the format and pass to the JavaScript settings.
$settings['backdrop']['myplugin_settings'] = $format->editor_settings['myplugin_settings'];
// Translate a string for use by CKEditor.
$settings['backdrop']['myplugin_help'] = t('A translated string example that will be used by CKEditor.');
}
}
}
}

/**
* @} End of "addtogroup hooks".
*/
Expand Down Expand Up @@ -172,6 +196,8 @@ function hook_ckeditor_css_alter(array &$css, $editor, $format) {
*
* @see hook_ckeditor_plugins()
* @see ckeditor_add_settings()
*
* @ingroup callbacks
*/
function hook_ckeditor_PLUGIN_plugin_check($format, $plugin_name) {
// Automatically enable this plugin if the Underline button is enabled.
Expand Down
98 changes: 55 additions & 43 deletions core/modules/ckeditor5/core/modules/ckeditor/ckeditor.module
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ function ckeditor_editor_info() {
),
'file' => 'ckeditor.admin.inc',
'settings callback' => 'ckeditor_settings_form',
'js settings callback' => 'ckeditor_add_settings',
'js settings callback' => 'ckeditor_get_settings',
);

return $editors;
Expand Down Expand Up @@ -81,6 +81,7 @@ function ckeditor_library_info() {
),
'dependencies' => array(
array('filter', 'filter'),
array('system', 'backdrop.ajax'),
array('ckeditor', 'ckeditor'),
),
);
Expand Down Expand Up @@ -175,21 +176,6 @@ function ckeditor_ckeditor_plugins() {
'label' => t('Redo'),
'image_rtl' => $image_prefix . '/redo-rtl.png',
),
'Link' => array(
'label' => t('Link'),
'required_html' => array(array(
'tags' => array('a'),
'attributes' => array('href', 'title'),
)),
'optional_html' => array(array(
'tags' => array('a'),
'attributes' => array('target', 'download', 'hreflang', 'media', 'rel', 'type'),
)),
),
'Unlink' => array(
'label' => t('Unlink'),
'required_html' => array(array('tags' => array('a'))),
),
'Anchor' => array(
'image_rtl' => $image_prefix . '/anchor-rtl.png',
'label' => t('Anchor'),
Expand Down Expand Up @@ -282,52 +268,64 @@ function ckeditor_ckeditor_plugins() {
);

// The backdropimage plugin replaces normal image functionality.
/*
$plugins['backdropimage'] = array(
'path' => backdrop_get_path('module', 'ckeditor') . '/js/plugins/backdropimage',
'file' => 'plugin.js',
'buttons' => array(
'BackdropImage' => array(
'label' => t('Image'),
'required_html' => array('img'),
'required_html' => array(
array(
'tags' => array('img'),
'attributes' => array('src', 'alt', 'data-file-id'),
),
),
'image' => $image_prefix . '/image.png',
),
),
);
*/

// The backdropcaption plugin provides consistent behaviors for image captions.
/*
$plugins['backdropcaption'] = array(
'path' => backdrop_get_path('module', 'ckeditor') . '/js/plugins/backdropcaption',
$plugins['backdropimagecaption'] = array(
'path' => backdrop_get_path('module', 'ckeditor') . '/js/plugins/backdropimagecaption',
'file' => 'plugin.js',
'css' => array(backdrop_get_path('module', 'ckeditor') . '/css/ckeditor-caption.css'),
'enabled callback' => 'ckeditor_image_plugin_check',
'required_html' => array(
array(
'tags' => array('img'),
'attributes' => array('data-caption', 'data-placeholder'),
),
array(
'tags' => array('figure', 'figcaption'),
'attributes' => array('src', 'alt'),
),
)
);
*/

// The backdropbreak plugin provides support for Backdrop's <!--break--> comment.
/*
$plugins['backdropbreak'] = array(
'path' => backdrop_get_path('module', 'ckeditor') . '/js/plugins/backdropbreak',
// The backdroplink plugin replaces normal link funcitonality.
$plugins['backdroplink'] = array(
'path' => backdrop_get_path('module', 'ckeditor') . '/js/plugins/backdroplink',
'file' => 'plugin.js',
'buttons' => array(
'BackdropBreak' => array(
'label' => t('Teaser break'),
'image' => $image_prefix . '/pagebreak.png',
'image_rtl' => $image_prefix . '/pagebreak-rtl.png',
'BackdropLink' => array(
'label' => t('Link'),
'required_html' => array(array(
'tags' => array('a'),
'attributes' => array('href'),
)),
'image' => $image_prefix . '/link.png',
),
'BackdropUnlink' => array(
'label' => t('Link'),
'required_html' => array(array(
'tags' => array('a'),
'attributes' => array('href'),
)),
'image' => $image_prefix . '/unlink.png',
),
),
);
*/

// Webkit support for resizing images.
$plugins['dragresize'] = array(
'path' => backdrop_get_path('module', 'ckeditor') . '/js/plugins/dragresize',
'file' => 'plugin.js',
'enabled callback' => 'ckeditor_image_plugin_check',
//'css' => array(backdrop_get_path('module', 'ckeditor') . '/js/plugins/dragresize/_source.css'),
);

return $plugins;
}
Expand Down Expand Up @@ -357,7 +355,7 @@ function ckeditor_image_plugin_check($format) {
* @param $existing_settings
* Settings that have already been added to the page by filters.
*/
function ckeditor_add_settings($format, $existing_settings) {
function ckeditor_get_settings($format, $existing_settings) {
global $language;

// Loop through all available plugins and check to see if it has been
Expand Down Expand Up @@ -454,7 +452,7 @@ function ckeditor_add_settings($format, $existing_settings) {
'extraPlugins' => implode(',', array_keys($external_plugins)),
'removePlugins' => 'image',
'removeButtons' => '',
// Empty custom config must be an array.
// Empty custom config must be a string.
// See http://docs.ckeditor.com/#!/guide/dev_configuration.
'customConfig' => '',
// Empty styles must be an array.
Expand All @@ -476,7 +474,21 @@ function ckeditor_add_settings($format, $existing_settings) {
list($settings['allowedContent'], $settings['disallowedContent']) = ckeditor_get_acf_settings($format);

// These settings are used specifically by Backdrop.
$settings['externalPlugins'] = $external_plugins;
$settings['backdrop'] = array(
'externalPlugins' => $external_plugins,
'format' => $format->format,
);
if (isset($external_plugins['backdroplink'])) {
$settings['backdrop']['linkDialogUrl'] = url('editor/dialog/link');
}
if (isset($external_plugins['backdropimage'])) {
$settings['backdrop']['imageDialogUrl'] = url('editor/dialog/image');
}
if (isset($external_plugins['backdropimagecaption'])) {
$settings['backdrop']['captionFilterEnabled'] = array_key_exists('filter_image_caption', $format->filters);
$settings['backdrop']['alignFilterEnabled'] = array_key_exists('filter_image_align', $format->filters);
}
backdrop_alter('ckeditor_settings', $settings, $format);

return $settings;
}
Expand Down
14 changes: 4 additions & 10 deletions core/modules/ckeditor5/core/modules/ckeditor/js/ckeditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,6 @@

attach: function (element, format) {
this._loadExternalPlugins(format);
// Also pass settings that are Backdrop-specific.
format.editorSettings.drupal = {
format: format.format
};

// Set a title on the CKEditor instance that includes the text field's
// label so that screen readers say something that is understandable
// for end users.
Expand Down Expand Up @@ -71,15 +66,14 @@
},

_loadExternalPlugins: function (format) {
var externalPlugins = format.editorSettings.drupalExternalPlugins;
var externalPlugins = format.editorSettings.backdrop.externalPlugins;
// Register and load additional CKEditor plugins as necessary.
if (externalPlugins) {
for (var pluginName in externalPlugins) {
if (externalPlugins.hasOwnProperty(pluginName)) {
CKEDITOR.plugins.addExternal(pluginName, externalPlugins[pluginName], '');
CKEDITOR.plugins.addExternal(pluginName, Backdrop.settings.basePath + externalPlugins[pluginName]['path'] + '/', externalPlugins[pluginName]['file']);
}
}
delete format.editorSettings.drupalExternalPlugins;
}
}

Expand Down Expand Up @@ -123,14 +117,14 @@
var classes = dialogSettings.dialogClass ? dialogSettings.dialogClass.split(' ') : [];
classes.push('editor-dialog');
dialogSettings.dialogClass = classes.join(' ');
dialogSettings.autoResize = Backdrop.checkWidthBreakpoint(600);
dialogSettings.autoResize = true;

// Add a "Loading…" message, hide it underneath the CKEditor toolbar, create
// a Backdrop.ajax instance to load the dialog and trigger it.
var $content = $('<div class="ckeditor-dialog-loading"><span style="top: -40px;" class="ckeditor-dialog-loading-link"><a>' + Backdrop.t('Loading...') + '</a></span></div>');
$content.appendTo($target);
new Backdrop.ajax('ckeditor-dialog', $content.find('a').get(0), {
accepts: 'application/vnd.drupal-modal',
accepts: 'application/vnd.backdrop-dialog',
dialog: dialogSettings,
selector: '.ckeditor-dialog-loading-link',
url: url,
Expand Down
Binary file added core/modules/ckeditor5/core/modules/ckeditor/js/plugins/backdropimage/image.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 589d1ba

Please sign in to comment.