Basic Editor

by Horia-Adrian Ionescu

HTML

<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.3.5/js/froala_editor.pkgd.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.3.5/css/froala_editor.pkgd.min.css">
<textarea id="edit">
some text <br/>
  some text <br/>
  some text <br/>
</textarea>

CSS

.no-class{
  
}
.custom-class-opt1{
  color: white;
  font-weight:900;
  background-color: black;
}
.custom-class-opt2{
  color: violet;
  font-weight:900;
  font-style: italic;
  background-color: pink;
}

JavaScript

$(function() {
	var buttons = ['bold', 'italic', '|', 'clear', 'myDropdown','|','undo'];

$.FroalaEditor.DefineIcon('dropdownIcon', { NAME: 'magic'})
$.FroalaEditor.RegisterCommand('myDropdown', {
  title: 'My Dropdown',
  type: 'dropdown',
  icon: 'dropdownIcon',
  options: {
    'opt1': 'White on Black',
    'opt2': 'Violet on Pink'
  },
  undo: true,
  focus: true,
  refreshAfterCallback: true,
  callback: function (cmd, val, params) {
  if(!this.format.is("span", {class:"custom-class-"+val})){
  this.format.apply("span", {class:"custom-class-"+val});
  }else{
  this.format.remove("span", {class:"custom-class-"+val});
  }
    
  },
})

    $('#edit').froalaEditor({
    toolbarButtonsSM: buttons,
    toolbarButtonsMD: buttons,
    toolbarButtonsXS: buttons,
    toolbarButtons: buttons,
    })
  });