From 450331152ad438d1db4c7032a108a23e8402c016 Mon Sep 17 00:00:00 2001 From: Nathaniel Catchpole Date: Thu, 25 Feb 2016 14:44:11 +0900 Subject: [PATCH] Issue #2645100 by thpoul, Wim Leers: CKEditorPluginCssInterface: Allow CKEditor plugins to add CSS to iframe CKEditor instances --- core/modules/ckeditor/ckeditor.module | 7 --- .../src/CKEditorPluginButtonsInterface.php | 1 + .../CKEditorPluginConfigurableInterface.php | 1 + .../src/CKEditorPluginContextualInterface.php | 1 + .../src/CKEditorPluginCssInterface.php | 44 ++++++++++++++ .../ckeditor/src/CKEditorPluginInterface.php | 1 + .../ckeditor/src/CKEditorPluginManager.php | 31 +++++++++- .../CKEditorPlugin/DrupalImageCaption.php | 12 +++- .../ckeditor/src/Plugin/Editor/CKEditor.php | 5 ++ .../src/Tests/CKEditorPluginManagerTest.php | 57 +++++++++++++++---- .../ckeditor/src/Tests/CKEditorTest.php | 14 ++++- .../src/Plugin/CKEditorPlugin/Llama.php | 7 ++- .../src/Plugin/CKEditorPlugin/LlamaCss.php | 51 +++++++++++++++++ 13 files changed, 209 insertions(+), 23 deletions(-) create mode 100644 core/modules/ckeditor/src/CKEditorPluginCssInterface.php create mode 100644 core/modules/ckeditor/tests/modules/src/Plugin/CKEditorPlugin/LlamaCss.php diff --git a/core/modules/ckeditor/ckeditor.module b/core/modules/ckeditor/ckeditor.module index 110481510e5..9179c056e0b 100644 --- a/core/modules/ckeditor/ckeditor.module +++ b/core/modules/ckeditor/ckeditor.module @@ -64,13 +64,6 @@ function ckeditor_ckeditor_css_alter(array &$css, Editor $editor) { if ($editor->getFilterFormat()->filters('filter_caption')->status) { $css[] = drupal_get_path('module', 'filter') . '/css/filter.caption.css'; } - - // Add the filter caption CSS if the text format associated with this text - // editor uses the filter_align filter. This is used by the included - // CKEditor DrupalImageCaption plugin. - if ($editor->getFilterFormat()->filters('filter_align')->status) { - $css[] = drupal_get_path('module', 'ckeditor') . '/css/plugins/drupalimagecaption/ckeditor.drupalimagecaption.css'; - } } /** diff --git a/core/modules/ckeditor/src/CKEditorPluginButtonsInterface.php b/core/modules/ckeditor/src/CKEditorPluginButtonsInterface.php index 494e345ab49..85586f32089 100644 --- a/core/modules/ckeditor/src/CKEditorPluginButtonsInterface.php +++ b/core/modules/ckeditor/src/CKEditorPluginButtonsInterface.php @@ -23,6 +23,7 @@ namespace Drupal\ckeditor; * @see \Drupal\ckeditor\CKEditorPluginInterface * @see \Drupal\ckeditor\CKEditorPluginContextualInterface * @see \Drupal\ckeditor\CKEditorPluginConfigurableInterface + * @see \Drupal\ckeditor\CKEditorPluginCssInterface * @see \Drupal\ckeditor\CKEditorPluginBase * @see \Drupal\ckeditor\CKEditorPluginManager * @see \Drupal\ckeditor\Annotation\CKEditorPlugin diff --git a/core/modules/ckeditor/src/CKEditorPluginConfigurableInterface.php b/core/modules/ckeditor/src/CKEditorPluginConfigurableInterface.php index a5084fdf5c9..f6d46ce31fc 100644 --- a/core/modules/ckeditor/src/CKEditorPluginConfigurableInterface.php +++ b/core/modules/ckeditor/src/CKEditorPluginConfigurableInterface.php @@ -20,6 +20,7 @@ use Drupal\editor\Entity\Editor; * @see \Drupal\ckeditor\CKEditorPluginInterface * @see \Drupal\ckeditor\CKEditorPluginButtonsInterface * @see \Drupal\ckeditor\CKEditorPluginContextualInterface + * @see \Drupal\ckeditor\CKEditorPluginCssInterface * @see \Drupal\ckeditor\CKEditorPluginBase * @see \Drupal\ckeditor\CKEditorPluginManager * @see \Drupal\ckeditor\Annotation\CKEditorPlugin diff --git a/core/modules/ckeditor/src/CKEditorPluginContextualInterface.php b/core/modules/ckeditor/src/CKEditorPluginContextualInterface.php index 5bd397fe4eb..82354e4e55c 100644 --- a/core/modules/ckeditor/src/CKEditorPluginContextualInterface.php +++ b/core/modules/ckeditor/src/CKEditorPluginContextualInterface.php @@ -24,6 +24,7 @@ use Drupal\editor\Entity\Editor; * @see \Drupal\ckeditor\CKEditorPluginInterface * @see \Drupal\ckeditor\CKEditorPluginButtonsInterface * @see \Drupal\ckeditor\CKEditorPluginConfigurableInterface + * @see \Drupal\ckeditor\CKEditorPluginCssInterface * @see \Drupal\ckeditor\CKEditorPluginBase * @see \Drupal\ckeditor\CKEditorPluginManager * @see \Drupal\ckeditor\Annotation\CKEditorPlugin diff --git a/core/modules/ckeditor/src/CKEditorPluginCssInterface.php b/core/modules/ckeditor/src/CKEditorPluginCssInterface.php new file mode 100644 index 00000000000..0ee181f8972 --- /dev/null +++ b/core/modules/ckeditor/src/CKEditorPluginCssInterface.php @@ -0,0 +1,44 @@ +getDefinitions()); @@ -182,4 +183,32 @@ class CKEditorPluginManager extends DefaultPluginManager { } } } + + /** + * Retrieves enabled plugins' iframe instance CSS files, keyed by plugin ID. + * + * @param \Drupal\editor\Entity\Editor $editor + * A configured text editor object. + * + * @return string[] + * Enabled plugins CKEditor CSS files, with plugin IDs as keys and CSS file + * paths relative to the Drupal root (as implemented by getCssFiles()) as + * values. + * + * @see \Drupal\ckeditor\CKEditorPluginCssInterface::getCssFiles() + */ + public function getCssFiles(Editor $editor) { + $enabled_plugins = array_keys($this->getEnabledPluginFiles($editor, TRUE)); + $css_files = array(); + + foreach ($enabled_plugins as $plugin_id) { + $plugin = $this->createInstance($plugin_id); + if ($plugin instanceof CKEditorPluginCssInterface) { + $css_files[$plugin_id] = $plugin->getCssFiles($editor); + } + } + + return $css_files; + } + } diff --git a/core/modules/ckeditor/src/Plugin/CKEditorPlugin/DrupalImageCaption.php b/core/modules/ckeditor/src/Plugin/CKEditorPlugin/DrupalImageCaption.php index f78869bc1ce..1cb885a3847 100644 --- a/core/modules/ckeditor/src/Plugin/CKEditorPlugin/DrupalImageCaption.php +++ b/core/modules/ckeditor/src/Plugin/CKEditorPlugin/DrupalImageCaption.php @@ -11,6 +11,7 @@ use Drupal\Component\Plugin\PluginBase; use Drupal\editor\Entity\Editor; use Drupal\ckeditor\CKEditorPluginInterface; use Drupal\ckeditor\CKEditorPluginContextualInterface; +use Drupal\ckeditor\CKEditorPluginCssInterface; /** * Defines the "drupalimagecaption" plugin. @@ -21,7 +22,7 @@ use Drupal\ckeditor\CKEditorPluginContextualInterface; * module = "ckeditor" * ) */ -class DrupalImageCaption extends PluginBase implements CKEditorPluginInterface, CKEditorPluginContextualInterface { +class DrupalImageCaption extends PluginBase implements CKEditorPluginInterface, CKEditorPluginContextualInterface, CKEditorPluginCssInterface { /** * {@inheritdoc} @@ -69,6 +70,15 @@ class DrupalImageCaption extends PluginBase implements CKEditorPluginInterface, ); } + /** + * {@inheritdoc} + */ + public function getCssFiles(Editor $editor) { + return array( + drupal_get_path('module', 'ckeditor') . '/css/plugins/drupalimagecaption/ckeditor.drupalimagecaption.css' + ); + } + /** * {@inheritdoc} */ diff --git a/core/modules/ckeditor/src/Plugin/Editor/CKEditor.php b/core/modules/ckeditor/src/Plugin/Editor/CKEditor.php index bd007487357..fae5932ff5b 100644 --- a/core/modules/ckeditor/src/Plugin/Editor/CKEditor.php +++ b/core/modules/ckeditor/src/Plugin/Editor/CKEditor.php @@ -422,6 +422,11 @@ class CKEditor extends EditorBase implements ContainerFactoryPluginInterface { drupal_get_path('module', 'system') . '/css/components/align.module.css', ); $this->moduleHandler->alter('ckeditor_css', $css, $editor); + // Get a list of all enabled plugins' iframe instance CSS files. + $plugins_css = array_reduce($this->ckeditorPluginManager->getCssFiles($editor), function($result, $item) { + return array_merge($result, array_values($item)); + }, array()); + $css = array_merge($css, $plugins_css); $css = array_merge($css, _ckeditor_theme_css()); $css = array_map('file_create_url', $css); $css = array_map('file_url_transform_relative', $css); diff --git a/core/modules/ckeditor/src/Tests/CKEditorPluginManagerTest.php b/core/modules/ckeditor/src/Tests/CKEditorPluginManagerTest.php index aacb4c9e66c..175dbd2da65 100644 --- a/core/modules/ckeditor/src/Tests/CKEditorPluginManagerTest.php +++ b/core/modules/ckeditor/src/Tests/CKEditorPluginManagerTest.php @@ -57,20 +57,20 @@ class CKEditorPluginManagerTest extends KernelTestBase { */ function testEnabledPlugins() { $this->manager = $this->container->get('plugin.manager.ckeditor.plugin'); - $editor = entity_load('editor', 'filtered_html'); + $editor = Editor::load('filtered_html'); // Case 1: no CKEditor plugins. $definitions = array_keys($this->manager->getDefinitions()); sort($definitions); $this->assertIdentical(array('drupalimage', 'drupalimagecaption', 'drupallink', 'internal', 'stylescombo'), $definitions, 'No CKEditor plugins found besides the built-in ones.'); $enabled_plugins = array( - 'drupalimage' => 'core/modules/ckeditor/js/plugins/drupalimage/plugin.js', - 'drupallink' => 'core/modules/ckeditor/js/plugins/drupallink/plugin.js', + 'drupalimage' => drupal_get_path('module', 'ckeditor') . '/js/plugins/drupalimage/plugin.js', + 'drupallink' => drupal_get_path('module', 'ckeditor') . '/js/plugins/drupallink/plugin.js', ); $this->assertIdentical($enabled_plugins, $this->manager->getEnabledPluginFiles($editor), 'Only built-in plugins are enabled.'); $this->assertIdentical(array('internal' => NULL) + $enabled_plugins, $this->manager->getEnabledPluginFiles($editor, TRUE), 'Only the "internal" plugin is enabled.'); - // Enable the CKEditor Test module, which has the Llama plugin (plus three + // Enable the CKEditor Test module, which has the Llama plugin (plus four // variations of it, to cover all possible ways a plugin can be enabled) and // clear the editor manager's cache so it is picked up. $this->enableModules(array('ckeditor_test')); @@ -80,7 +80,7 @@ class CKEditorPluginManagerTest extends KernelTestBase { // Case 2: CKEditor plugins are available. $plugin_ids = array_keys($this->manager->getDefinitions()); sort($plugin_ids); - $this->assertIdentical(array('drupalimage', 'drupalimagecaption', 'drupallink', 'internal', 'llama', 'llama_button', 'llama_contextual', 'llama_contextual_and_button', 'stylescombo'), $plugin_ids, 'Additional CKEditor plugins found.'); + $this->assertIdentical(array('drupalimage', 'drupalimagecaption', 'drupallink', 'internal', 'llama', 'llama_button', 'llama_contextual', 'llama_contextual_and_button', 'llama_css', 'stylescombo'), $plugin_ids, 'Additional CKEditor plugins found.'); $this->assertIdentical($enabled_plugins, $this->manager->getEnabledPluginFiles($editor), 'Only the internal plugins are enabled.'); $this->assertIdentical(array('internal' => NULL) + $enabled_plugins, $this->manager->getEnabledPluginFiles($editor, TRUE), 'Only the "internal" plugin is enabled.'); @@ -91,21 +91,25 @@ class CKEditorPluginManagerTest extends KernelTestBase { // part of another plugin! // c. LlamaButton: automatically enabled by adding its 'Llama' button. // d. LlamaContextualAndButton: enabled by either b or c. + // e. LlamaCSS: automatically enabled by add its 'LlamaCSS' button. // Below, we will first enable the "Llama" button, which will cause the // LlamaButton and LlamaContextualAndButton plugins to be enabled. Then we // will remove the "Llama" button and add the "Strike" button, which will // cause the LlamaContextual and LlamaContextualAndButton plugins to be - // enabled. Finally, we will add the "Strike" button back again, which would - // cause all three plugins to be enabled. + // enabled. Then we will add the "Strike" button back again, which would + // cause LlamaButton, LlamaContextual and LlamaContextualAndButton to be + // enabled. Finally, we will add the "LlamaCSS" button which would cause + // all four plugins to be enabled. $settings = $editor->getSettings(); $original_toolbar = $settings['toolbar']; $settings['toolbar']['rows'][0][0]['items'][] = 'Llama'; $editor->setSettings($settings); $editor->save(); $file = array(); - $file['b'] = 'core/modules/ckeditor/tests/modules/js/llama_button.js'; - $file['c'] = 'core/modules/ckeditor/tests/modules/js/llama_contextual.js'; - $file['cb'] = 'core/modules/ckeditor/tests/modules/js/llama_contextual_and_button.js'; + $file['b'] = drupal_get_path('module', 'ckeditor_test') . '/js/llama_button.js'; + $file['c'] = drupal_get_path('module', 'ckeditor_test') . '/js/llama_contextual.js'; + $file['cb'] = drupal_get_path('module', 'ckeditor_test') . '/js/llama_contextual_and_button.js'; + $file['css'] = drupal_get_path('module', 'ckeditor_test') . '/js/llama_css.js'; $expected = $enabled_plugins + array('llama_button' => $file['b'], 'llama_contextual_and_button' => $file['cb']); $this->assertIdentical($expected, $this->manager->getEnabledPluginFiles($editor), 'The LlamaButton and LlamaContextualAndButton plugins are enabled.'); $this->assertIdentical(array('internal' => NULL) + $expected, $this->manager->getEnabledPluginFiles($editor, TRUE), 'The LlamaButton and LlamaContextualAndButton plugins are enabled.'); @@ -122,6 +126,39 @@ class CKEditorPluginManagerTest extends KernelTestBase { $expected = $enabled_plugins + array('llama_button' => $file['b'], 'llama_contextual' => $file['c'], 'llama_contextual_and_button' => $file['cb']); $this->assertIdentical($expected, $this->manager->getEnabledPluginFiles($editor), 'The LlamaButton, LlamaContextual and LlamaContextualAndButton plugins are enabled.'); $this->assertIdentical(array('internal' => NULL) + $expected, $this->manager->getEnabledPluginFiles($editor, TRUE), 'The LLamaButton, LlamaContextual and LlamaContextualAndButton plugins are enabled.'); + $settings['toolbar']['rows'][0][0]['items'][] = 'LlamaCSS'; + $editor->setSettings($settings); + $editor->save(); + $expected = $enabled_plugins + array('llama_button' => $file['b'], 'llama_contextual' => $file['c'], 'llama_contextual_and_button' => $file['cb'], 'llama_css' => $file['css']); + $this->assertIdentical($expected, $this->manager->getEnabledPluginFiles($editor), 'The LlamaButton, LlamaContextual, LlamaContextualAndButton and LlamaCSS plugins are enabled.'); + $this->assertIdentical(array('internal' => NULL) + $expected, $this->manager->getEnabledPluginFiles($editor, TRUE), 'The LLamaButton, LlamaContextual, LlamaContextualAndButton and LlamaCSS plugins are enabled.'); + } + + /** + * Tests the iframe instance CSS files of plugins. + */ + function testCssFiles() { + $this->manager = $this->container->get('plugin.manager.ckeditor.plugin'); + $editor = Editor::load('filtered_html'); + + // Case 1: no CKEditor iframe instance CSS file. + $this->assertIdentical(array(), $this->manager->getCssFiles($editor), 'No iframe instance CSS file found.'); + + // Enable the CKEditor Test module, which has the LlamaCss plugin and + // clear the editor manager's cache so it is picked up. + $this->enableModules(array('ckeditor_test')); + $this->manager = $this->container->get('plugin.manager.ckeditor.plugin'); + $settings = $editor->getSettings(); + // LlamaCss: automatically enabled by adding its 'LlamaCSS' button. + $settings['toolbar']['rows'][0][0]['items'][] = 'LlamaCSS'; + $editor->setSettings($settings); + $editor->save(); + + // Case 2: CKEditor iframe instance CSS file. + $expected = array( + 'llama_css' => array(drupal_get_path('module', 'ckeditor_test') . '/css/llama.css') + ); + $this->assertIdentical($expected, $this->manager->getCssFiles($editor), 'Iframe instance CSS file found.'); } } diff --git a/core/modules/ckeditor/src/Tests/CKEditorTest.php b/core/modules/ckeditor/src/Tests/CKEditorTest.php index a86a5e36da7..5ac3a045454 100644 --- a/core/modules/ckeditor/src/Tests/CKEditorTest.php +++ b/core/modules/ckeditor/src/Tests/CKEditorTest.php @@ -261,9 +261,21 @@ class CKEditorTest extends KernelTestBase { // Enable the editor_test module, which implements hook_ckeditor_css_alter(). $this->enableModules(array('ckeditor_test')); - $expected[] = file_url_transform_relative(file_create_url('core/modules/ckeditor/tests/modules/ckeditor_test.css')); + $expected[] = file_url_transform_relative(file_create_url(drupal_get_path('module', 'ckeditor_test') . '/ckeditor_test.css')); $this->assertIdentical($expected, $this->ckeditor->buildContentsCssJSSetting($editor), '"contentsCss" configuration part of JS settings built correctly while a hook_ckeditor_css_alter() implementation exists.'); + // Enable LlamaCss plugin, which adds an additional CKEditor stylesheet. + $this->container->get('plugin.manager.editor')->clearCachedDefinitions(); + $this->ckeditor = $this->container->get('plugin.manager.editor')->createInstance('ckeditor'); + $this->container->get('plugin.manager.ckeditor.plugin')->clearCachedDefinitions(); + $settings = $editor->getSettings(); + // LlamaCss: automatically enabled by adding its 'LlamaCSS' button. + $settings['toolbar']['rows'][0][0]['items'][] = 'LlamaCSS'; + $editor->setSettings($settings); + $editor->save(); + $expected[] = file_url_transform_relative(file_create_url(drupal_get_path('module', 'ckeditor_test') . '/css/llama.css')); + $this->assertIdentical($expected, $this->ckeditor->buildContentsCssJSSetting($editor), '"contentsCss" configuration part of JS settings built correctly while a CKEditorPluginInterface implementation exists.'); + // Enable the Bartik theme, which specifies a CKEditor stylesheet. \Drupal::service('theme_handler')->install(['bartik']); \Drupal::service('theme_handler')->setDefault('bartik'); diff --git a/core/modules/ckeditor/tests/modules/src/Plugin/CKEditorPlugin/Llama.php b/core/modules/ckeditor/tests/modules/src/Plugin/CKEditorPlugin/Llama.php index d55f93a3d80..73a4dc6c430 100644 --- a/core/modules/ckeditor/tests/modules/src/Plugin/CKEditorPlugin/Llama.php +++ b/core/modules/ckeditor/tests/modules/src/Plugin/CKEditorPlugin/Llama.php @@ -19,9 +19,10 @@ use Drupal\editor\Entity\Editor; * CKEditorPluginButtonsInterface interface, there is no way of actually loading * this plugin. * - * @see MetaContextual - * @see MetaButton - * @see MetaContextualAndButton + * @see \Drupal\ckeditor_test\Plugin\CKEditorPlugin\LlamaContextual + * @see \Drupal\ckeditor_test\Plugin\CKEditorPlugin\LlamaButton + * @see \Drupal\ckeditor_test\Plugin\CKEditorPlugin\LlamaContextualAndButton + * @see \Drupal\ckeditor_test\Plugin\CKEditorPlugin\LlamaCss * * @CKEditorPlugin( * id = "llama", diff --git a/core/modules/ckeditor/tests/modules/src/Plugin/CKEditorPlugin/LlamaCss.php b/core/modules/ckeditor/tests/modules/src/Plugin/CKEditorPlugin/LlamaCss.php new file mode 100644 index 00000000000..c9becb45d83 --- /dev/null +++ b/core/modules/ckeditor/tests/modules/src/Plugin/CKEditorPlugin/LlamaCss.php @@ -0,0 +1,51 @@ + array( + 'label' => t('Insert Llama CSS'), + ), + ); + } + + /** + * {@inheritdoc} + */ + function getCssFiles(Editor $editor) { + return array( + drupal_get_path('module', 'ckeditor_test') . '/css/llama.css' + ); + } + + /** + * {@inheritdoc} + */ + function getFile() { + return drupal_get_path('module', 'ckeditor_test') . '/js/llama_css.js'; + } + +}