This time I will share jQuery Plugin and tutorial about Minimal Rich Text Editor With jQuery And FontAwesome – RichText, hope it will help you in programming stack.
| File Size: | 54.2 KB |
|---|---|
| Views Total: | 75691 |
| 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:
1 |
<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.
1 |
<link rel="stylesheet" href="richtext.min.css"> |
3. Load JQuery library and the richtext.min.js at the end of the webpage.
1 |
<link rel="stylesheet" href="richtext.min.css"> |
4. Create a normal textarea element for the editor.
1 |
<textarea class="content" name="example"></textarea> |
5. Calling the plugin will transform the textarea element into a basic WYSIWYG rich text editor.
1 |
$('.content').richText(); |
6. Customize the editor by overriding the following parameter options.
001 |
$('.content').richText({ |
002 |
// text formatting |
003 |
bold: true, |
004 |
italic: true, |
005 |
underline: true, |
006 |
007 |
// text alignment |
008 |
leftAlign: true, |
009 |
centerAlign: true, |
010 |
rightAlign: true, |
011 |
justify: true, |
012 |
013 |
// lists |
014 |
ol: true, |
015 |
ul: true, |
016 |
017 |
// title |
018 |
heading: true, |
019 |
020 |
// fonts |
021 |
fonts: true, |
022 |
fontList: ["Arial", |
023 |
"Arial Black", |
024 |
"Comic Sans MS", |
025 |
"Courier New", |
026 |
"Geneva", |
027 |
"Georgia", |
028 |
"Helvetica", |
029 |
"Impact", |
030 |
"Lucida Console", |
031 |
"Tahoma", |
032 |
"Times New Roman", |
033 |
"Verdana" |
034 |
], |
035 |
fontColor: true, |
036 |
fontSize: true, |
037 |
038 |
// uploads |
039 |
imageUpload: true, |
040 |
fileUpload: true, |
041 |
042 |
// media |
043 |
<a href="https://www.jqueryscript.net/tags.php?/video/">video</a>Embed: true, |
044 |
045 |
// link |
046 |
urls: true, |
047 |
048 |
// tables |
049 |
table: true, |
050 |
051 |
// code |
052 |
removeStyles: true, |
053 |
code: true, |
054 |
055 |
// colors |
056 |
colors: [], |
057 |
058 |
// dropdowns |
059 |
fileHTML: '', |
060 |
imageHTML: '', |
061 |
062 |
// translations |
063 |
translations: { |
064 |
'title': 'Title', |
065 |
'white': 'White', |
066 |
'black': 'Black', |
067 |
'brown': 'Brown', |
068 |
'beige': 'Beige', |
069 |
'darkBlue': 'Dark Blue', |
070 |
'blue': 'Blue', |
071 |
'lightBlue': 'Light Blue', |
072 |
'darkRed': 'Dark Red', |
073 |
'red': 'Red', |
074 |
'darkGreen': 'Dark Green', |
075 |
'green': 'Green', |
076 |
'purple': 'Purple', |
077 |
'darkTurquois': 'Dark Turquois', |
078 |
'turquois': 'Turquois', |
079 |
'darkOrange': 'Dark Orange', |
080 |
'orange': 'Orange', |
081 |
'yellow': 'Yellow', |
082 |
'imageURL': 'Image URL', |
083 |
'fileURL': 'File URL', |
084 |
'linkText': 'Link text', |
085 |
'url': 'URL', |
086 |
'size': 'Size', |
087 |
'responsive': '<a href="https://www.jqueryscript.net/tags.php?/Responsive/">Responsive</a>', |
088 |
'text': 'Text', |
089 |
'openIn': 'Open in', |
090 |
'sameTab': 'Same tab', |
091 |
'newTab': 'New tab', |
092 |
'align': 'Align', |
