Minimal Rich Text Editor With jQuery And FontAwesome - RichText

Minimal Rich Text Editor With jQuery And FontAwesome - RichText
File Size: 48 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just another jQuery implementation of the WYSIWYG rich text editor that uses Font Awesome Iconic Font for the editor icons. Licensed under the AGPL-3.0.

How to use 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 style the editor.

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

3. Load JQuery library and the richtext.min.js at the end of the webpage.

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

4. Create a normal textarea element for the editor.

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

5. Calling the plugin will transform the textarea element into a basic WYSIWYG rich text editor.

$('.content').richText();

6. Customize the editor by overriding the following parameter options.

$('.content').richText({
  // text formatting
  bold: true,
  italic: true,
  underline: true,

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

  // lists
  ol: true,
  ul: true,

  // title
  heading: true,

  // fonts
  fonts: true,
  fontList: ["Arial", 
    "Arial Black", 
    "Comic Sans MS", 
    "Courier New", 
    "Geneva", 
    "Georgia", 
    "Helvetica", 
    "Impact", 
    "Lucida Console", 
    "Tahoma", 
    "Times New Roman",
    "Verdana"
    ],
  fontColor: true,
  fontSize: true,

  // uploads
  imageUpload: true,
  fileUpload: true,

  // media
  videoEmbed: 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',
    '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'
  },

  // dev settings
  useSingleQuotes: false,
  height: 0,
  heightPercentage: 0,
  id: "",
  class: "",
  useParagraph: false
  
});

Changelog:

2018-08-27

  • Fix responsive video embedding when using p tags

2018-08-18

  • Minor layout update

2018-07-17

  • Fix keyboard selection issue in FF

2018-07-16

  • Use youtube-nocookie.com by default for YouTube videos

2018-06-13

  • Use youtube-nocookie.com by default for YouTube videos

2018-05-26

  • Minor fix for URL popups
  • Fix selection, frame and minor popup issues

2018-05-01

  • Implement .unRichText() to un-set textarea.richtext()

2018-03-14

  • Update font size functionality.

2018-02-21

  • Fix image positioning

2018-02-09

  • Fix selection issue

2018-01-25

  • Add missing translations and title attributes

2018-01-24

  • Auto-remove empty-tags and prevent wrapping h[1-6] nodes with other h[1-6] nodes

2018-01-15

  • Add context menu for links and images

2018-01-03

  • Minor code improvements

2017-12-09

  • Fix switching between code view and editor

2017-11-21

  • Fix bold,italic and underline formatting for multiple editors

2017-10-19

  • Fix selection issue

2017-10-01

  • Fix restoring selection

2017-09-20

  • Fix selection between editor and code view

2017-09-18

  • Copy selection from editor to code view

2017-09-15

  • Remove logs.

2017-09-11

  • Fix first line HTML tags

2017-09-10

  • Implement paragraph option for new text blocks

2017-09-02

  • Add font formatting

2017-09-01

  • Update code colors

2017-08-26

  • Implement adding new rows by pressing TAB in table

2017-08-24

  • Allow custom editor height (in percentage)

2017-08-18

  • Fix dragging images. Images can not only be resized in the bottom right corner

2017-08-17

  • Remove console output

2017-08-09

  • Fix conflicts

2017-08-04

  • Remove console logs

2017-08-01

  • Minor event listener and single quotes update

2017-07-30

  • Consistency update

2017-07-11

  • Fix Safari selection issue

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