Last active
July 20, 2017 08:24
-
-
Save Panman82/49b317ac4dc9c34b94d8 to your computer and use it in GitHub Desktop.
This is an ember-cli / ember initializer that changes the Froala Editor icons from the Font Awesome names to the Semantic UI names (technically Font Awesome just re-named). For those using Froala Editor with Semantic UI outside of the ember ecosystem, just use lines 5 to 57 and remove `Ember.` prefixes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// app/initializers/froala-semantic-icons.js | |
import Ember from 'ember'; | |
export function initialize() { | |
// https://www.froala.com/wysiwyg-editor/docs/concepts/custom-icon | |
Ember.$.FroalaEditor.ICON_DEFAULT_TEMPLATE = 'semantic_ui'; | |
Ember.$.FroalaEditor.DefineIconTemplate( 'semantic_ui', '<i class="[NAME] icon"></i>'); | |
Ember.$.FroalaEditor.DefineIcon('color' , {NAME:'theme' }); // tint | |
Ember.$.FroalaEditor.DefineIcon('undo' , {NAME:'undo' }); // rotate-left | |
Ember.$.FroalaEditor.DefineIcon('redo' , {NAME:'repeat' }); // rotate-right | |
Ember.$.FroalaEditor.DefineIcon('clearFormatting' , {NAME:'erase' }); // eraser | |
Ember.$.FroalaEditor.DefineIcon('selectAll' , {NAME:'mouse pointer' }); // mouse-pointer | |
Ember.$.FroalaEditor.DefineIcon('align' , {NAME:'align left' }); // align-left | |
Ember.$.FroalaEditor.DefineIcon('align-left' , {NAME:'align left' }); // align-left | |
Ember.$.FroalaEditor.DefineIcon('align-right' , {NAME:'align right' }); // align-right | |
Ember.$.FroalaEditor.DefineIcon('align-center' , {NAME:'align center' }); // align-center | |
Ember.$.FroalaEditor.DefineIcon('align-justify' , {NAME:'align justify' }); // align-justify | |
Ember.$.FroalaEditor.DefineIcon('colors' , {NAME:'theme' }); // tint | |
Ember.$.FroalaEditor.DefineIcon('colorsBack' , {NAME:'arrow left' }); // arrow-left | |
Ember.$.FroalaEditor.DefineIcon('emoticons' , {NAME:'smile' }); // smile-o | |
Ember.$.FroalaEditor.DefineIcon('emoticonsBack' , {NAME:'arrow left' }); // arrow-left | |
Ember.$.FroalaEditor.DefineIcon('insertFile' , {NAME:'file outline' }); // file-outline | |
Ember.$.FroalaEditor.DefineIcon('fileBack' , {NAME:'arrow left' }); // arrow-left | |
Ember.$.FroalaEditor.DefineIcon('fontSize' , {NAME:'text height' }); // text-height | |
Ember.$.FroalaEditor.DefineIcon('insertImage' , {NAME:'picture' }); // picture-o | |
Ember.$.FroalaEditor.DefineIcon('imageByURL' , {NAME:'linkify' }); // link | |
Ember.$.FroalaEditor.DefineIcon('imageAlign' , {NAME:'align center' }); // align-center | |
Ember.$.FroalaEditor.DefineIcon('imageBack' , {NAME:'arrow left' }); // arrow-left | |
Ember.$.FroalaEditor.DefineIcon('imageStyle' , {NAME:'wizard' }); // magic | |
Ember.$.FroalaEditor.DefineIcon('imageSize' , {NAME:'maximize' }); // arrows-alt | |
Ember.$.FroalaEditor.DefineIcon('imageManager' , {NAME:'folder' }); // folder | |
Ember.$.FroalaEditor.DefineIcon('inlineStyle' , {NAME:'paint brush' }); // paint-brush | |
Ember.$.FroalaEditor.DefineIcon('insertLink' , {NAME:'linkify' }); // link | |
Ember.$.FroalaEditor.DefineIcon('linkOpen' , {NAME:'external' }); // external-link | |
Ember.$.FroalaEditor.DefineIcon('linkBack' , {NAME:'arrow left' }); // arrow-left | |
Ember.$.FroalaEditor.DefineIcon('imageLink' , {NAME:'linkify' }); // link | |
Ember.$.FroalaEditor.DefineIcon('linkStyle' , {NAME:'wizard' }); // magic | |
Ember.$.FroalaEditor.DefineIcon('formatUL' , {NAME:'unordered list' }); // list-ul | |
Ember.$.FroalaEditor.DefineIcon('formatOL' , {NAME:'ordered list' }); // list-ol | |
Ember.$.FroalaEditor.DefineIcon('paragraphStyle' , {NAME:'wizard' }); // magic | |
Ember.$.FroalaEditor.DefineIcon('quote' , {NAME:'quote left' }); // quote-left | |
Ember.$.FroalaEditor.DefineIcon('save' , {NAME:'save' }); // floppy-o | |
Ember.$.FroalaEditor.DefineIcon('tableRows' , {NAME:'sidebar' }); // bars | |
Ember.$.FroalaEditor.DefineIcon('tableColumns' , {NAME:'clockwise rotated sidebar' }); // bars fa-rotate-90 | |
Ember.$.FroalaEditor.DefineIcon('tableCells' , {NAME:'square outline' }); // square-o | |
Ember.$.FroalaEditor.DefineIcon('tableStyle' , {NAME:'paint brush' }); // paint-brush | |
Ember.$.FroalaEditor.DefineIcon('tableCellBackground' , {NAME:'theme' }); // tint | |
Ember.$.FroalaEditor.DefineIcon('tableBack' , {NAME:'arrow left' }); // arrow-left | |
Ember.$.FroalaEditor.DefineIcon('tableCellVerticalAlign' , {NAME:'resize vertical' }); // arrows-v | |
Ember.$.FroalaEditor.DefineIcon('tableCellHorizontalAlign', {NAME:'align left' }); // align-left | |
Ember.$.FroalaEditor.DefineIcon('tableCellStyle' , {NAME:'wizard' }); // magic | |
Ember.$.FroalaEditor.DefineIcon('insertVideo' , {NAME:'record' }); // video-camera | |
Ember.$.FroalaEditor.DefineIcon('videoByURL' , {NAME:'linkify' }); // link | |
Ember.$.FroalaEditor.DefineIcon('videoAlign' , {NAME:'align center' }); // align-center | |
Ember.$.FroalaEditor.DefineIcon('videoSize' , {NAME:'maximize' }); // arrows-alt | |
Ember.$.FroalaEditor.DefineIcon('videoBack' , {NAME:'arrow left' }); // arrow-left | |
} | |
export default { | |
name: 'froala-semantic-icons', | |
initialize | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment