dirkpersky/typo3-rte-ckeditor-fontawesome

Adds the Fontawesome add-on to the CKEditor in TYPO3.

Maintainers

👁 dirkp

Package info

github.com/DirkPersky/typo3-rte-ckeditor-fontawesome

Language:HTML

Type:typo3-cms-extension

pkg:composer/dirkpersky/typo3-rte-ckeditor-fontawesome

Statistics

Installs: 151 785

Dependents: 1

Suggesters: 0

Stars: 18

Open Issues: 7

12.2.0 2024-05-09 09:26 UTC

Requires

Requires (Dev)

None

Suggests

None

Provides

None

Conflicts

None

Replaces

  • typo3-ter/rte_ckeditor_fontawesome: 12.2.0

GPL-3.0-or-later 4e2ce77cc8303d1df96292d44d77432d35dfab2d

CKEditorextensiontypo3FontAwesomeiconiconfontrte


README

👁 Donate
👁 Latest Stable Version
👁 TYPO3
👁 License

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

TSConfig

Typo3 Constants:

Disable CDN Integration in Frontend

plugin.tx_ckeditor_fontawesome.loadCSS = 

Set alternativ CDN reference File

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.

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.

 ...
 toolbar:
 - [ 'Bold', 'Italic', .....]
 ...
 - [ 'DPFontAwesome' ]
 ...

Fontawesome 6 Pro

👁 Update YAML

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:
 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.

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.

Say thanks! and support me

You like this extension? Get something for me (surprise!) from my wishlist on Amazon or 👁 Donate
the next pizza. Thanks a lot!

Contact me