WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0.

Initialize editor

Simply call .richText() on your jQuery('textarea') or jQuery('input') field (other HTML tags are allowed as well, but not recommended).


  • jQuery (v.3+, v.3.2+ recommended)
  • FontAwesome (v.4.7.0 / v.5+)
  • src/jquery.richtext.min.js
  • src/richtext.min.css

Must Read: Angular Material Simple Rich Text WYSIWYG Editor | MatNgxWig

How to make use of it:

1. Load the required Font Awesome 4.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

2. Load the richtext.min.css to model the editor.

<link rel="stylesheet" href="richtext.min.css">

3. Load the JQuery library and the richtext.min.js.

<link rel="stylesheet" href="richtext.min.css">

4. Create a normal textarea aspect for the editor.

<textarea class="content" name="example"></textarea>

5. Calling the plugin will transform the textarea aspect right into a fundamental WYSIWYG-rich text editor.


6. Customize the editor by the next parameter options.

  // text formatting
  bold: true,
  italic: true,
  underline: true,

  // text alignment
  leftAlign: true,
  centerAlign: true,
  rightAlign: true,
  justify: true,

  // lists
  ol: true,
  ul: true,

  // title
  heading: true,

  // fonts
  fonts: true,
  fontList: ["Arial",
    "Arial Black",
    "Comic Sans MS",
    "Courier New",
    "Lucida Console",
    "Times New Roman",
  fontColor: true,
  fontSize: true,

  // uploads
  imageUpload: true,
  fileUpload: true,

  // media video Embed: true,

  // link
  urls: true,

  // tables
  table: true,

  // code
  removeStyles: true,
  code: true,

  // colors
  colors: [],

  // dropdowns
  fileHTML: '',
  imageHTML: '',

  // translations
  translations: {
    'title': 'Title',
    'white': 'White',
    'black': 'Black',
    'brown': 'Brown',
    'beige': 'Beige',
    'darkBlue': 'Dark Blue',
    'blue': 'Blue',
    'lightBlue': 'Light Blue',
    'darkRed': 'Dark Red',
    'red': 'Red',
    'darkGreen': 'Dark Green',
    'green': 'Green',
    'purple': 'Purple',
    'darkTurquois': 'Dark Turquois',
    'turquois': 'Turquois',
    'darkOrange': 'Dark Orange',
    'orange': 'Orange',
    'yellow': 'Yellow',
    'imageURL': 'Image URL',
    'fileURL': 'File URL',
    'linkText': 'Link text',
    'url': 'URL',
    'size': 'Size',
    'responsive': 'Responsive',
    'text': 'Text',
    'openIn': 'Open in',
    'sameTab': 'Same tab',
    'newTab': 'New tab',
    'align': 'Align',
    'left': 'Left',
    'justify': 'Justify',
    'center': 'Center',
    'right': 'Right',
    'rows': 'Rows',
    'columns': 'Columns',
    'add': 'Add',
    'pleaseEnterURL': 'Please enter an URL',
    'videoURLnotSupported': 'Video URL not supported',
    'pleaseSelectImage': 'Please select an image',
    'pleaseSelectFile': 'Please select a file',
    'bold': 'Bold',
    'italic': 'Italic',
    'underline': 'Underline',
    'alignLeft': 'Align left',
    'alignCenter': 'Align centered',
    'alignRight': 'Align right',
    'addOrderedList': 'Add ordered list',
    'addUnorderedList': 'Add unordered list',
    'addHeading': 'Add Heading/title',
    'addFont': 'Add font',
    'addFontColor': 'Add font color',
    'addFontSize': 'Add font size',
    'addImage': 'Add image',
    'addVideo': 'Add video',
    'addFile': 'Add file',
    'addURL': 'Add URL',
    'addTable': 'Add table',
    'removeStyles': 'Remove styles',
    'code': 'Show HTML code',
    'undo': 'Undo',
    'redo': 'Redo',
    'close': 'Close'

  // privacy
  youtubeCookies: false,

  // dev settings
  useSingleQuotes: false,
  height: 0,
  heightPercentage: 0,
  id: "",
  class: "",
  useParagraph: false,
  maxlength: 0,

  // callback function after init
  callback: undefined


Text formatting

  • bold (default: (boolean) true):: Defines if the bold button should be displayed in the editor toolbar
  • italic (default: (boolean) true):: Defines if the italic button should be displayed
  • underline (default: (boolean) true):: Displays the underline button


  • fonts (default: (boolean) true):: Enables font formatting
  • fontList :: Array of allowed fonts. The fonts set by default are fonts that should work on Windows, Mac, and Linux by default. Setting fonts manually will overwrite the array.
  • fontSize (default: (boolean) true):: Allows using different font sizes

Text alignment

  • leftAlign (default: (boolean) true)
  • centerAlign (default: (boolean) true)
  • rightAlign (default: (boolean) true)
  • justify (default: (boolean) true)


  • ol (default: (boolean) true) :: Ordered list
  • ul (default: (boolean) true) :: Unordered list


  • heading (default: (boolean) true)


  • fontColor (default: (boolean) true)
  • backgroundColor (default: (boolean) true)
  • colors :: Set your own colors for the editor. They will replace the default colors.

See Demo And Download


Official Website(webfashionist): Click Here

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

Related Posts


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…


How to Create Audio Visualizations with JavaScript | Wave.js

Audio Visualizer Library – wave.js is a vanilla javascript audio visualization library that provides 20+ creative audio visualization effects to bring more engagement to your visitor. Contribute…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…

Leave a Reply

Your email address will not be published. Required fields are marked *