Multi Purpose WYSIWYG Editor - jQuery MultiformTextEditor

Multiform Text Editor is a powerful, multifunctional, highly customizable WYSIWYG Rich Text Editor for writing articles, messages, comments on the web applications.

Works with contentEditable element.

Also supports Inline Mode that displays an editor popup on the selected text within the document.

How to use it:

1. Load Font Awesome for the editor buttons.

<link href="/path/to/font-awesome.min.css" rel="stylesheet">

2. Load jQuery and the Multiform Text Editor plugin in the page.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="jquery.multiform-text-editor.js"></script>

3. To make your web content editable, add the contenteditable="true" attribute to the container.

<div id="example" contenteditable="true" placeholder="Enter text here...">
  Editable content here
</div>

4. Create the HTML for the editor.

<div id="menu" class="menu-edit">
  <b class="frmttxt-mn-it" data-frmt="ngrto" title="Bold">B</b>
  <i class="frmttxt-mn-it fa" data-frmt="itlco" title="Italic" style="font-style: italic;">I</i>
  <u class="frmttxt-mn-it" data-frmt="sblnhdo" title="Underline">U</u>
  &nbsp;&nbsp;❘&nbsp;&nbsp;
  <div class="frmttxt-mn-gp extra-frmt" title="Extra">
    <span><s>S</s>²</span>
    <div class="frmttxt-mn-drpdn">
      <s class="frmttxt-mn-it" data-frmt="rscdo" title="strikethrough">S</s>
      <span class="frmttxt-mn-it" data-frmt="sbrlnhdo" data-val="overline" title="overline" style="text-decoration: overline;">O</span>
      <span class="frmttxt-mn-it sobrescrito" data-frmt="sbrscrto" title="superscript"><span>X</span>²</span>
      <span class="frmttxt-mn-it subscrito" data-frmt="sbscrto" title="subscript"><span>X</span>₂</span>
    </div>
  </div>
  &nbsp;&nbsp;
  <div class="frmttxt-mn-gp tipo-lista" title="List">
    <span class="fa fa-list">&nbsp;</span>
    <div class="frmttxt-mn-drpdn">
      <span class="frmttxt-mn-it fa fa-list-ul" data-frmt="tplist1" title="unordered"><span></span></span>
      <span class="frmttxt-mn-it fa fa-list-ol" data-frmt="tplist2" title="ordered"><span></span></span>
    </div>
  </div>
  &nbsp;&nbsp;&nbsp;❘&nbsp;&nbsp;
  <span class="frmttxt-mn-it fa fa-ban" data-frmt="lmpfrmt" title="Clear formatting"></span>
</div>

5. Initialize the Multiform Text Editor plugin.

$(document).ready(function(){
  $("#menu").formatTxt($("#example"), null, null, function(cx, slc, exc){
    ShowMessage(cx, slc, exc);
  });

  function ShowMessage(cx, slc, exc){
    cx.keyup();
    exc == false ? alert("Not supported - The command was not executed by this browser. If possible, upgrade to a newer version.") : null;
  }
});

6. Customize the apperance of the Multiform Text Editor using your own CSS.

.menu-edit {
  min-height: 30px;
  background-color: #c1cdd4;
  text-align: center;
  font-family: sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: #BBB;
  padding: 0 15px;
  border: 1px solid #ffffff;
  border-bottom: none;
  border-radius: 7px 7px 0 0;
}

.menu-edit > * {
  width: 23px;
  padding: 2px;
  margin: 3px 2px;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  color: #4e4e4e;
}

.menu-edit .frmttxt-mn-it.frmttxt-mn-slcndo {
  background-color: #E8E8E8 !important;
}

.menu-edit .frmttxt-mn-it:not([data-frmt="txtcor"]):hover {
  color: #E4D6C2 !important;
  background-color: #656565 !important;
  border: 1px dotted rgba(204, 204, 204, 0.5) !important;
}

.menu-edit .frmttxt-mn-gp:hover {
  background-color: #E8E8E8 !important;
}

.menu-edit .frmttxt-mn-gp::after {
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top-width: 3px;
  border-top-style: solid;
  border-top-color: #5D5D5D;
  color: inherit;
  content: ' ';
  position: absolute;
  top: 12px;
  left: 21px;
}

.menu-edit .frmttxt-mn-gp .frmttxt-mn-drpdn {
  font-weight: normal;
  max-height: 160px;
  overflow: auto;
  background: #ffffff;
  left: -13px;
  top: 25px;
  margin-top: 0;
  padding: 0;
  border: solid 1px #989898;
  border-top-color: #E0E0E0;
  box-shadow: 2px 4px 10px #989898;
  display: none;
  position: absolute;
  z-index: 1000;
}

.menu-edit .frmttxt-mn-gp .frmttxt-mn-drpdn .frmttxt-mn-it {
  border: 1px dotted #D6D6D6;
  border-top: none;
  border-left: none;
  float: left;
}

.menu-edit .extra-frmt .frmttxt-mn-drpdn {
  width: 102px;
}

.menu-edit .extra-frmt .frmttxt-mn-drpdn .frmttxt-mn-it {
  width: 25px;
  height: 23px;
  padding: 3px;
}

.menu-edit .extra-frmt .sobrescrito, .menu-edit .extra-frmt .subscrito {
  font-weight: 500;
}

.menu-edit .extra-frmt .sobrescrito > span, .menu-edit .extra-frmt .subscrito > span {
  color: rgba(0, 0, 0, 0.2);
}

.menu-edit .tipo-lista > span {
  font-size: 14px;
}

.menu-edit .tipo-lista .frmttxt-mn-drpdn {
  width: 52px;
}

.menu-edit .tipo-lista .frmttxt-mn-drpdn .frmttxt-mn-it {
  width: 25px;
  height: 24px;
  padding-top: 5px;
  font-size: 14px;
}

.menu-edit .fonte-tmnho .frmttxt-mn-drpdn {
  width: 62px;
}

---

This awesome jQuery plugin is developed by multi4me. For more Advanced Usages, please check the demo page or visit the official website.