Skip to content

Instantly share code, notes, and snippets.

@peterkraume
Created October 26, 2017 06:14
Show Gist options
  • Save peterkraume/95106c5b27615e06dcfcb01a62b2a30c to your computer and use it in GitHub Desktop.
Save peterkraume/95106c5b27615e06dcfcb01a62b2a30c to your computer and use it in GitHub Desktop.
Simple CKEditor Plugin for TYPO3 to insert an icon

Plugin structure in mytheme/Resources/Public/CkEditorPlugins

icon-envelope
  plugin.js
  icons
    iconenvelope.png

The icon filename must match the button name but must be in lowercase.

# Load default processing options
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" }
# Add configuration for the editor
# For complete documentation see http://docs.ckeditor.com/#!/api/CKEDITOR.config
editor:
externalPlugins:
icon-envelope: { resource: "EXT:mytheme/Resources/Public/CkEditorPlugins/icon-envelope/plugin.js" }
config:
contentsCss : [ "EXT:rte_ckeditor/Resources/Public/Css/contents.css", "EXT:mytheme/Resources/Public/Css/Rte.css"]
format_tags: "p;h1;h2;h3;h4;h5;pre"
toolbarGroups:
- { name: styles, groups: [ styles, format ] }
- { name: basicstyles, groups: [ basicstyles ] }
- { name: paragraph, groups: [ list, indent, blocks, align ] }
- { name: links, groups: [ links ] }
- { name: clipboard, groups: [ clipboard, cleanup, undo ] }
- { name: editing, groups: [ spellchecker ] }
- { name: insert, groups: [ insert ] }
- { name: tools, groups: [ table, specialchar ] }
- { name: document, groups: [ mode ] }
justifyClasses:
- text-left
- text-center
- text-right
- text-justify
extraPlugins:
- justify
removePlugins:
- image
removeButtons:
- Anchor
- Underline
- Strike
'use strict';
(function () {
CKEDITOR.dtd.$removeEmpty.em = 0;
CKEDITOR.dtd.$removeEmpty.i = 0;
CKEDITOR.plugins.add('icon-envelope', {
icons: 'iconenvelope',
init: function (editor) {
editor.ui.addButton( 'IconEnvelope', {
label: 'Icon E-Mail',
toolbar: 'insert',
command: 'insertIconEnvelope'
});
editor.addCommand( 'insertIconEnvelope', {
exec: function (editor) {
var icon = editor.document.createElement('i');
icon.setAttribute('class', 'fa fa-envelope');
editor.insertElement(icon);
}
});
}
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment