diff --git a/core/modules/ckeditor/js/plugins/drupalimage/plugin.js b/core/modules/ckeditor/js/plugins/drupalimage/plugin.js old mode 100644 new mode 100755 index 0025664..cdd4dbf --- a/core/modules/ckeditor/js/plugins/drupalimage/plugin.js +++ b/core/modules/ckeditor/js/plugins/drupalimage/plugin.js @@ -60,7 +60,11 @@ element: 'img', attributes: { src: '', - alt: '' + alt: '', + width: '', + height: '', + 'data-entity-type': '', + 'data-entity-uuid': '' } }); @@ -99,7 +103,10 @@ data['data-entity-type'] = element.attributes['data-entity-type']; // Parse the data-entity-uuid attribute. data['data-entity-uuid'] = element.attributes['data-entity-uuid']; - + + data['width'] = element.attributes['width']; + data['height'] = element.attributes['height']; + return element; }; diff --git a/core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.js b/core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.js old mode 100644 new mode 100755 index d1d666c..cd71a9a --- a/core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.js +++ b/core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.js @@ -58,8 +58,7 @@ requiredContent.attributes['data-align'] = ''; requiredContent.attributes['data-caption'] = ''; widgetDefinition.requiredContent = new CKEDITOR.style(requiredContent); - widgetDefinition.allowedContent.img.attributes['!data-align'] = true; - widgetDefinition.allowedContent.img.attributes['!data-caption'] = true; + widgetDefinition.allowedContent.img.attributes += ',!data-align,!data-caption'; // Override allowedContent setting for the 'caption' nested editable. // This must match what caption_filter enforces. @@ -72,13 +71,16 @@ // data-caption attributes. var originalDowncast = widgetDefinition.downcast; widgetDefinition.downcast = function (element) { - var img = findElementByName(element, 'img'); + var img = originalDowncast.call(this, element); + if (!img) { + img = findElementByName(element, 'img'); + } originalDowncast.call(this, img); var caption = this.editables.caption; var captionHtml = caption && caption.getData(); var attrs = img.attributes; - + if (captionFilterEnabled) { // If image contains a non-empty caption, serialize caption to the // data-caption attribute. @@ -137,6 +139,7 @@ data.align = attrs['data-align']; delete attrs['data-align']; } + data['data-entity-type'] = attrs['data-entity-type']; delete attrs['data-entity-type']; data['data-entity-uuid'] = attrs['data-entity-uuid']; diff --git a/core/modules/ckeditor/js/plugins/drupallink/plugin.js b/core/modules/ckeditor/js/plugins/drupallink/plugin.js old mode 100644 new mode 100755 diff --git a/core/modules/editor/src/Form/EditorImageDialog.php b/core/modules/editor/src/Form/EditorImageDialog.php old mode 100644 new mode 100755 index dcacf64..486d135 --- a/core/modules/editor/src/Form/EditorImageDialog.php +++ b/core/modules/editor/src/Form/EditorImageDialog.php @@ -216,7 +216,9 @@ public function submitForm(array &$form, FormStateInterface $form_state) { // Transform absolute image URLs to relative image URLs: prevent problems // on multisite set-ups and prevent mixed content errors. $file_url = file_url_transform_relative($file_url); - $form_state->setValue(array('attributes', 'src'), $file_url); + if(!$form_state->getValue(array('attributes', 'src'))) { + $form_state->setValue(array('attributes', 'src'), $file_url); + } $form_state->setValue(array('attributes', 'data-entity-uuid'), $file->uuid()); $form_state->setValue(array('attributes', 'data-entity-type'), 'file'); } diff --git a/core/modules/image/css/image.admin.css b/core/modules/image/css/image.admin.css old mode 100644 new mode 100755 index 9f9878a..dd18988 --- a/core/modules/image/css/image.admin.css +++ b/core/modules/image/css/image.admin.css @@ -1,4 +1,3 @@ - /** * Image style configuration pages. */ @@ -71,4 +70,4 @@ } .image-anchor td { border: 1px solid #ccc; -} +} \ No newline at end of file diff --git a/core/modules/image/image.module b/core/modules/image/image.module old mode 100644 new mode 100755 index 7f8314a..6dff7f3 --- a/core/modules/image/image.module +++ b/core/modules/image/image.module @@ -4,14 +4,17 @@ * @file * Exposes global functionality for creating image styles. */ - +use Drupal\Component\Utility\SafeMarkup; use Drupal\Core\Entity\EntityInterface; use Drupal\Core\Routing\RouteMatchInterface; +use Drupal\Core\Form\FormStateInterface; use Drupal\file\Entity\File; use Drupal\field\FieldStorageConfigInterface; use Drupal\field\FieldConfigInterface; use Drupal\image\Entity\ImageStyle; + + /** * Image style constant for user presets in the database. * @@ -483,3 +486,107 @@ function image_field_config_delete(FieldConfigInterface $field) { \Drupal::service('file.usage')->delete($file, 'image', 'default_image', $field->uuid()); } } + + +/** + * Implements hook_form_FORM_ID_alter() for EditorImageDialog. + * + * Alters the image dialog form for text editor, to allow the user to select an + * image style. + * + * @see \Drupal\editor\Form\EditorImageDialog::buildForm() + */ +function image_form_editor_image_dialog_alter(&$form, FormStateInterface $form_state) { + + $filter_format = $form_state->getBuildInfo()['args'][0]; + $filters = $filter_format->filters()->getAll(); + + $image_element = $form_state->getStorage()['image_element']; + + // When image style functionality is available, disallow the user from + // specifying the dimensions manually, only allow image styles to be picked. + if (isset($filters['filter_imagestyle']) && $filters['filter_imagestyle']->status) { + // Hide the default width/height form items. + $form['dimensions']['#access'] = FALSE; + + $image_options = image_style_options(FALSE); + $image_options_keys = array_keys($image_options); + $form['image_style'] = array( + '#type' => 'item', + '#field_prefix' => '
' . implode('
, ', array_keys($image_styles)) . '
';
+ return t('
+ You can display images using site-wide styles by adding a data-image-style
attribute, whose values is one of the image style machine names: !image-style-machine-name-list.
' . implode('
, ', array_keys($responsive_image_styles)) . '
';
+ return t('
+ You can make images responsive by adding a data-responsive-image-style
attribute, whose values is one of the responsive image style machine names: !responsive-image-style-machine-name-list.