WYSIWYG Rich Text Editor with HTML5 & jQuery

The Multiform Text Editor is a WYSIWYG rich text editor based on HTML5, CSS3 and jQuery. The plugin provides a well designed text editing interface, it allows users to stylized plain text with visual button commands.

This text editor can perform all basic commands on selected text to change its format. e.g bold, underline, italic etc. Also, user can easily pick color for fonts and background.

Plugin Overview

Plugin: Multiform Text Editor
Author: Multi4me
Licence: MIT Licence
Published: June 11, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version and Font Awesome 4
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 32 KB

Main Features

  • Fully responsive & well designed visual user interface.
  • Font Awesome Icons for commands.
  • Basic text formatting Regular, Bold, Italic, Underline on Click.
  • Listing and Linking selected text.
  • Show Microsoft Office like text formatting menu on text select.
  • Beautiful Color Picker to set font and background color.

How to Build HTML5 Rich Text Editor

1. First of all load jQuery and Font Awesome into your HTML page to getting started with Multiform Text Editor.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Font Awesome 4-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

2. After that, include all assets (CSS and JavaScript) files into your project.

<!-- Multiform Text Editor CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<link rel="stylesheet" href="css/tooltipster.css" type="text/css"/>
<link rel="stylesheet" href="css/tooltipster-light-extra.css" type="text/css"/>

<!-- Multiform Text Editor JS -->
<script src="js/jquery.tooltipster.min.js" charset="utf-8"></script>
<script src="js/jquery.multiform-text-editor.js" charset="utf-8"></script>
<script src="js/effects.js"></script>

3. Create HTML structure for text editor as follows.

<div class="center">
   <div class="menu-edit unselectable">
      <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>
        |  
      <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>2</span>
         </div>
      </div>
        
      <div class="frmttxt-mn-gp insere-crctr" title="Symbols">
         <span>O?</span>
         <div class="frmttxt-mn-drpdn">
            <span class="frmttxt-mn-it" data-frmt="insrcrctr">×</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">÷</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">v</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">±</span>
            <span class="frmttxt-mn-it" data-frmt="insrcrctr">=</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">=</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">˜</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">?</span>
            <span class="frmttxt-mn-it" data-frmt="insrcrctr">?</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">?</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">?</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">¬</span>
            <span class="frmttxt-mn-it" data-frmt="insrcrctr">?</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">?</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">?</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">?</span>
            <span class="frmttxt-mn-it" data-frmt="insrcrctr">a</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">ß</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">?</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">?</span>
            <span class="frmttxt-mn-it" data-frmt="insrcrctr">T</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">?</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">µ</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">?</span>
            <span class="frmttxt-mn-it" data-frmt="insrcrctr">p</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">s</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">?</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">O</span>
            <span class="frmttxt-mn-it" data-frmt="insrcrctr">d</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">?</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">8</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">?</span>
            <span class="frmttxt-mn-it" data-frmt="insrcrctr">?</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">?</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">n</span>
            <span class="frmttxt-mn-it" data-frmt="insrcrctr">£</span><span class="frmttxt-mn-it" data-frmt="insrcrctr">€</span>
         </div>
      </div>
        
      <div class="frmttxt-mn-gp tipo-lista fa fa-list" title="List">
         <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>
         |  
      <div class="frmttxt-mn-gp fonte-tmnho" title="Font size">
         <span>T<small>?</small></span>
         <ul class="frmttxt-mn-drpdn">
            <li class="frmttxt-mn-it" data-frmt="fnttmnho" data-val="12px">12px</li>
            <li class="frmttxt-mn-it" data-frmt="fnttmnho" data-val="14px">14px</li>
            <li class="frmttxt-mn-it" data-frmt="fnttmnho" data-val="16px">16px</li>
            <li class="frmttxt-mn-it" data-frmt="fnttmnho" data-val="18px">18px</li>
            <li class="frmttxt-mn-it" data-frmt="fnttmnho" data-val="20px">20px</li>
            <li class="frmttxt-mn-it" data-frmt="fnttmnho" data-val="22px">22px</li>
            <li class="frmttxt-mn-it" data-frmt="fnttmnho" data-val="24px">24px</li>
            <li class="frmttxt-mn-it" data-frmt="fnttmnho" data-val="26px">26px</li>
            <li class="frmttxt-mn-it" data-frmt="fnttmnho" data-val="28px">28px</li>
         </ul>
      </div>
        
      <div class="frmttxt-mn-gp texto-cor fa fa-tint" title="Color">
         <div class="frmttxt-mn-drpdn">
            <span class="frmttxt-mn-it" data-frmt="txtcor" data-val="rgb(255, 255, 255)" style="background: #FFFFFF;"></span><span class="frmttxt-mn-it" data-frmt="txtcor" data-val="rgb(247, 218, 100)" style="background: #F7DA64;"></span><span class="frmttxt-mn-it" data-frmt="txtcor" data-val="rgb(250, 197, 28)" style="background: #FAC51C;"></span>
            <span class="frmttxt-mn-it" data-frmt="txtcor" data-val="rgb(251, 160, 38)" style="background: #FBA026;"></span><span class="frmttxt-mn-it" data-frmt="txtcor" data-val="rgb(243, 121, 52)" style="background: #F37934;"></span><span class="frmttxt-mn-it" data-frmt="txtcor" data-val="rgb(209, 213, 216)" style="background: #D1D5D8;"></span>
            <span class="frmttxt-mn-it" data-frmt="txtcor" data-val="rgb(213, 170, 170)" style="background: #D5AAAA;"></span><span class="frmttxt-mn-it" data-frmt="txtcor" data-val="rgb(235, 107, 86)" style="background: #EB6B56;"></span><span class="frmttxt-mn-it" data-frmt="txtcor" data-val="rgb(226, 80, 65)" style="background: #E25041;"></span>
            <span class="frmttxt-mn-it" data-frmt="txtcor" data-val="rgb(184, 49, 47)" style="background: #B8312F;"></span><span class="frmttxt-mn-it" data-frmt="txtcor" data-val="rgb(170, 213, 170)" style="background: #AAD5AA;"></span><span class="frmttxt-mn-it" data-frmt="txtcor" data-val="rgb(97, 189, 109)" style="background: #61BD6D;"></span>
            <span class="frmttxt-mn-it" data-frmt="txtcor" data-val="rgb(0, 168, 133)" style="background: #00A885;"></span><span class="frmttxt-mn-it" data-frmt="txtcor" data-val="rgb(128, 110, 128)" style="background: #806E80;"></span><span class="frmttxt-mn-it" data-frmt="txtcor" data-val="rgb(149, 64, 129)" style="background: #954081;"></span>
            <span class="frmttxt-mn-it" data-frmt="txtcor" data-val="rgb(84, 172, 210)" style="background: #54ACD2;"></span><span class="frmttxt-mn-it" data-frmt="txtcor" data-val="rgb(44, 130, 201)" style="background: #2C82C9;"></span><span class="frmttxt-mn-it" data-frmt="txtcor" data-val="rgb(71, 85, 119)" style="background: #475577;"></span>
            <span class="frmttxt-mn-it" data-frmt="txtcor" data-val="rgb(0, 0, 0)" style="background: #000000;"></span>
            <span class="frmttxt-mn-it rmv" data-frmt="txtcor" data-val="#888888" style="background: #F1F1F1;">×</span><!-- Usado como remoção de cor de texto ou fundo -->
            <div class="frmttxt-mn-mp" data-mnpl="txtcortp">
               <input id="tipo-cor1" type="radio" name="tipo-cor" value="1" checked><label for="tipo-cor1">Text</label>
               <input id="tipo-cor2" type="radio" name="tipo-cor" value="2"><label for="tipo-cor2">Background</label>
            </div>
         </div>
      </div>
        
      <div class="frmttxt-mn-gp frmttxt-mn-mp insere-link fa fa-link" data-mnpl="insrlnkvl" title="Link">
         <div class="frmttxt-mn-drpdn">
            <input type="text" placeholder="Enter an address"><span class="frmttxt-mn-it" data-frmt="insrlnk">ok</span>
         </div>
      </div>
        
      <span class="frmttxt-mn-it remove-link fa fa-chain-broken" data-frmt="rmvlnk" title="Unlink"> </span>
        |  
      <span class="frmttxt-mn-it fa fa-ban" data-frmt="lmpfrmt" title="Clear formatting"></span>
   </div>
   <!-- Text box -->
   <div id="box-txt-input" class="box-txt" contenteditable="true" placeholder="Enter text here...">
  
   </div>
</div>

4. Initialize the plugin using following statement.

$("#menu-edit").formatTxt($("#box-txt"));