Project

General

Profile

Actions
Copy link

Bug #95818

open

rte_ckeditor link around image generates faulty frontend html

Added by Marco H almost 3 years ago. Updated over 1 year ago.

Status:
Under Review
Priority:
Should have
Assignee:
-
Category:
RTE (rtehtmlarea + ckeditor)
Target version:
next-patchlevel
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>

Actions
Copy link
 #1

Updated by Marco H almost 3 years 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>

Actions
Copy link
 #3

Updated by Marco H almost 3 years 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.

Actions
Copy link
 #4

Updated by Lars Tode over 2 years 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'));
    }

Actions
Copy link
 #5

Updated by Gerrit Code Review over 2 years 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

Actions
Copy link
 #6

Updated by Gerrit Code Review over 2 years 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

Actions
Copy link
 #7

Updated by Gerrit Code Review over 2 years 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

Actions
Copy link
 #8

Updated by Gerrit Code Review over 2 years ago

Patch set 4 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

Actions
Copy link
 #9

Updated by Gerrit Code Review over 1 year ago

Patch set 5 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

Actions
Copy link

Also available in: Atom PDF