Bug #95818
open
rte_ckeditor link around image generates faulty frontend html
Added by Marco H over 2 years ago.
Updated 12 months ago.
Category:
RTE (rtehtmlarea + ckeditor)
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>
- 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>
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.
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'));
}
- Status changed from New to Under Review
Also available in: Atom
PDF
Updated by 
Updated by 
Updated by 
Updated by