[TASK] CKEditor RTE: Add button to insert soft hyphen 73/57373/2
authorJosef Glatz <josefglatz@gmail.com>
Sat, 23 Jun 2018 12:21:57 +0000 (14:21 +0200)
committerAndreas Fernandez <a.fernandez@scripting-base.de>
Wed, 27 Jun 2018 08:13:24 +0000 (10:13 +0200)
This patch re-adds a missing functionality to CKEditor.

Due to the move from htmlArea to CKEditor, the well-known and actually
important button/shortcut "soft hyphen" for text in responsive webdesign
was gone.

The button is added per default to the existing CKEditor presets "default"
and "full". Existing translations from htmlArea have been migrated and
more were added.

Pasting a soft hyphen is possible via the UI button and a keyboard
shortcut: 'CTRL' + '-'. The shortcut can be deactivated in custom
RTE presets.

Resolves: #85361
Releases: master, 8.7
Change-Id: Iec97f4c9d1ede269e2df5cb4fe795df0ef5ca558
Reviewed-on: https://review.typo3.org/57373
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Josef Glatz <josef.glatz@typo3.org>
Tested-by: Josef Glatz <josef.glatz@typo3.org>
Tested-by: Wittkiel Gruppe <ts@wittkiel-gruppe.com>
Reviewed-by: Joerg Boesche <typo3@joergboesche.de>
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de>
18 files changed:
typo3/sysext/core/Documentation/Changelog/8.7.x/Important-85361-EXTrte_ckeditor-Re-addTheSoftHyphenButton.rst [new file with mode: 0644]
typo3/sysext/rte_ckeditor/Configuration/RTE/Default.yaml
typo3/sysext/rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml
typo3/sysext/rte_ckeditor/Configuration/RTE/Full.yaml
typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/icons/hidpi/softhyphen.png [new file with mode: 0644]
typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/icons/softhyphen.png [new file with mode: 0644]
typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/icons/softhyphen.svg [new file with mode: 0644]
typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/da.js [new file with mode: 0644]
typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/de.js [new file with mode: 0644]
typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/en.js [new file with mode: 0644]
typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/fr.js [new file with mode: 0644]
typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/he.js [new file with mode: 0644]
typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/hr.js [new file with mode: 0644]
typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/hu.js [new file with mode: 0644]
typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/it.js [new file with mode: 0644]
typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/nl.js [new file with mode: 0644]
typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/ru.js [new file with mode: 0644]
typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/plugin.js [new file with mode: 0644]

diff --git a/typo3/sysext/core/Documentation/Changelog/8.7.x/Important-85361-EXTrte_ckeditor-Re-addTheSoftHyphenButton.rst b/typo3/sysext/core/Documentation/Changelog/8.7.x/Important-85361-EXTrte_ckeditor-Re-addTheSoftHyphenButton.rst
new file mode 100644 (file)
index 0000000..9ef2afd
--- /dev/null
@@ -0,0 +1,57 @@
+.. include:: ../../Includes.txt
+
+====================================================================
+Important: #85361 - EXT:rte_ckeditor - re-add the soft hyphen button
+====================================================================
+
+See :issue:`85361`
+
+Description
+===========
+
+With the switch from htmlArea to CKEditor the soft hyphen button was gone. This functionality is now
+re-added as custom CKEditor plugin.
+
+It is loaded like each other existing CKEditor plugin in the TYPO3 core via
+:file:`EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml`. It's automatically loaded in
+the RTE presets "default" and "full". The shortcut `Ctrl` + `-` for adding a soft hyphen works
+without showing the button in the CKEditor button bar.
+
+Impact
+======
+
+By using the shipped RTE presets "default" or "full", the functionality and the toolbar button is
+automatically added to CKEditor toolbar. This helps the editor immensely to create better content for
+the responsive web these days.
+
+How to activate the functionality in a custom RTE preset
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+The functionality is automatically added if you are importing
+:file:`EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml` in your custom RTE preset. If your
+custom RTE preset can't rely on that file, you can explicitly import this plugin as shown:
+
+.. code-block::
+
+   editor:
+     externalPlugins:
+       softhyphen:
+         resource: "EXT:rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/"
+         # set whether the shortcut for this plugin is activated or not
+         enableShortcut: true
+
+How to add the button in a custom RTE preset
+''''''''''''''''''''''''''''''''''''''''''''
+
+The button with the buttonName `softHyphen` of the plugin is assigned to a toolbarGroup named
+`insertcharacters`. Based on how you like to configure the toolbar in your RTE preset you must either
+use the toolbarGroup or the buttonName to display the button at the desired location in the toolbar.
+
+Please take look into the supplied RTE presets to see working examples:
+- :file:`EXT:rte_ckeditor/Configuration/RTE/Default.yaml`
+- :file:`EXT:rte_ckeditor/Configuration/RTE/Full.yaml`
+
+More information can be found in the official CKEditor 4 documentation (toolbar concepts):
+- https://docs.ckeditor.com/ckeditor4/latest/guide/dev_toolbarconcepts.html
+
+.. index:: RTE, ext:rte_ckeditor
index 7af3675..2d473a7 100644 (file)
@@ -19,7 +19,7 @@ editor:
       - { name: clipboard, groups: [ clipboard, cleanup, undo ] }
       - { name: editing, groups: [ spellchecker ] }
       - { name: insert, groups: [ insert ] }
-      - { name: tools, groups: [ table, specialchar ] }
+      - { name: tools, groups: [ table, specialchar, insertcharacters ] }
       - { name: document, groups: [ mode ] }
 
     justifyClasses:
index e3dec37..23f63d2 100644 (file)
@@ -1,5 +1,4 @@
 # Register custom plugins for ckeditor
-# an example is the link plugin to select TYPO3-related links
 editor:
   externalPlugins:
     typo3link: { resource: "EXT:rte_ckeditor/Resources/Public/JavaScript/Plugins/typo3link.js", route: "rteckeditor_wizard_browse_links" }
@@ -7,3 +6,7 @@ editor:
     # 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" }
+    # softhyphen plugin for adding ctrl+dash support to insert a conditional word break
+    softhyphen:
+      resource: "EXT:rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/"
+      enableShortcut: true
index 3969926..7f9c6ef 100644 (file)
@@ -37,6 +37,7 @@ editor:
       - "/"
       - { name: basicstyles, groups: [ basicstyles, align, cleanup ] }
       - { name: paragraph,   groups: [ list, indent, blocks, align, bidi ] }
+      - { name: specialcharacters,   groups: [ insertcharacters ] }
       - "/"
       - { name: styles }
 
diff --git a/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/icons/hidpi/softhyphen.png b/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/icons/hidpi/softhyphen.png
new file mode 100644 (file)
index 0000000..a8d6d2a
Binary files /dev/null and b/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/icons/hidpi/softhyphen.png differ
diff --git a/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/icons/softhyphen.png b/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/icons/softhyphen.png
new file mode 100644 (file)
index 0000000..f5710fe
Binary files /dev/null and b/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/icons/softhyphen.png differ
diff --git a/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/icons/softhyphen.svg b/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/icons/softhyphen.svg
new file mode 100644 (file)
index 0000000..048b54a
--- /dev/null
@@ -0,0 +1 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><defs><style>.cls-1{fill:none;}.cls-2{fill:#464646;}.cls-3{fill:url(#Unbenannter_Verlauf_19);}</style><linearGradient id="Unbenannter_Verlauf_19" x1="3" y1="8" x2="13" y2="8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="0.1" stop-color="#464646"/><stop offset="0.9" stop-color="#464646"/><stop offset="1" stop-opacity="0"/></linearGradient></defs><title>typo3_softhyphen</title><rect class="cls-1" width="16" height="16"/><path class="cls-2" d="M1,8a8.51,8.51,0,0,1,.4-2.7A6.12,6.12,0,0,1,2.79,3H4a9.55,9.55,0,0,0-.78,1.13A7,7,0,0,0,2.67,5.3a5.91,5.91,0,0,0-.32,1.27,9.35,9.35,0,0,0,0,2.86,5.91,5.91,0,0,0,.32,1.27,7,7,0,0,0,.55,1.17A9.55,9.55,0,0,0,4,13H2.79A6.12,6.12,0,0,1,1.4,10.7,8.51,8.51,0,0,1,1,8Z"/><path class="cls-2" d="M15,8a8.51,8.51,0,0,1-.4,2.7A6.12,6.12,0,0,1,13.21,13H12a9.55,9.55,0,0,0,.78-1.13,7,7,0,0,0,.55-1.17,5.91,5.91,0,0,0,.32-1.27,9.35,9.35,0,0,0,0-2.86,5.91,5.91,0,0,0-.32-1.27,7,7,0,0,0-.55-1.17A9.55,9.55,0,0,0,12,3h1.21A6.12,6.12,0,0,1,14.6,5.3,8.51,8.51,0,0,1,15,8Z"/><rect class="cls-3" x="3" y="7" width="10" height="2"/></svg>
\ No newline at end of file
diff --git a/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/da.js b/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/da.js
new file mode 100644 (file)
index 0000000..6d66373
--- /dev/null
@@ -0,0 +1,3 @@
+CKEDITOR.plugins.setLang('softhyphen', 'da', {
+       InsertButton: 'Indsæt blød bindestreg'
+});
diff --git a/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/de.js b/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/de.js
new file mode 100644 (file)
index 0000000..1af6b35
--- /dev/null
@@ -0,0 +1,3 @@
+CKEDITOR.plugins.setLang('softhyphen', 'de', {
+       InsertButton: 'Ein bedingtes Trennzeichen einfügen'
+});
diff --git a/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/en.js b/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/en.js
new file mode 100644 (file)
index 0000000..ff77b38
--- /dev/null
@@ -0,0 +1,3 @@
+CKEDITOR.plugins.setLang('softhyphen', 'en', {
+       InsertButton: 'Insert Soft Hyphen (Conditional word-break)'
+});
diff --git a/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/fr.js b/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/fr.js
new file mode 100644 (file)
index 0000000..a712073
--- /dev/null
@@ -0,0 +1,3 @@
+CKEDITOR.plugins.setLang('softhyphen', 'fr', {
+       InsertButton: 'Insérer une apostrophe'
+});
diff --git a/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/he.js b/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/he.js
new file mode 100644 (file)
index 0000000..9c43b35
--- /dev/null
@@ -0,0 +1,3 @@
+CKEDITOR.plugins.setLang('softhyphen', 'he', {
+       InsertButton: 'הכנס מקף רך'
+});
diff --git a/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/hr.js b/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/hr.js
new file mode 100644 (file)
index 0000000..01cc64b
--- /dev/null
@@ -0,0 +1,3 @@
+CKEDITOR.plugins.setLang('softhyphen', 'hr', {
+       InsertButton: 'Ubaci meku crticu'
+});
diff --git a/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/hu.js b/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/hu.js
new file mode 100644 (file)
index 0000000..b1bc9f7
--- /dev/null
@@ -0,0 +1,3 @@
+CKEDITOR.plugins.setLang('softhyphen', 'hu', {
+       InsertButton: 'Helyezzen be egy feltételes határolót'
+});
diff --git a/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/it.js b/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/it.js
new file mode 100644 (file)
index 0000000..827bc38
--- /dev/null
@@ -0,0 +1,3 @@
+CKEDITOR.plugins.setLang('softhyphen', 'it', {
+       InsertButton: 'Inserisci trattino corto (sillabazione condizionata)'
+});
diff --git a/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/nl.js b/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/nl.js
new file mode 100644 (file)
index 0000000..e31660d
--- /dev/null
@@ -0,0 +1,3 @@
+CKEDITOR.plugins.setLang('softhyphen', 'nl', {
+       InsertButton: 'Zacht koppelteken invoegen'
+});
diff --git a/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/ru.js b/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/lang/ru.js
new file mode 100644 (file)
index 0000000..21d5fe7
--- /dev/null
@@ -0,0 +1,3 @@
+CKEDITOR.plugins.setLang('softhyphen', 'ru', {
+       InsertButton: 'Вставить мягкий перенос'
+});
diff --git a/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/plugin.js b/typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Plugins/softhyphen/plugin.js
new file mode 100644 (file)
index 0000000..f5b43da
--- /dev/null
@@ -0,0 +1,36 @@
+/**
+ * soft hyphen character for CKEditor
+ */
+CKEDITOR.plugins.add("softhyphen", {
+  lang: "da,de,en,fr,he,hr,hu,it,nl,ru", // lang: "ar,ca,da,de,el,en,es,eu,fa,fi,fr,he,hr,hu,it,ja,nl,no,pl,pt,pt-br,ru,sk,sv,tr,zh-cn"
+  icons: 'softhyphen',
+  hidpi: true,
+  init: function (editor) {
+
+    // Default Config
+    var defaultConfig = {
+      enableShortcut: true
+    };
+    var config = CKEDITOR.tools.extend(defaultConfig, editor.config.softhyphen || {}, true);
+
+    // create command "insertSoftHyphen" which inserts the invisible html tag `&shy;`
+    editor.addCommand('insertSoftHyphen', {
+      exec: function (editor) {
+        editor.insertHtml('&shy;');
+      }
+    });
+
+    if (config.enableShortcut) {
+      // enable shortcut ctrl+dash to insert a soft hyphen
+      editor.setKeystroke(CKEDITOR.CTRL + 189 /* char 189 = dash */, 'insertSoftHyphen');
+    }
+
+    // add additional button to insert a soft hyphen via CKEditor toolbar
+    editor.ui.addButton && editor.ui.addButton('softHyphen', {
+      label: editor.lang.softhyphen.InsertButton,
+      command: 'insertSoftHyphen',
+      toolbar: 'insertcharacters',
+      icon: 'softhyphen'
+    });
+  }
+});