CKEditor Add-On "Fontawesome" for TYPO3
, (*1)
This repository provides the add-on "Fontawesome" as a extension for TYPO3 CKEditor.
It extends the default
,full
and minimal
layout of the CKEditor. If you write your own CKE-Preset pls have attention that you not remove the Italic Button, (*2)
TSConfig
Typo3 Constants:
Disable CDN Integration in Frontend, (*3)
plugin.tx_ckeditor_fontawesome.loadCSS =
Set alternativ CDN reference File, (*4)
plugin.tx_ckeditor_fontawesome.css = {$path}
Add Fotawesome in your own RTE Preset
To add this Plug-In in your own RTE Config. Import the Config in your preset., (*5)
imports:
- { resource: "EXT:rte_ckeditor_fontawesome/Configuration/RTE/PluginFA6.yaml" }
At the next step you need to extend your individual Toolbar-Config to add the Clickable Icon., (*6)
...
toolbar:
- [ 'Bold', 'Italic', .....]
...
- [ 'DPFontAwesome' ]
...
Fontawesome 6 Pro
, (*7)
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, (*8)
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:
ui:
DPFontAwesome:
css: 'LINK TO YOUR FONTAWESOME PRO CSS'
Depends on your RTE Config maybe the toolbar button may not appear.
Than you need to add it to your sets., (*9)
editor:
config:
toolbar:
###YOUR_TOOLBARGRP###:
- '|'
- DPFontAwesome
ToDo:
Please give us feedback
We would appreciate any kind of feedback or ideas for further developments to keep improving the extension for your needs., (*10)
Say thanks! and support me
You like this extension? Get something for me (surprise!) from my wishlist on Amazon or the next pizza. Thanks a lot!, (*11)