Basic Rich Text Editor Using jQuery And Document.designMode

File Size: 4.33 KB
Views Total: 8941
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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" 
<script src="" 

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 id="page" contenteditable="true">

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



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.