Froala custom Icons and skin

by Froala_marketing

HTML

<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />

<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />


<div id="editor"></div>

<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script>

CSS

.fr-box .fr-toolbar.fr-top,
.fr-box .fr-wrapper{
border-radius: 0;
    border: 1px solid #CCCCCC;
}



.fr-toolbar .fr-more-toolbar.fr-expanded{
  border-top: 1px solid #CCCCCC;
}
.fr-box .fr-second-toolbar{
border-radius: 0;
    border: 1px solid #CCCCCC;
}

.fr-toolbar .fr-btn-grp{
  border-right: 1px solid #CCCCCC;
}

.fr-toolbar .fr-btn-grp.fr-float-right{
  border: unset !important;
}

.fr-desktop .fr-command.fr-selected:not(.fr-table-cell), .fr-desktop .fr-command:active, .fr-desktop .fr-command:hover:not(.fr-table-cell), .fr-desktop .fr-command:focus:not(.fr-table-cell), .fr-desktop .fr-command.fr-btn-hover:not(.fr-table-cell), .fr-desktop .fr-command.fr-expanded:not(.fr-table-cell), .fr-toolbar .fr-command.fr-btn.fr-open:not(:hover):not(:focus):not(:active),
.fr-toolbar .fr-more-toolbar{
  background: transparent !important
}
.fr-toolbar .fr-command.fr-btn span, .fr-popup .fr-command.fr-btn span, .fr-modal .fr-command.fr-btn span{
  font-size: 19px !important;
}

JavaScript

// https://icons8.com/line-awesome
FroalaEditor.ICON_TEMPLATES.line_awesome = '<i class= "las la-[NAME]" ></i>';


console.log(FroalaEditor);
//FroalaEditor.ICON_DEFAULT_TEMPLATE = 'svg';
FroalaEditor.ICON_DEFAULT_TEMPLATE = 'svgMultiplePath';
FroalaEditor.ICON_DEFAULT_TEMPLATE = 'font_awesome';

//https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/
FroalaEditor.ICON_TEMPLATES.iconography = '<span class="k-icon k-font-icon k-i-[GNAME]"></span>';

FroalaEditor.ICON_DEFAULT_TEMPLATE = 'iconography';

setIconGNAME("align", "align-middle");
setIconGNAME("align-center", "align-center");
setIconGNAME("align-justify", "align-justify");
setIconGNAME("align-left", "align-left");
setIconGNAME("align-right", "align-right");
setIconGNAME("autoplay", "play-sm");
setIconGNAME("backgroundColor", "pencil");
setIconGNAME("bold", "bold");
setIconGNAME("cancel", "x-outline");
setIconGNAME("centerTableAlign", "table-position-center");
setIconGNAME("centerTableAlignActive", "table-position-center");
setIconGNAME("clearFormatting", "strip-all-formatting");
setIconGNAME("cloudIcon", "cloud");
setIconGNAME("color", "foreground-color");
setIconGNAME("colorsBack", "level-up");
setIconGNAME("deleteAll", "clean-outline");
setIconGNAME("emoticons", "hand");
setIconGNAME("emoticonsBack", "level-up");
setIconGNAME("fileBack", "level-up");
setIconGNAME("filesByURL", "file-bac");
setIconGNAME("filesEmbed", "file-programming");
setIconGNAME("filesUpload", "file-add");
//setIconGNAME("filestackIcon", "align");
//setIconGNAME("filestackIconAdd", "align");
setIconGNAME("findAndReplaceArrowDown", "chevron-down");
setIconGNAME("findAndReplaceArrowUp", "chevron-up");
setIconGNAME("findReplaceIcon", "replace-single");
setIconGNAME("fontFamily", "font-family");
setIconGNAME("fontSize", "font-size");
setIconGNAME("formatOL", "list-ordered");
setIconGNAME("formatOLSimple", "list-roman-big");
setIconGNAME("formatUL",...