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>
--- /dev/null
+.. 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
- { 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:
# 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" }
# 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
- "/"
- { name: basicstyles, groups: [ basicstyles, align, cleanup ] }
- { name: paragraph, groups: [ list, indent, blocks, align, bidi ] }
+ - { name: specialcharacters, groups: [ insertcharacters ] }
- "/"
- { name: styles }
--- /dev/null
+<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
--- /dev/null
+CKEDITOR.plugins.setLang('softhyphen', 'da', {
+ InsertButton: 'Indsæt blød bindestreg'
+});
--- /dev/null
+CKEDITOR.plugins.setLang('softhyphen', 'de', {
+ InsertButton: 'Ein bedingtes Trennzeichen einfügen'
+});
--- /dev/null
+CKEDITOR.plugins.setLang('softhyphen', 'en', {
+ InsertButton: 'Insert Soft Hyphen (Conditional word-break)'
+});
--- /dev/null
+CKEDITOR.plugins.setLang('softhyphen', 'fr', {
+ InsertButton: 'Insérer une apostrophe'
+});
--- /dev/null
+CKEDITOR.plugins.setLang('softhyphen', 'he', {
+ InsertButton: 'הכנס מקף רך'
+});
--- /dev/null
+CKEDITOR.plugins.setLang('softhyphen', 'hr', {
+ InsertButton: 'Ubaci meku crticu'
+});
--- /dev/null
+CKEDITOR.plugins.setLang('softhyphen', 'hu', {
+ InsertButton: 'Helyezzen be egy feltételes határolót'
+});
--- /dev/null
+CKEDITOR.plugins.setLang('softhyphen', 'it', {
+ InsertButton: 'Inserisci trattino corto (sillabazione condizionata)'
+});
--- /dev/null
+CKEDITOR.plugins.setLang('softhyphen', 'nl', {
+ InsertButton: 'Zacht koppelteken invoegen'
+});
--- /dev/null
+CKEDITOR.plugins.setLang('softhyphen', 'ru', {
+ InsertButton: 'Вставить мягкий перенос'
+});
--- /dev/null
+/**
+ * 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 `­`
+ editor.addCommand('insertSoftHyphen', {
+ exec: function (editor) {
+ editor.insertHtml('­');
+ }
+ });
+
+ 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'
+ });
+ }
+});
projects / Packages / TYPO3.CMS.git / commitdiff
