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).
Requirements
- 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.
$('.content').richText();
6. Customize the editor by the next parameter options.
$('.content').richText({ // 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", "Geneva", "Georgia", "Helvetica", "Impact", "Lucida Console", "Tahoma", "Times New Roman", "Verdana" ], 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 });
Options
Text formatting
bold
(default:(boolean) true
):: Defines if the bold button should be displayed in the editor toolbaritalic
(default:(boolean) true
):: Defines if the italic button should be displayedunderline
(default:(boolean) true
):: Displays the underline button
Fonts
fonts
(default:(boolean) true)
:: Enables font formattingfontList
:: 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
)
Lists
ol
(default:(boolean) true
) :: Ordered listul
(default:(boolean) true
) :: Unordered list
Titles
heading
(default:(boolean) true
)
Colors
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.