WYSIWYG editor developed as jQuery plugin.
- jQuery (v.3+, v.3.2+ recommended)
- FontAwesome (v.4.7.0 / v.5+)
src/jquery.richtext.min.js
src/richtext.min.css
To see the latest demo version, you might want to use the following URL: Demo from htmlpreview.github.io
Simply call .richText()
on your jQuery('textarea')
or jQuery('input')
field (other HTML tags are allowed as well, but not recommended).
.richText()
allows several options to be set, the default option object is:
$(element).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
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'
},
// privacy
youtubeCookies: false,
// developer settings
useSingleQuotes: false,
height: 0,
heightPercentage: 0,
id: "",
class: "",
useParagraph: false,
maxlength: 0,
callback: undefined,
useTabForNext: false
});
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 which should work on Windows, Mac and Linux by default. Setting fonts manually will overwrite the array.fontSize
(default:(boolean) true
) :: Allows to use 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
)colors
:: Set own colors for the editor. They will replace the default colors. Example:
var colors;
colors["#FFFFFF"] = 'White';
colors["#000000"] = 'Black';
Uploads/Files
imageUpload
(default:(boolean) true
)fileUpload
(default:(boolean) true
)
Media/Videos
videoEmbed
(default:(boolean) true
) :: Simplify embedding videos from YouTube, Facebook, Vimeo and Dailymotion
Links
urls
(default:(boolean) true
)
Tables
table
(default:(boolean) true
)
Code
removeStyles
(default:(boolean) true
) :: Allows to remove the CSS styles from the selectioncode
(default:(boolean) true
) :: Allows to display the raw HTML code
Custom dropdowns
Custom dropdowns allow to customize in a restricted way the dropdowns in the editor.
fileHTML
:: HTML string of the file dropdown. MUST include an input field (select
,input
ortextarea
) with theid
equal tofileURL
.imageHTML
:: HTML string of the image dropdown. MUST include an input field (select
,input
ortextarea
) with theid
equal toimageURL
.
Translations
translations
:: An object of key-value entries allowing to set other texts/translations for the editor. The keys must stay the same as in the default translation object.
Privacy settings
youtubeCookies
(default:(boolean) false
) :: If set to true, YouTube might set tracking cookies. By default (if the value is set tofalse
),youtube-nocookie.com
will be used to display YouTube videos.
Tabbing
useTabForNext
(default:(boolean) false
) :: If set to true, you can tab to the next input element or RichText editor within thecontenteditable
part of the editor.
Developer settings
useSingleQuotes
(default:(boolean) false
) :: Replaces all double quotes from HTML attributes to single quotes, if set to(boolean) true
.height
(default:(int) 0
) :: Sets a custom height for the editor frame and code view. The default value0
uses the initial height set with CSS. To overwrite the height without using this setting (and without using inline CSS), use the CSS selectors.richText .richText-editor
and.richText .richText-initial
to change the height.heightPercentage
(default:(int) 0
) :: Sets a custom percentage height based on the editor's parent element. This won't work if theheight
option is used as well.id
(default:(string) ""
) :: Sets a custom ID for the editorclass
(default:(string) ""
) :: Sets additional custom classes for the editoruseParagraph
(default:(boolean) false
) :: Uses paragraph tags instead of div containers (browser default) when pressing ENTER, if set totrue
.maxlength
(default:(int) 0
) :: Defines a max length for the text (HTML length not considered!). The default value0
doesn't define any limitcallback
(default:undefined
) :: Sets a callback if the editor has been loaded. The first and only parameter of the callback contains the jQuery element of the editor
There's now the possibility to undo the RichText editor to the state before .richText()
has been called.
For this to work, simply call .unRichText()
on the initial textarea, on which .richText()
has previously been called.
It is possible to delay unRichText()
by a given amount of milliseconds with the parameter: {delay: 2000}
.
Additionally the callback
option is available as well.
How do I set the RichText value through jQuery? Using .val()
doesn't work?
The change
event needs to be triggered, in order to update the value within RichText.
Using .val('Some text').trigger('change')
on your jQuery node will solve your issue.
If you have any ideas, suggestions, issues or bugfixes, feel free to contribute.
Check out the contributing guidelines for ways to offer feedback and contribute.
- Add/remove columns/cells in table after it was created