[BUGFIX] Add css for marking broken links in rte_ckeditor 43/56943/8
authorSybille Peters <sypets@gmx.de>
Sat, 12 May 2018 18:39:29 +0000 (20:39 +0200)
committerBenjamin Kott <benjamin.kott@outlook.com>
Tue, 15 May 2018 11:02:23 +0000 (13:02 +0200)
The styling for broken page links that was added in
RteHtmlParser::markBrokenLinks is by default removed by ckeditor
so this functionality is no longer available by default.

Page links which link to a non-existing page currently already
get the additional attribute a[data-rte-error]. This patch adds
CSS to visually style broken links with a red border and yellow
background. This is the same styling that was previously used.

This is done by adding the plugin showbrokenlinks.

The style is still added in markBrokenLinks. These attributes
will be removed by ckeditor by default. However, the functionality
is kept to function as fallback.

Resolves: #84987
Releases: master, 8.7
Change-Id: I63e1e1db248fb2c343cdd19b41424621b684e87e
Reviewed-on: https://review.typo3.org/56943
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Sybille Peters <sypets@gmx.de>
Tested-by: Sybille Peters <sypets@gmx.de>
Reviewed-by: Daniel Goerz <ervaude@gmail.com>
Tested-by: Daniel Goerz <ervaude@gmail.com>
Reviewed-by: Benjamin Kott <benjamin.kott@outlook.com>
Tested-by: Benjamin Kott <benjamin.kott@outlook.com>
typo3/sysext/rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml
typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/showbrokenlinks/plugin.js [new file with mode: 0644]
typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/showbrokenlinks/styles/showbrokenlinks.css [new file with mode: 0644]

index e6c84f1..c2687a8 100644 (file)
@@ -3,6 +3,8 @@
 editor:
   externalPlugins:
     typo3link: { resource: "EXT:rte_ckeditor/Resources/Public/JavaScript/Plugins/typo3link.js", route: "rteckeditor_wizard_browse_links" }
+    showbrokenlinks: { resource: "EXT:rte_ckeditor/Resources/Public/JavaScript/Plugins/showbrokenlinks/plugin.js"}
     # This is a plugin, found here: https://github.com/ufdada/quicktable
     quicktable: { resource: "EXT:rte_ckeditor/Resources/Public/JavaScript/Plugins/quicktable/plugin.js" }
     autolinking: { resource: "EXT:rte_ckeditor/Resources/Public/JavaScript/Plugins/autolinking.js" }
+
diff --git a/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/showbrokenlinks/plugin.js b/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/showbrokenlinks/plugin.js
new file mode 100644 (file)
index 0000000..a1d3ef9
--- /dev/null
@@ -0,0 +1,34 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+'use strict';
+
+/**
+ * This is a TYPO3 plugin for rte_ckeditor which provides extra
+ * CSS for styling broken links.
+ *
+ * Broken links can be detected by checking if the data-rte-error
+ * attribute is set for the <a> element. This attribute is typically
+ * set in RteHtmlParser.
+ *
+ * The default styling used here can be modified:
+ * 1. Do not include this plugin
+ * 2. And copy CSS from styles/showbrokenlinks.css to your CSS file
+ *   for rte_ckeditor and modify it.
+ */
+CKEDITOR.plugins.add('showbrokenlinks', {
+    init: function (editor) {
+        var pluginDirectory = this.path;
+        editor.addContentsCss( pluginDirectory + 'styles/showbrokenlinks.css' );
+    }
+});
\ No newline at end of file
diff --git a/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/showbrokenlinks/styles/showbrokenlinks.css b/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/showbrokenlinks/styles/showbrokenlinks.css
new file mode 100644 (file)
index 0000000..2e0b0e5
--- /dev/null
@@ -0,0 +1,10 @@
+
+/**
+ * Show broken links with red border and yellow background
+ */
+a[data-rte-error]
+{
+    background-color: yellow!important;
+    border: 2px red solid!important;
+    color: black!important;
+}