RichText
WYSIWYG editor developed as jQuery plugin.
Requirements
- jQuery (v.3+, v.3.2+ recommended)
- FontAwesome (v.4.7.0 / v.5+)
src/jquery.richtext.min.jssrc/richtext.min.css
Demo
To see the latest demo version, you might want to use the following URL: Demo from htmlpreview.github.io
Initialize editor
Simply call .richText() on your jQuery('textarea') or jQuery('input') field (other HTML tags are allowed as well, but not recommended).
Options
.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 });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,inputortextarea) with theidequal tofileURL.imageHTML:: HTML string of the image dropdown. MUST include an input field (select,inputortextarea) with theidequal 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.comwill be used to display YouTube videos.
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 value0uses 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-editorand.richText .richText-initialto change the height.heightPercentage(default:(int) 0) :: Sets a custom percentage height based on the editor's parent element. This won't work if theheightoption 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 value0doesn't define any limit
Undo RichText
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}.
Contributing
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.
Planned changes
- Add/remove columns/cells in table after it was created
