Basic Rich Text Editor Using jQuery And Document.designMode

This is a small JavaScript library that adds a basic WYSIWYG editor to an contenteditable element using jQuery, Font Awesome, and Document.designMode API.

How to use it:

1. Include the necessary jQuery library and Font Awesome on the webpage.

<link rel="stylesheet" 
      href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" 
      integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" 
      crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>

2. Add an editor toolbar to your ontenteditable element.

<div id="editor" contenteditable="false">

  <section id="toolbar">

    <div id="bold" class="icon fas fa-bold"></div>
    <div id="italic" class="icon fas fa-italic"></div>
    <div id="underline" class="icon fas fa-underline"></div>
    <div id="strikeThrough" class="icon fas fa-strikethrough"></div>
    <div id="createLink" class="icon fas fa-link"></div>
    <div id="insertUnorderedList" class="icon fas fa-list-ul"></div>
    <div id="insertOrderedList" class="icon fas fa-list-ol"></div>
    <div id="justifyLeft" class="icon fas fa-align-left"></div>
    <div id="justifyRight" class="icon fas fa-align-right"></div>
    <div id="justifyCenter" class="icon fas fa-align-center"></div>
    <div id="justifyFull" class="icon fas fa-align-justify"></div>

  </section>

  <section id="page" contenteditable="true">

    <p id="page-content"></p>

  </section>

</div>

3. Include the main JavaScript file at the bottom of the webpage. Done.

<script src="script.js"></script>

---

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