s950329
7/20/2017 - 8:24 AM

This is an ember-cli / ember initializer that changes the Froala Editor icons from the Font Awesome names to the Semantic UI names (technica

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
};