Merge pull request #28 from aschmutt/fontawesome-6pro

Fontawesome 6pro

Configuration/RTE/PluginFA5.yaml

@@ -2,7 +2,7 @@
 editor:
   externalPlugins:
     ckeditor_fa5:
-      resource: "EXT:rte_ckeditor_fontawesome/Resources/Public/JavaScript/Plugins/ckeditor_fa5/plugin.js?v=11.5.4"
+      resource: "EXT:rte_ckeditor_fontawesome/Resources/Public/JavaScript/Plugins/ckeditor_fa5/plugin.js?v=11.5.5"
 
   config:
     fontAwesome:

Configuration/RTE/PluginFA5Pro.yaml

@@ -2,7 +2,7 @@
 editor:
   externalPlugins:
     ckeditor_fa5pro:
-      resource: "EXT:rte_ckeditor_fontawesome/Resources/Public/JavaScript/Plugins/ckeditor_fa5pro/plugin.js?v=11.5.4"
+      resource: "EXT:rte_ckeditor_fontawesome/Resources/Public/JavaScript/Plugins/ckeditor_fa5pro/plugin.js?v=11.5.5"
 
   config:
     coreStyles_italic:

Configuration/RTE/PluginFA6.yaml

@@ -2,7 +2,7 @@
 editor:
   externalPlugins:
     ckeditor_fa:
-      resource: "EXT:rte_ckeditor_fontawesome/Resources/Public/JavaScript/Plugins/ckeditor_fa6/plugin.js?v=11.5.4"
+      resource: "EXT:rte_ckeditor_fontawesome/Resources/Public/JavaScript/Plugins/ckeditor_fa6/plugin.js?v=11.5.5"
 
   config:
     fontAwesome:

Configuration/RTE/PluginFA6Pro.yaml

@@ -0,0 +1,16 @@
+# Register wordcount plugin for ckeditor
+editor:
+  externalPlugins:
+    ckeditor_fa:
+      resource: "EXT:rte_ckeditor_fontawesome/Resources/Public/JavaScript/Plugins/ckeditor_fa6pro/plugin.js?v=11.5.5"
+
+  config:
+
+    coreStyles_italic:
+      element: 'i'
+      overrides: 'span'
+
+    extraAllowedContent:
+    - i(*)[*]
+    - span(*)[*]
+    - em(*)[*]

README.md

@@ -78,6 +78,50 @@ Add to your constant or clear this:
 plugin.tx_ckeditor_fontawesome.css = "LINK TO FONTAWESOME PRO"
 ```
 
+## Fontawesome 6 Pro
+
+Usually you have a RTE config in your sitepackage, if not create a new file.    
+* add PluginFA6Pro.yaml to imports 
+* add fontAwesome URL or path to CSS
+* if icons are still missing: check webfonts path in the css and change if necessary
+
+```
+imports:
+- { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
+- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
+- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }
+- { resource: "EXT:rte_ckeditor_fontawesome/Configuration/RTE/PluginFA6Pro.yaml" }
+
+editor:
+  config:
+    fontAwesome:
+      - "EXT:sitepackage/Resources/Public/Fonts/Css/fa6pro-all.css"
+```
+
+## TCA Selector for Fontawesome Icons
+
+You can use the Fontawesome SVG folder as source for a TCA Select field. 
+Change "fileFolder" to the path where your SVGs are located: 
+
+```
+'icon'  => [
+    'exclude' => 1,
+    'label'   => 'Icon',
+    'config'  => [
+        'type'                  => 'select',
+        'renderType'            => 'selectMultipleSideBySide',
+        'fileFolder'            => 'EXT:sitepackage/Resources/Public/Icons/Fontawesome/',
+        'fileFolder_extList'    => 'svg',
+        'fileFolder_recursions' => 0,
+        'size'                  => 5,
+        'minitems'              => 0,
+        'maxitems'              => 1,
+    ],
+],
+```
+
+With npm installation, the SVGs are located in `node_modules/@fortawesome/fontawesome-pro/svgs/light`
+
 ## ToDo:
 - Add FA-Icon in Content Headline Definition.
 

Resources/Public/JavaScript/Plugins/ckeditor_fa5/plugin.js

@@ -1,6 +1,6 @@
 (function ($) {
     var CKEDITOR_FA = {
-        version: '11.5.4'
+        version: '11.5.5'
     };
 
     CKEDITOR.dtd.$removeEmpty.span = 0;

Resources/Public/JavaScript/Plugins/ckeditor_fa5pro/plugin.js

@@ -1,6 +1,6 @@
 (function ($) {
     var CKEDITOR_FA = {
-        version: '11.5.4'
+        version: '11.5.5'
     };
 
     CKEDITOR.dtd.$removeEmpty.span = 0;

Resources/Public/JavaScript/Plugins/ckeditor_fa6/plugin.js

@@ -1,6 +1,6 @@
 (function ($) {
     var CKEDITOR_FA = {
-        version: '11.5.4'
+        version: '11.5.5'
     };
 
     CKEDITOR.dtd.$removeEmpty.span = 0;

Resources/Public/JavaScript/Plugins/ckeditor_fa6pro/css/ckeditor-fa.css

@@ -0,0 +1,38 @@
+
+#ckeditor-fa-icons {
+    text-align: center;
+    white-space: normal;
+    width: 100%;
+    height: 350px;
+    overflow: auto
+}
+
+#ckeditor-fa-icons a {
+    display: inline-block;
+    width: 72px;
+    padding: 5px 0;
+    text-align: center;
+    vertical-align: top
+}
+
+#ckeditor-fa-icons a span {
+    font-size: 28px;
+    display: block;
+    text-align: center
+}
+
+#ckeditor-fa-icons a.active {
+    background-color: rgba(0, 0, 0, .1)
+}
+
+.faSelect {
+    width: 100%
+}
+
+div[name="font-awesome"] .cke_dialog_ui_input_select {
+    width: 100%;
+}
+
+div[name="font-awesome"] .cke_dialog_ui_input_text {
+    min-width: 100px;
+}

Resources/Public/JavaScript/Plugins/ckeditor_fa6pro/dialogs/READNE.md

@@ -0,0 +1,42 @@
+Update Icons https://cdpn.io/MarkBoots/fullpage/LYyeGzo
+
+```javascript
+fetch("https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/metadata/icons.json")
+    .then(response =>response.json()).then(jsondata => {
+        var solid = [], regular = [], brand = [];
+
+        Object.entries(jsondata).forEach(([key, value]) => {
+            if(typeof value.free != 'undefined') {
+                if(value.free.indexOf('brands') >= 0) brand.push(`"${key}"`);
+                if(value.free.indexOf('solid') >= 0) solid.push(`"${key}"`);
+                if(value.free.indexOf('regular') >= 0) regular.push(`"${key}"`);
+            }
+        });
+
+        console.warn('%cSOLID', "font-size:3rem"); console.log(solid.join(','));
+        console.warn('%cREGULAR', "font-size:3rem"); console.log(regular.join(','));
+        console.warn('%cBRAND', "font-size:3rem"); console.log(brand.join(','));
+    });
+```
+
+### Update Icons with bash
+
+When loading with npm, there is a folder with SVGs: 
+
+`node_modules/@fortawesome/fontawesome-pro/svgs/light`
+
+Bash script to get the list of icons:  
+
+```bash
+#!/bin/bash
+
+filelist=""
+for file in *.svg
+do
+  filename="${file%.svg}"
+  filelist+=\"$filename\",
+done
+echo $filelist
+```
+
+=> copy output, remove last `,` and paste into ckeditor-fa.js => `var faLight = [`

Resources/Public/JavaScript/Plugins/ckeditor_fa6pro/plugin.js

@@ -0,0 +1,47 @@
+(function ($) {
+    var CKEDITOR_FA = {
+        version: '11.5.5'
+    };
+
+    CKEDITOR.dtd.$removeEmpty.span = 0;
+    CKEDITOR.dtd.$removeEmpty.em = 0;
+    CKEDITOR.dtd.$removeEmpty.i = 0;
+
+    CKEDITOR.plugins.add('ckeditor_fa', {
+        icons: 'ckeditor-fa',
+        init: function (editor) {
+            editor.addCommand('ckeditor_fa', new CKEDITOR.dialogCommand('ckeditorFaDialog', {
+                allowedContent: 'i(!fa-*)',
+            }));
+            editor.ui.addButton('ckeditor_fa', {
+                label: 'Insert FontAwesome icon',
+                command: 'ckeditor_fa',
+                toolbar: 'insert',
+                icon: this.path + 'icons/fa32x32.png',
+            });
+            CKEDITOR.dialog.add('ckeditorFaDialog', this.path + 'dialogs/ckeditor-fa.js?v=' + CKEDITOR_FA.version);
+            CKEDITOR.document.appendStyleSheet(this.path + 'css/ckeditor-fa.css?v=' + CKEDITOR_FA.version);
+            // add styles
+            if(typeof editor.config.fontAwesome != 'undefined'){
+                editor.config.fontAwesome.map(function (css_file) {
+                    editor.addContentsCss(css_file);
+                    loadCSS(css_file);
+                });
+            }
+        }
+    });
+
+    /**
+     * Load Fontawesome
+     * @param href
+     */
+    function loadCSS(href) {
+        var headID = document.getElementsByTagName('head')[0];
+        var cssLink = document.createElement("link");
+        cssLink.rel = "stylesheet";
+        cssLink.type = "text/css";
+        cssLink.href = href;
+        // add to dom
+        headID.appendChild(cssLink);
+    }
+})(TYPO3.jQuery);

ext_emconf.php

@@ -9,7 +9,7 @@
     'clearCacheOnLoad' => 0,
     'author' => 'Dirk Persky',
     'author_email' => '[email protected]',
-    'version' => '11.5.4',
+    'version' => '11.5.5',
     'constraints' => [
         'depends' => [
             'typo3' => '10.4.0-11.5.99',

ext_localconf.php

@@ -15,5 +15,6 @@
     $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['default'] = 'EXT:rte_ckeditor_fontawesome/Configuration/RTE/DefaultFA6.yaml';
     $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['full'] = 'EXT:rte_ckeditor_fontawesome/Configuration/RTE/FullFA6.yaml';
     $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['minimal'] = 'EXT:rte_ckeditor_fontawesome/Configuration/RTE/MinimalFA6.yaml';
+    $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['fa6pro'] = 'EXT:rte_ckeditor_fontawesome/Configuration/RTE/PluginFa6Pro.yaml';
 })();