js/ckeditor.admin.js | 20 +++-- js/ckeditor.js | 25 ++++-- .../ckeditor/Plugin/editor/editor/CKEditor.php | 88 +++++++++++--------- 3 files changed, 74 insertions(+), 59 deletions(-) diff --git a/js/ckeditor.admin.js b/js/ckeditor.admin.js index f7653ab..190e789 100644 --- a/js/ckeditor.admin.js +++ b/js/ckeditor.admin.js @@ -9,7 +9,7 @@ Drupal.behaviors.ckeditorAdmin = { var $context = $(context); $(context).find('.ckeditor-toolbar-configuration').once('ckeditor-toolbar', function() { var $wrapper = $(this); - var $textareaWrapper = $(this).find('.form-item-editor-settings-toolbar').hide(); + var $textareaWrapper = $(this).find('.form-item-editor-settings-toolbar-toolbar').hide(); var $textarea = $textareaWrapper.find('textarea'); var $toolbarAdmin = $(settings.ckeditor.toolbarAdmin); var sortableSettings = { @@ -18,12 +18,12 @@ Drupal.behaviors.ckeditorAdmin = { forcePlaceholderSize: true, tolerance: 'pointer', cursor: 'move', - stop: adminToolbarValue, + stop: adminToolbarValue }; $toolbarAdmin.insertAfter($textareaWrapper).find('.ckeditor-buttons').sortable(sortableSettings); $toolbarAdmin.find('.ckeditor-multiple-buttons li').draggable({ connectToSortable: '.ckeditor-toolbar-active .ckeditor-buttons', - helper: 'clone', + helper: 'clone' }); $toolbarAdmin.on('click.ckeditorAddRow', 'a.ckeditor-row-add', adminToolbarAddRow); $toolbarAdmin.on('click.ckeditorAddRow', 'a.ckeditor-row-remove', adminToolbarRemoveRow); @@ -35,9 +35,10 @@ Drupal.behaviors.ckeditorAdmin = { * Add a new row of buttons. */ function adminToolbarAddRow(event) { - var $rows = $(this).closest('.ckeditor-toolbar-active').find('.ckeditor-buttons'); + var $this = $(this); + var $rows = $this.closest('.ckeditor-toolbar-active').find('.ckeditor-buttons'); $rows.last().clone().empty().insertAfter($rows.last()).sortable(sortableSettings); - $(this).siblings('a').show(); + $this.siblings('a').show(); redrawToolbarGradient(); event.preventDefault(); } @@ -46,16 +47,17 @@ Drupal.behaviors.ckeditorAdmin = { * Remove a row of buttons. */ function adminToolbarRemoveRow(event) { - var $rows = $(this).closest('.ckeditor-toolbar-active').find('.ckeditor-buttons'); + var $this = $(this); + var $rows = $this.closest('.ckeditor-toolbar-active').find('.ckeditor-buttons'); if ($rows.length === 2) { - $(this).hide(); + $this.hide(); } if ($rows.length > 1) { var $lastRow = $rows.last(); var $disabledButtons = $wrapper.find('.ckeditor-toolbar-disabled .ckeditor-buttons'); $lastRow.children(':not(.ckeditor-multiple-button)').prependTo($disabledButtons); $lastRow.sortable('destroy').remove(); - redrawToolbarGradient() + redrawToolbarGradient(); } event.preventDefault(); } @@ -92,7 +94,7 @@ Drupal.behaviors.ckeditorAdmin = { }); }, detach: function (context, settings) { - + // @todo } }; diff --git a/js/ckeditor.js b/js/ckeditor.js index e1f6758..d72cc04 100644 --- a/js/ckeditor.js +++ b/js/ckeditor.js @@ -1,25 +1,32 @@ -(function ($, Drupal) { +(function ($, Drupal, drupalSettings, CKEDITOR) { "use strict"; Drupal.editors.ckeditor = { - attach: function (field, format) { + attach: function (element, format) { // Register additional Drupal plugins as necessary. if (format.editorSettings.externalPlugins) { for (var pluginName in format.editorSettings.externalPlugins) { if (format.editorSettings.externalPlugins.hasOwnProperty(pluginName)) { - CKEDITOR.plugins.addExternal(pluginName, Drupal.settings.basePath + format.editorSettings.externalPlugins[pluginName]['path'] + '/', format.editorSettings.externalPlugins[pluginName]['file']); + CKEDITOR.plugins.addExternal(pluginName, drupalSettings.basePath + format.editorSettings.externalPlugins[pluginName]['path'] + '/', format.editorSettings.externalPlugins[pluginName]['file']); } } delete format.editorSettings.externalPlugins; } - - // Add Replace CKEditor on the field. - CKEDITOR.replace(field.id, format.editorSettings); + return !!CKEDITOR.replace(element, format.editorSettings); }, - detach: function (field, format) { - CKEDITOR.instances[field.id].destroy(); + detach: function (element, format, trigger) { + var editor = CKEDITOR.dom.element.get(element).getEditor(); + if (editor) { + if (trigger === 'serialize') { + editor.updateElement(); + } + else { + editor.destroy(); + } + } + return !!editor; } }; -})(jQuery, Drupal); +})(jQuery, Drupal, drupalSettings, CKEDITOR); diff --git a/lib/Drupal/ckeditor/Plugin/editor/editor/CKEditor.php b/lib/Drupal/ckeditor/Plugin/editor/editor/CKEditor.php index d28cd0b..489e4c3 100644 --- a/lib/Drupal/ckeditor/Plugin/editor/editor/CKEditor.php +++ b/lib/Drupal/ckeditor/Plugin/editor/editor/CKEditor.php @@ -7,11 +7,10 @@ namespace Drupal\ckeditor\Plugin\editor\editor; -use Drupal\Component\Plugin\PluginBase; +use Drupal\editor\Plugin\EditorBase; use Drupal\Core\Annotation\Plugin; use Drupal\Core\Annotation\Translation; use Drupal\editor\Plugin\Core\Entity\Editor; -use Drupal\editor\Plugin\EditorInterface; @@ -20,44 +19,42 @@ use Drupal\editor\Plugin\EditorInterface; * * @Plugin( * id = "ckeditor", - * title = @Translation("CKEditor"), - * library = { - * "module" = "ckeditor", - * "name" = "drupal.ckeditor" - * } + * label = @Translation("CKEditor"), + * module = "ckeditor" * ) */ -class CKEditor extends PluginBase implements EditorInterface { +class CKEditor extends EditorBase { /** - * Implements \Drupal\editor\Plugin\EditorInterface::defaultSettings(). + * Implements \Drupal\editor\Plugin\EditorInterface::getDefaultSettings(). */ - function defaultSettings() { + function getDefaultSettings() { return array( 'toolbar' => array( - array( - 'Source', '|', 'Bold', 'Italic', '|', - 'NumberedList', 'BulletedList', 'Blockquote', '|', - 'JustifyLeft', 'JustifyCenter', 'JustifyRight', '|', - 'Link', 'Unlink', '|', 'Image', 'Maximize', + 'toolbar' => array( + array( + 'Source', '|', 'Bold', 'Italic', '|', + 'NumberedList', 'BulletedList', 'Blockquote', '|', + 'JustifyLeft', 'JustifyCenter', 'JustifyRight', '|', + 'Link', 'Unlink', '|', 'Image', 'Maximize', + ), ), + 'format_list' => array('p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'), + 'style_list' => array(), ), - 'format_list' => array('p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'), - 'style_list' => array(), ); } /** * Implements \Drupal\editor\Plugin\EditorInterface::settingsForm(). */ - function settingsForm(array &$form, array &$form_state, Editor $editor) { + function settingsForm(array $form, array &$form_state, Editor $editor) { $module_path = drupal_get_path('module', 'ckeditor'); $plugins = ckeditor_plugins(); - $elements['toolbar'] = array( + $form['toolbar'] = array( '#type' => 'fieldset', '#title' => t('Toolbar'), - '#parents' => array('editor_settings'), '#attached' => array( 'library' => array(array('ckeditor', 'drupal.ckeditor.admin')), 'js' => array( @@ -66,53 +63,54 @@ class CKEditor extends PluginBase implements EditorInterface { ), '#attributes' => array('class' => array('ckeditor-toolbar-configuration')), ); - $elements['toolbar']['toolbar'] = array( + $form['toolbar']['toolbar'] = array( '#type' => 'textarea', '#title' => t('Toolbar configuration'), - '#default_value' => json_encode($editor->settings['toolbar']), + '#default_value' => json_encode($editor->settings['toolbar']['toolbar']), '#attributes' => array('class' => array('ckeditor-toolbar-textarea')), ); - $elements['toolbar']['format_list'] = array( + $form['toolbar']['format_list'] = array( '#type' => 'textfield', '#title' => t('Format list'), - '#default_value' => implode(', ', $editor->settings['format_list']), + '#default_value' => implode(', ', $editor->settings['toolbar']['format_list']), '#description' => t('A list of tags that will be provided in the "Format" dropdown, separated by commas.') ); - $elements['toolbar']['style_list'] = array( + $form['toolbar']['style_list'] = array( '#type' => 'textarea', '#title' => t('Style list'), '#rows' => 4, - '#default_value' => implode("\n", $editor->settings['style_list']), + '#default_value' => implode("\n", $editor->settings['toolbar']['style_list']), '#description' => t('A list of classes that will be provided in the "Styles" dropdown, each on a separate line. These styles should be available in your theme\'s editor.css as well as in your theme\'s main CSS file.') ); - return $elements; + return $form; } /** - * Implements \Drupal\editor\Plugin\EditorInterface::settingsFormValidate(). + * Implements \Drupal\editor\Plugin\EditorInterface::settingsFormSubmit(). */ - function settingsFormValidate(array $form, array &$form_state) { - $settings = $form_state['values']['editor_settings']; - form_set_value($form['editor_settings']['toolbar']['toolbar'], json_decode($settings['toolbar'], FALSE), $form_state); + function settingsFormSubmit(array $form, array &$form_state) { + $toolbar_settings = &$form_state['values']['editor_settings']['toolbar']; + + $toolbar_settings['toolbar'] = json_decode($toolbar_settings['toolbar'], FALSE); $format_list = array(); - foreach (explode(',', $settings['format_list']) as $format) { + foreach (explode(',', $toolbar_settings['format_list']) as $format) { $format_list[] = trim($format); } - form_set_value($form['editor_settings']['toolbar']['format_list'], $format_list, $form_state); + $toolbar_settings['format_list'] = $format_list; - $styles = array(); - foreach (explode("\n", $settings['style_list']) as $style) { - $styles[] = trim($style); + $style_list = array(); + foreach (explode(',', $toolbar_settings['style_list']) as $style) { + $style_list[] = trim($style); } - form_set_value($form['editor_settings']['toolbar']['style_list'], $styles, $form_state); + $toolbar_settings['style_list'] = $style_list; } /** - * Implements \Drupal\editor\Plugin\EditorInterface::generateJsSettings(). + * Implements \Drupal\editor\Plugin\EditorInterface::attachSettings(). */ - function generateJsSettings(Editor $editor) { + function attachSettings(Editor $editor) { global $language; // Loop through all available plugins and check to see if it has been @@ -150,7 +148,7 @@ class CKEditor extends PluginBase implements EditorInterface { // Change the toolbar separators into groups and record needed plugins based // on use in the toolbar. $toolbar = array(); - foreach ($editor->settings['toolbar'] as $row_number => $row) { + foreach ($editor->settings['toolbar']['toolbar'] as $row_number => $row) { $button_group = array(); foreach ($row as $button_name) { if ($button_name === '|') { @@ -203,7 +201,7 @@ class CKEditor extends PluginBase implements EditorInterface { 'indentClasses' => array('indent1', 'indent2', 'indent3'), 'justifyClasses' => array('align-left', 'align-center', 'align-right', 'align-justify'), 'coreStyles_underline' => array('element' => 'span', 'attributes' => array('class' => 'underline')), - 'format_tags' => implode(';', $editor->settings['format_list']), + 'format_tags' => implode(';', $editor->settings['toolbar']['format_list']), 'removeDialogTabs' => 'image:Link;image:advanced;link:advanced', 'language' => isset($language->language) ? $language->language : '', 'resize_dir' => 'vertical', @@ -215,4 +213,12 @@ class CKEditor extends PluginBase implements EditorInterface { return $settings; } + /** + * Implements \Drupal\editor\Plugin\EditorInterface::attachLibraries(). + */ + function attachLibraries(Editor $editor) { + return array( + array('ckeditor', 'drupal.ckeditor'), + ); + } }