Merge pull request #3478 from jonasdekeukelaere/fix-image-link-editor

Fix adding links to images in ckeditor
forkcms · Nov 8, 2021 · 3a0eb13 · 3a0eb13
2 parents f0ec074 + a6366d9
commit 3a0eb13
Showing 1 changed file with 33 additions and 2 deletions.
diff --git a/src/Backend/Core/Js/ckeditor/plugins/medialibrary/dialogs/linkDialog.js b/src/Backend/Core/Js/ckeditor/plugins/medialibrary/dialogs/linkDialog.js
@@ -102,12 +102,29 @@ CKEDITOR.dialog.add(
                             type: 'text',
                             id: 'displayText',
                             label: editor.lang.medialibrary.displayText,
-                            validate: CKEDITOR.dialog.validate.notEmpty(editor.lang.medialibrary.displayCannotBeEmpty),
                             setup: function (element) {
                                 this.setValue(element.getText());
                             },
+                            onShow: function (element) {
+                                // hide display text when linking a html element
+                                if (element.sender.element.htmlElement) {
+                                  this.getElement().getParent().getParent().hide();
+
+                                  return;
+                                }
+
+                                this.getElement().getParent().getParent().show();
+                            },
                             commit: function (element) {
-                                element.setText(this.getValue());
+                                // don't set display text when linking a html element
+                                if (element.htmlElement) {
+                                    return;
+                                }
+
+                                // fill in display text
+                                if (this.getValue()) {
+                                    element.setText(this.getValue());
+                                }
                             }
                         },
                         {
@@ -131,6 +148,11 @@ CKEDITOR.dialog.add(
                                             return;
                                         }
 
+                                        // set url as text when no display text is given
+                                        if (!element.htmlElement && !element.getText()) {
+                                            element.setText(this.getValue());
+                                        }
+
                                         element.setAttribute('href', this.getValue());
                                         element.setAttribute('data-cke-saved-href', this.getValue());
                                         element.removeAttribute('target');
@@ -244,6 +266,7 @@ CKEDITOR.dialog.add(
 
                 var selection = editor.getSelection();
                 var initialText = selection.getSelectedText();
+                var initialElement = selection.getSelectedElement();
                 var element = selection.getStartElement();
 
                 if (element) {
@@ -257,6 +280,14 @@ CKEDITOR.dialog.add(
                     dialog.setValueOf('tab', initialText.match(urlRegex) ? 'url' : 'displayText', initialText);
                 }
 
+                // save initial element to new a-element
+                if (initialElement) {
+                    // element used for checks
+                    element.htmlElement = initialElement.$.outerHTML;
+                    // display element
+                    element.setHtml(initialElement.$.outerHTML);
+                }
+
                 this.element = element;
 
                 if (!this.insertMode) {