Commit 45033115 authored by catch's avatar catch

Issue #2645100 by thpoul, Wim Leers: CKEditorPluginCssInterface: Allow...

Issue #2645100 by thpoul, Wim Leers: CKEditorPluginCssInterface: Allow CKEditor plugins to add CSS to iframe CKEditor instances
parent 4a67b9d4
......@@ -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';
}
}
/**
......
......@@ -23,6 +23,7 @@
* @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
......
......@@ -20,6 +20,7 @@
* @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
......
......@@ -24,6 +24,7 @@
* @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
......
<?php
/**
* @file
* Contains \Drupal\ckeditor\CKEditorPluginCssInterface.
*/
namespace Drupal\ckeditor;
use Drupal\editor\Entity\Editor;
/**
* Defines an interface for CKEditor plugins with associated CSS.
*
* This allows a CKEditor plugin to add additional CSS in iframe CKEditor
* instances without needing to implement hook_ckeditor_css_alter().
*
* @see \Drupal\ckeditor\CKEditorPluginInterface
* @see \Drupal\ckeditor\CKEditorPluginButtonsInterface
* @see \Drupal\ckeditor\CKEditorPluginContextualInterface
* @see \Drupal\ckeditor\CKEditorPluginConfigurableInterface
* @see \Drupal\ckeditor\CKEditorPluginBase
* @see \Drupal\ckeditor\CKEditorPluginManager
* @see \Drupal\ckeditor\Annotation\CKEditorPlugin
* @see plugin_api
*/
interface CKEditorPluginCssInterface extends CKEditorPluginInterface {
/**
* Retrieves enabled plugins' iframe instance CSS files.
*
* Note: this does not use a Drupal asset library because this CSS will be
* loaded by CKEditor, not by Drupal.
*
* @param \Drupal\editor\Entity\Editor $editor
* A configured text editor object.
*
* @return string[]
* An array of CSS files. This is a flat list of file paths relative to
* the Drupal root.
*/
public function getCssFiles(Editor $editor);
}
......@@ -28,6 +28,7 @@
* @see \Drupal\ckeditor\CKEditorPluginButtonsInterface
* @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
......
......@@ -21,6 +21,7 @@
* @see \Drupal\ckeditor\CKEditorPluginButtonsInterface
* @see \Drupal\ckeditor\CKEditorPluginContextualInterface
* @see \Drupal\ckeditor\CKEditorPluginConfigurableInterface
* @see \Drupal\ckeditor\CKEditorPluginCssInterface
* @see \Drupal\ckeditor\CKEditorPluginBase
* @see \Drupal\ckeditor\Annotation\CKEditorPlugin
* @see plugin_api
......@@ -127,7 +128,7 @@ public function getEnabledPluginFiles(Editor $editor, $include_internal_plugins
* All available CKEditor buttons, with plugin IDs as keys and button
* metadata (as implemented by getButtons()) as values.
*
* @see CKEditorPluginButtonsInterface::getButtons()
* @see \Drupal\ckeditor\CKEditorPluginButtonsInterface::getButtons()
*/
public function getButtons() {
$plugins = array_keys($this->getDefinitions());
......@@ -182,4 +183,32 @@ public function injectPluginSettingsForm(array &$form, FormStateInterface $form_
}
}
}
/**
* 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;
}
}
......@@ -11,6 +11,7 @@
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 @@
* module = "ckeditor"
* )
*/
class DrupalImageCaption extends PluginBase implements CKEditorPluginInterface, CKEditorPluginContextualInterface {
class DrupalImageCaption extends PluginBase implements CKEditorPluginInterface, CKEditorPluginContextualInterface, CKEditorPluginCssInterface {
/**
* {@inheritdoc}
......@@ -69,6 +70,15 @@ public function getConfig(Editor $editor) {
);
}
/**
* {@inheritdoc}
*/
public function getCssFiles(Editor $editor) {
return array(
drupal_get_path('module', 'ckeditor') . '/css/plugins/drupalimagecaption/ckeditor.drupalimagecaption.css'
);
}
/**
* {@inheritdoc}
*/
......
......@@ -422,6 +422,11 @@ public function buildContentsCssJSSetting(Editor $editor) {
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);
......
......@@ -57,20 +57,20 @@ protected function setUp() {
*/
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 @@ function testEnabledPlugins() {
// 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 @@ function testEnabledPlugins() {
// 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 @@ function testEnabledPlugins() {
$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.');
}
}
......@@ -261,9 +261,21 @@ function testBuildContentsCssJSSetting() {
// 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');
......
......@@ -19,9 +19,10 @@
* 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",
......
<?php
/**
* @file
* Contains \Drupal\ckeditor_test\Plugin\CKEditorPlugin\LlamaCss.
*/
namespace Drupal\ckeditor_test\Plugin\CKEditorPlugin;
use Drupal\ckeditor\CKEditorPluginButtonsInterface;
use Drupal\ckeditor\CKEditorPluginCssInterface;
use Drupal\editor\Entity\Editor;
/**
* Defines a "LlamaCss" plugin, with an associated "llama" CSS.
*
* @CKEditorPlugin(
* id = "llama_css",
* label = @Translation("Llama CSS")
* )
*/
class LlamaCss extends Llama implements CKEditorPluginButtonsInterface, CKEditorPluginCssInterface {
/**
* {@inheritdoc}
*/
function getButtons() {
return array(
'LlamaCSS' => 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';
}
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment