Project

General

Profile

Actions

Bug #83136

closed

CKeditor: RteLinkBrowser ignores HTML tags in links --> they are removed

Added by Andreas Allacher almost 7 years ago. Updated over 5 years ago.

Status:
Closed
Priority:
Must have
Assignee:
-
Category:
RTE (rtehtmlarea + ckeditor)
Target version:
-
Start date:
2017-11-28
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
8
PHP Version:
Tags:
Complexity:
Is Regression:
Sprint Focus:

Description

Using CKEditor in backend:

  1. Add "Hello World" to RTE
  2. Select "World" and make it bold: "*World*"
  3. Now select "Hello World" and make a link to a page.

Result: Bold styling of "World" is lost.

Another scenario:
After creating the link for "Hello World" without bold:
  1. Select "World" again and make it bold again: "*World*"
  2. No modify the link using the link browser to another page

Result: Bold styling of "World" is gone again.

That is the case for all HTML content inside links, so it e.g. also happens if I add an SVG icon inside the link or similar stuff.

The problem is this code in "typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/RteLinkBrowser.js"

var selection = RteLinkBrowser.CKEditor.getSelection();
if (selection && selection.getSelectedText() === '') {
    selection.selectElement(selection.getStartElement());
}
if (selection && selection.getSelectedText()) {
    linkElement.setText(selection.getSelectedText());
} else {
    linkElement.setText(linkElement.getAttribute('href'));
}
RteLinkBrowser.CKEditor.insertElement(linkElement);

It only selects the text and ignores any HTML content.
It could be solved by doing it like this instead (not perfect, e.g. it doesn't take into account more than one range and what happens in case of e.g. a td/tr/li element was selected and also no checks if a range exists at all):

var selection = RteLinkBrowser.CKEditor.getSelection();
var range = selection.getRanges()[selection.getRanges().length - 1];
var content = range.cloneContents().getHtml();
linkElement.setHtml(content);

Probably a better way would be to do it in the same way as CKEditor does it in their own link plugin, I think these are the relevant sections:
https://github.com/ckeditor/ckeditor-dev/blob/major/plugins/link/dialogs/link.js#L38
https://github.com/ckeditor/ckeditor-dev/blob/major/plugins/link/dialogs/link.js#L56

It is especially annoying that those things are lost when changing updating the link.
I have tested the above steps with their link plugin and it works fine. It even takes care to e.g. add the links per table cell if selecting multiple:
https://sdk.ckeditor.com/samples/fullpreset.html

Actions

Also available in: Atom PDF