Bug #95818

rte_ckeditor link around image generates faulty frontend html

Added by Marco H 7 months ago. Updated 2 days ago.

Status:
Under Review
Priority:
Should have
Assignee:
-
Category:
RTE (rtehtmlarea + ckeditor)
Target version:
Start date:
2021-10-29
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
10
PHP Version:
Tags:
ckeditor image link
Complexity:
Is Regression:
Sprint Focus:

Description

Version 10.4.21

How to reproduce:

- include fluid styled content
- enable images for editor (if you use Default.yaml, use removePlugins: null
- create text element
- enter image
- link to an external url
- save and check frontend

Example html in editor:

<p><a href="https://www.google.de/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"><img alt="" data-htmlarea-file-uid="5" src="https://yourdomain.com/fileadmin/_processed_/2/8/csm_e6a44eba77_2b4acbbd70.png" style="height:101px; width:300px" /></a></p>

Frontend then looks like this:
<p><a href="https://www.google.de/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" target="_blank" rel="noreferrer"></a></p><p><img src="/fileadmin/_processed_/2/8/csm_e6a44eba77_b94f17b207.png" width="299" height="101"></p>

#1

Updated by Marco H 6 months ago

  • Subject changed from rte_ckeditor external link around image causes two paragraphs in frontend, one with link, one with image to rte_ckeditor link around image generates faulty frontend html
  • Description updated (diff)

Edit:

Similar problem with link to page or file, so it seems to be a general issue with images.

Also , if the link is set via the editor button, the image-html is replaced by the href-value, so

<p><img alt="" data-htmlarea-file-uid="5" src="https://yourdomain.com/fileadmin/_processed_/2/8/csm_e6a44eba77_2b4acbbd70.png" style="height:101px; width:300px" /></p>

+ adding a link turns into

<p><a href="t3://page?uid=1">t3://page?uid=1</a></p>

#2

Updated by Riccardo De Contardi 6 months ago

What would be the result if you use https://extensions.typo3.org/extension/rte_ckeditor_image ?

#3

Updated by Marco H 6 months ago

Riccardo De Contardi wrote in #note-2:

What would be the result if you use https://extensions.typo3.org/extension/rte_ckeditor_image ?

Same issue in frontend.
I was actually noticing the problem on a website that uses rte_ckeditor_image, was about to report it there but did a last check without the extension - same behaviour. What rte_ckeditor_image does fix though is the editor generation of the image after adding a link.

#4

Updated by Lars Tode 6 days ago

The issue with the link is located in file RteLinkBrowser. Currently the method getSelectedText() used to get the content for the link.

If the content is an image the method return nothing since it is an element and not a text.

A simple solution could be checking if the selection is an element and the text is empty.

Example:

    if (selection && selection.getSelectedElement() !== null) {
      linkElement.append(selection.getSelectedElement());
    } else if (selection && selection.getSelectedText()) {
      linkElement.setText(selection.getSelectedText());
    } else {
      linkElement.setText(linkElement.getAttribute('href'));
    }

#5

Updated by Gerrit Code Review 5 days ago

  • Status changed from New to Under Review

Patch set 1 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/74640

#6

Updated by Gerrit Code Review 5 days ago

Patch set 2 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/74640

#7

Updated by Gerrit Code Review 2 days ago

Patch set 3 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/74640

Also available in: Atom PDF