core/modules/ckeditor/ckeditor.module | 6 + .../js/plugins/drupalimagecaption/plugin.js | 123 ++++++++++++--------- .../Plugin/CKEditorPlugin/DrupalImageCaption.php | 5 + 3 files changed, 81 insertions(+), 53 deletions(-) diff --git a/core/modules/ckeditor/ckeditor.module b/core/modules/ckeditor/ckeditor.module index 421da85..5cb8ef3 100644 --- a/core/modules/ckeditor/ckeditor.module +++ b/core/modules/ckeditor/ckeditor.module @@ -58,6 +58,12 @@ function ckeditor_ckeditor_css_alter(array &$css, Editor $editor) { // CKEditor DrupalImageCaption plugin. 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/js/plugins/drupalimagecaption/plugin.js b/core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.js index 5ebad71..b49fa00 100644 --- a/core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.js +++ b/core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.js @@ -33,6 +33,10 @@ return; } + // Only perform the downcasting/upcasting for to the enabled filters. + var captionFilterEnabled = editor.config.drupalImageCaption_captionFilterEnabled; + var alignFilterEnabled = editor.config.drupalImageCaption_alignFilterEnabled; + // Override default features definitions for drupalimagecaption. CKEDITOR.tools.extend(widgetDefinition.features, { caption: { @@ -63,13 +67,17 @@ var captionHtml = caption && caption.getData(); var attrs = img.attributes; - // If image contains a non-empty caption, serialize caption to the - // data-caption attribute. - if (captionHtml) { - attrs['data-caption'] = captionHtml; + if (captionFilterEnabled) { + // If image contains a non-empty caption, serialize caption to the + // data-caption attribute. + if (captionHtml) { + attrs['data-caption'] = captionHtml; + } } - if (this.data.align !== 'none') { - attrs['data-align'] = this.data.align; + if (alignFilterEnabled) { + if (this.data.align !== 'none') { + attrs['data-align'] = this.data.align; + } } attrs['data-editor-file-uuid'] = this.data['data-editor-file-uuid']; @@ -96,60 +104,69 @@ // We won't need the attributes during editing: we'll use widget.data // to store them (except the caption, which is stored in the DOM). - var caption = attrs['data-caption']; - data.align = attrs['data-align']; + if (captionFilterEnabled) { + var caption = attrs['data-caption']; + delete attrs['data-caption']; + } + if (alignFilterEnabled) { + data.align = attrs['data-align']; + delete attrs['data-align']; + } data['data-editor-file-uuid' ] = attrs['data-editor-file-uuid']; - delete attrs['data-caption']; - delete attrs['data-align']; delete attrs['data-editor-file-uuid']; - // Unwrap from

wrapper created by HTML parser for captioned image. - // Captioned image will be transformed to

, so we don't want - // the

anymore. - if (element.parent.name === 'p' && caption) { - var index = element.getIndex(); - var splitBefore = index > 0; - var splitAfter = index + 1 < element.parent.children.length; - - if (splitBefore) { - element.parent.split(index); + if (captionFilterEnabled) { + // Unwrap from

wrapper created by HTML parser for a captioned + // image. The captioned image will be transformed to

, so we + // don't want the

anymore. + if (element.parent.name === 'p' && caption) { + var index = element.getIndex(); + var splitBefore = index > 0; + var splitAfter = index + 1 < element.parent.children.length; + + if (splitBefore) { + element.parent.split(index); + } + index = element.getIndex(); + if (splitAfter) { + element.parent.split(index + 1); + } + + element.parent.replaceWith(element); + retElement = element; } - index = element.getIndex(); - if (splitAfter) { - element.parent.split(index + 1); - } - - element.parent.replaceWith(element); - retElement = element; - } - // If this image has a caption, create a full

structure. - if (caption) { - var figure = new CKEDITOR.htmlParser.element('figure'); - caption = new CKEDITOR.htmlParser.fragment.fromHtml(caption, 'figcaption'); - - // Use Drupal's data-placeholder attribute to insert a CSS-based, - // translation-ready placeholder for empty captions. Note that it - // also must to be done for new instances (see - // widgetDefinition._createDialogSaveCallback). - caption.attributes['data-placeholder'] = placeholderText; - - element.replaceWith(figure); - figure.add(element); - figure.add(caption); - figure.attributes['class'] = editor.config.image2_captionedClass; - retElement = figure; + // If this image has a caption, create a full
structure. + if (caption) { + var figure = new CKEDITOR.htmlParser.element('figure'); + caption = new CKEDITOR.htmlParser.fragment.fromHtml(caption, 'figcaption'); + + // Use Drupal's data-placeholder attribute to insert a CSS-based, + // translation-ready placeholder for empty captions. Note that it + // also must to be done for new instances (see + // widgetDefinition._createDialogSaveCallback). + caption.attributes['data-placeholder'] = placeholderText; + + element.replaceWith(figure); + figure.add(element); + figure.add(caption); + figure.attributes['class'] = editor.config.image2_captionedClass; + retElement = figure; + } } - // If this image doesn't have a caption, but it is centered, make sure - // that it's wrapped with

, which will become a part of the widget. - if (data.align === 'center' && !caption) { - var p = new CKEDITOR.htmlParser.element('p'); - element.replaceWith(p); - p.add(element); - // Apply the class for centered images. - p.addClass(editor.config.image2_alignClasses[1]); - retElement = p; + if (alignFilterEnabled) { + // If this image doesn't have a caption (or the caption filter is + // disabled), but it is centered, make sure that it's wrapped with + //

, which will become a part of the widget. + if (data.align === 'center' && (!captionFilterEnabled || !caption)) { + var p = new CKEDITOR.htmlParser.element('p'); + element.replaceWith(p); + p.add(element); + // Apply the class for centered images. + p.addClass(editor.config.image2_alignClasses[1]); + retElement = p; + } } // Return the upcasted element (,

or

). diff --git a/core/modules/ckeditor/src/Plugin/CKEditorPlugin/DrupalImageCaption.php b/core/modules/ckeditor/src/Plugin/CKEditorPlugin/DrupalImageCaption.php index 6feb593..7ca296e 100644 --- a/core/modules/ckeditor/src/Plugin/CKEditorPlugin/DrupalImageCaption.php +++ b/core/modules/ckeditor/src/Plugin/CKEditorPlugin/DrupalImageCaption.php @@ -57,10 +57,15 @@ public function getFile() { * {@inheritdoc} */ public function getConfig(Editor $editor) { + $format = $editor->getFilterFormat(); return array( 'image2_captionedClass' => 'caption caption-img', 'image2_alignClasses' => array('align-left', 'align-center', 'align-right'), 'drupalImageCaption_captionPlaceholderText' => t('Enter caption here'), + // Only enable those parts of DrupalImageCaption for which the + // corresponding Drupal text filters are enabled. + 'drupalImageCaption_captionFilterEnabled' => $format->filters('filter_caption')->status, + 'drupalImageCaption_alignFilterEnabled' => $format->filters('filter_align')->status, ); }