Press "Enter" to skip to content

Simple Web Rich Text Editor That Can Export HTML

Rich Text Editor is a simple HTML export web text editor developed with the jQuery library, Bootstrap framework, and the iconic Font Awesome font.

simple rich text editor, rich text editor jquery, jquery text editor bootstrap, jquery text editor codepen, jquery rich text editor with image upload, rich text editor html5

Editor Buttons:

  • Undo
  • Redo
  • Clear Format
  • Text Color
  • Background Color
  • Bold
  • Italic
  • Underline
  • Strikethrough
  • Left Align
  • Center Align
  • Right Align
  • Justify
  • Indent
  • Outdent
  • Unordered List
  • Ordered List
  • H1
  • H2
  • Insert Link
  • Unlink
  • Insert Image
  • Paragraphy
  • Subscript
  • Superscript

How to make use of it:

1. Build the HTML for the rich text editor.

<div class="row align-items-center justify-content-center">
  <div class="col-md-12 col-lg-8">
    <div class="editor" id="editor-1">
    <div class="toolbar">
      <a href="#" data-command='undo' data-toggle="tooltip" data-placement="top" title="Undo"><i class='fa fa-undo'></i></a>
      <a href="#" data-command='redo' data-toggle="tooltip" data-placement="top" title="Redo"><i class='fa fa-redo '></i></a>
      <a href="#" data-command='removeFormat' data-toggle="tooltip" data-placement="top" title="Clear format"><i class='fa fa-times '></i></a>
      <div class="fore-wrapper"><i class='fa fa-font' data-toggle="tooltip" data-placement="top" title="text color" style='color:#C96;'></i>
        <div class="fore-palette">
        </div>
      </div>
      <div class="back-wrapper"><i class='fa fa-font'  data-toggle="tooltip" data-placement="top" title="Background color" style='background:#C96;'></i>
        <div class="back-palette">
        </div>
      </div>
      <a href="#" data-command='bold' data-toggle="tooltip" data-placement="top" title="Bold"><i class='fa fa-bold'></i></a>
      <a href="#" data-command='italic' data-toggle="tooltip" data-placement="top" title="Italic"><i class='fa fa-italic'></i></a>
      <a href="#" data-command='underline' data-toggle="tooltip" data-placement="top" title="Underline"><i class='fa fa-underline'></i></a>
      <a href="#" data-command='strikeThrough' data-toggle="tooltip" data-placement="top" title="Strike through"><i class='fa fa-strikethrough'></i></a>
      <a href="#" data-command='justifyLeft' data-toggle="tooltip" data-placement="top" title="Left align"><i class='fa fa-align-left'></i></a>
      <a href="#" data-command='justifyCenter'><i class='fa fa-align-center' data-toggle="tooltip" data-placement="top" title="Center align"></i></a>
      <a href="#" data-command='justifyRight' data-toggle="tooltip" data-placement="top" title="Right align"><i class='fa fa-align-right'></i></a>
      <a href="#" data-command='justifyFull' data-toggle="tooltip" data-placement="top" title="Justify"><i class='fa fa-align-justify'></i></a>
      <a href="#" data-command='indent' data-toggle="tooltip" data-placement="top" title="Indent"><i class='fa fa-indent'></i></a>
      <a href="#" data-command='outdent'  data-toggle="tooltip" data-placement="top" title="Outdent"><i class='fa fa-outdent'></i></a>
      <a href="#" data-command='insertUnorderedList'  data-toggle="tooltip" data-placement="top" title="Unordered list"><i class='fa fa-list-ul'></i></a>
      <a href="#" data-command='insertOrderedList' data-toggle="tooltip" data-placement="top" title="Ordered list"><i class='fa fa-list-ol'></i></a>
      <a href="#" data-command='h1' data-toggle="tooltip" data-placement="top" title="H1">H1</a>
      <a href="#" data-command='h2'  data-toggle="tooltip" data-placement="top" title="H2">H2</a>
      <a href="#" data-command='createlink' data-toggle="tooltip" data-placement="top" title="Insert link"><i class='fa fa-link'></i></a>
      <a href="#" data-command='unlink' data-toggle="tooltip" data-placement="top" title="Unlink"><i class='fa fa-unlink'></i></a>
      <a href="#" data-command='insertimage' data-toggle="tooltip" data-placement="top" title="Insert image"><i class='fa fa-image'></i></a>
      <a href="#" data-command='p' data-toggle="tooltip" data-placement="top" title="Paragraph">P</a>
      <a href="#" data-command='subscript' data-toggle="tooltip" data-placement="top" title="Subscript"><i class='fa fa-subscript'></i></a>
      <a href="#" data-command='superscript'  data-toggle="tooltip" data-placement="top" title="Superscript"><i class='fa fa-superscript'></i></a>
    </div>
    <div id='editor' class="editorAria" contenteditable>
      <h1><font color="#ff9966">Hello World.</font></h1>
      <p>Just a normal text editor which can export html</p>
      <img src="https://images.unsplash.com/photo-1627241238749-08c691441b09?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80">
    </div>
      </div>
  </div>
</div>

2. Create a button to output the editor content material as HTML.

<button class="btn btn-info" id="getHTML" get-data="editor-1">
  Get HTML
</button>

3. Load the most recent jQuery, Bootstrap, and Font Awesome within the doc.

<link rel="stylesheet" href="/path/to/cdn/fontawesome.min.css" />
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

4. Load editor’s JavaScript and CSS files within the doc.

<link rel="stylesheet" href="style.css" />
<script  src="script.js"></script>

Simple Rich Text Editor Plugin/Github, how to get rich text editor value in jquery, jquery rich text editor set value


See Demo And Download

Official Website(jusoftdev): Click Here

This superior jQuery/javascript plugin is developed by jusoftdev. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.