Skip to content

Instantly share code, notes, and snippets.

@Panman82
Last active July 20, 2017 08:24
Show Gist options
  • Save Panman82/49b317ac4dc9c34b94d8 to your computer and use it in GitHub Desktop.
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.
// 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