jQuery WYSIWYG Rich Text Editor Plugin - Froala Editor

jQuery WYSIWYG Rich Text Editor Plugin - Froala Editor
File Size: 965 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Froala Editor is a simple clean jQuery & HTML5 based WYSIWYG rich text editor that supports auto-save, inline mode, spell check, ajax requests, image callback and many more. The editor can be used for free only for personal and non-profit projects under the CC NC-ND license. 

Please note that the download link is the latest version of the Froala Editor (version 2). You can download the version 1 here.

More examples:

You might also like:

Basic Usage:

1. Include the required CSS files in the head section of the page.

<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/froala_editor.min.css" rel="stylesheet" type="text/css">

2. Include the jQuery javascript library and jQuery Froala Editor plugin at the bottom of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/froala_editor.min.js"></script> 

3. Wrap the Html content you would like to edit in the editor wrapper. The plugin will automatically add a text editor toolbar appending to the wrapper.

<section id="editor">
<div id="edit">
Your editable content goes here
</div>
</section>

4. Initialize the plugin by calling the editable() function.

<script>
$(function(){
$('#edit').editable({
inlineMode: false
})
});
</script>

5. All the available options.

<script>
$(function(){
$('#edit').editable({
autosave: false, // Enable autosave option. Enabling autosave helps preventing data loss.
autosaveInterval: 1000, // Time in milliseconds to define when the autosave should be triggered. 
saveURL: null, // Defines where to post the data when save is triggered. The editor will initialize a POST request to the specified URL passing the editor content in the body parameter of the HTTP request.
blockTags: ["n", "p", "blockquote", "pre", "h1", "h2", "h3", "h4", "h5", "h6"], // Defines what tags list to format a paragraph and their order. 
borderColor: "#252528", // Customize the appearance of the editor by changing the border color.
buttons: ["bold", "italic", "underline", "strikeThrough", "fontSize", "color", "sep", "formatBlock", "align", "insertOrderedList", "insertUnorderedList", "outdent", "indent", "sep", "selectAll", "createLink", "insertImage", "undo", "redo", "html"], // Defines the list of buttons that are available in the editor. 
crossDomain: false, // Make AJAX requests using CORS. 
direction: "ltr", // Sets the direction of the text.
editorClass: "", // Set a custom class for the editor element.
height: "auto", // Set a custom height for the editor element.
imageMargin: 20, // Define a custom margin for image. It will be visible on the margin of the image when float left or right is active.
imageErrorCallback: false,
imageUploadParam: "file", // Customize the name of the param that has the image file in the upload request.
imageUploadURL: "http://uploads.im/api", // A custom URL where to save the uploaded image.
inlineMode: true, // Enable or disable inline mode.
placeholder: "Type something", // Set a custom placeholder to be used when the editor body is empty.
shortcuts: true, // Enable shortcuts. The shortcuts are visible when you hover a button in the editor.
spellcheck: false, // Enables spellcheck.
typingTimer: 250, // Time in milliseconds to define how long the typing pause may be without the change to be saved in the undo stack.
width: "auto" // Set a custom width for the editor element.
})
});
</script>

6. Check the full document for more usages.

Change logs:

v2.5.1 (2017-03-14)

  • pasteAllowedStyleProps is now empty by default.
  • Add wordDeniedTags option.
  • Add wordDeniedAttrs option.
  • Add wordAllowedStyleProps option.
  • Enhancements and Bug Fixing.

v2.5.0 (2017-02-25)

  • Enhanced Word and Excel Paste plugin.
  • Add SK translation.
  • Include Vidyard as a video provider.
  • Add htmlAllowedStyleProps option.
  • Add pasteAllowedStyleProps option.
  • Enhancements and Bug Fixing.

v2.4.2 (2017-02-03)

  • Chrome 56 was breaking sticky toolba

v2.4.1 (2017-01-25)

  • Print plugin
  • Video upload
  • Special characters plugin
  • Add htmlUntouched option
  • Disabling useClasses doesn't use style anymore for images.
  • Enhancements and Bugfixed

v2.4.0 (2016-12-10)

  • 508 Accessibile
  • WCAG 2.0 Accessibile
  • Enhancements and bugfixes

v2.4.0rc1 (2016-11-28)

  • Accesibility - use the editor only with keyboard.
  • Help plugin - show shortcuts that can be used inside the editor.
  • Restructure examples inside the downloaded archive.
  • On key press, use filters only around the current selection.
  • Add default icon template as info to button.
  • Change default font size to 14px instead of 15px.
  • Add link.beforeInsert event.
  • Align placeholder with the first paragraph inside the editable area.
  • Add showOnMobile option when registering a command.
  • Enhancements and Bug fixing

v2.3.4 (2016-07-21)

  • Enhancements and bugfixes.

v2.3.4 (2016-07-21)

  • Enhancements and bugfixes.
  • Add tableResizer option to disable table resize.

v2.3.3 (2016-06-21)

  • Enhancements and bugfixes.
  • Add tableResizer option to disable table resize.

v2.3.2 (2016-06-08)

  • Enhancements and bugfixes.

v2.3.1 (2016-06-03)

  • Enhancements and bugfixes.

v2.3.0 (2016-05-20)

  • Get rid of document.execCommand for applying format.
  • Remove commands.applyProperty method.
  • Add format.apply method.
  • Add format.is method.
  • Add format.remove method.
  • Add format.toggle method.
  • Add format.applyStyle method.
  • Add format.removeStyle method.
  • Allow []{} inside the URLs.
  • Add codeBeautifierOptions option.
  • Show shortcuts in tooltips. Add shortcutsHint option.
  • Adding fr-deletable class to an element would delete the entire element.
  • Add imagePasteProcess option.
  • Allow setting imageDefaultAlign to null.
  • Allow setting imageDefaultDisplay to null.
  • Add iframeStyleFiles option.

v2.2.4 (2016-05-20)

  • Adds the possibility to use em in fontSize.apply method.
  • Cancel image/file upload using ESC key.
  • Enhancements and bugfixes.

v2.2.3 (2016-04-05)

  • Change imageOutputWidth option to imageOutputSize.
  • Enhancements and Bugfixes

v2.2.2 (2016-03-22)

  • Bug fixing

v2.2.1 (2016-02-29)

  • Bug fixing

v2.2.0 (2016-03-02)

  • Draggable plugin.
  • Enable video move.
  • Improve initialization time.
  • Improve minified file size by using $.FE instead of $.FroalaEditor.
  • Share toolbar, popups and other common elements between instances with the same options.
  • Automatically turn off all events on destroy.
  • Add shared events.
  • Change saveInterval option to 10000.
  • Reset content on form reset event.
  • toolbarVisibleWithoutSelection is false by default.
  • Add toolbarContainer option.
  • Add htmlDoNotWrapTags option.
  • Add imageSplitHTML option.
  • Add videoSplitHTML option.
  • Add quickInsertTags option.
  • Remove quickInsertOffset option.
  • Add videoMove option.
  • Enhancements and Bug fixing.

v2.1.0 (2016-01-30)

  • Add pluginsEnabled option.
  • Add plugin property to commands.
  • Add emoticonsUseImage option.
  • Allow notes:// for links.
  • Add quick insert plugin.
  • Preview image while uploading.
  • Add table insert helper.
  • Redesign line breaker icon.
  • emoticonsSet code property needs only the Unicode code (1f600 instead of &#x1f600;).
  • Enhancements and Bug fixing

v2.0.5 (2015-12-15)

  • Add charCounter.count method.
  • Enhancements
  • Bug fixing

v2.0.2 (2015-12-08)

  • Do not parse entities inside SCRIPT and STYLE tags.
  • Enable drop, dragenter, dragover, dragleave and dragend events.
  • toolbarInlineWithoutSelection is enabled by default.
  • Enhancements
  • Bug fixing

v2.0.1 (2015-11-27)

  • When using an iframe the CSS is read directly from the files.
  • imageIframeStyle, videoIframeStyle and tableIframeStyle options were removed.
  • useClasses option converts all classes to inline style.
  • Add Code Beautifier plugin.
  • Editor can be initialized on any element.
  • Add tableStyles option.
  • Add tableMultipleStyles option.
  • Add tableStyle and tableCellHorizontalAlign button.
  • Rename tableVerticalAlign button to tableCellVerticalAlign.
  • Improve initialize performance - modules are no longer ordered on initialization.
  • Add pasteAllowLocalImages option.
  • Enhancements and Bug fixing

v2.0.0 (2015-11-11)

  • Add imageManagerToogleTags option.
  • Add codeView.isActive method.
  • Add codeView.get method.
  • Enhancements and bugfixes.

v2.0.0rc3 (2015-10-07)

  • Add the possibility to use displayText in the linkList object.
  • Add scrollableContainer option.
  • Improve Korean typing.
  • Improve Chinese typing in Microsoft Edge.
  • Add examples for paragraph style plugin.
  • Buttons are toggling popups instead of just showing them.
  • Improve editing inside DIV tags.
  • Improve scrolling on touch devices.
  • Add position.refresh method.
  • Improve cursor position and scrolling on ENTER.
  • Add keepFormatOnDelete option.
  • Add fullscreen.isActive method.
  • Allow to upload SVG images.
  • Bug fixing

v2.0.0rc2 (2015-09-13)

  • Add theme files.
  • Improve examples.
  • Remove placeholderFontSize option.
  • Remove placeholderFontFamily option.
  • Remove placeholderLineHeight option.
  • Bugfix.

v2.0.0rc1 (2015-08-31)

  • 56 new options
  • 108 new methods
  • 21 new events
  • Redesign the interface using the Material Design concept.
  • Redesign popups for a better UX.
  • Display popups below or above based on the window size.
  • Custom toolbar based on screen size.
  • Add button tooltips.
  • Handle enter, backspace and delete actions instead of using the browser's default behavior.
  • Possibility to display the current selection's Font Family, Font Size and Paragraph Format.
  • Improve overall editing experience.
  • Improve editing in full page.
  • Improve sticky toolbar.
  • Toolbar can be added at the bottom of the editing area.
  • Improve RTL detection.
  • Improve selection restore.
  • Improve placeholder customizability.
  • Improve code cleaning.
  • Improve accessibility.
  • Option to edit content inside an iframe.
  • Custom TAB key indentation.
  • New methods to ease cursor positioning.
  • Possibility to add custom shortcuts.
  • Possibility to create custom popups.
  • Block Style plugin was renamed to Paragraph Stlye.
  • Better paste control.
  • Generic way to define buttons and dropdowns.
  • Popup templates.
  • Create alignment plugin.
  • Create save plugin.
  • Create paragraph format plugin.
  • Create emoticons plugin.
  • Create line breaker plugin.
  • Create quote plugin.
  • Table plugin redesign
  • Media Manager was renamed to Image Manager.
  • Image Manager plugin redesign
  • Link plugin redesign
  • Video plugin redesign
  • File plugin redesign
  • HTML View was renamed to Code View.
  • Code View plugin redesign

v1.2.8 (2015-07-10)

  • Add beforeUploadPastedImage event.

v1.2.7 (2015-05-13)

  • Add beforeUploadPastedImage event.
  • Buttons are not simpleTags. Improve cleaning allowedAttrs.
  • Clean HTML that is set inside textarea before adding it to the element.
  • Add doNotJoinTags option.
  • Colors plugin was improved.
  • Add linkAttributes option.
  • Improve imageAltSet, imageFloatedLeft, imageFloatedNone and imageFloatedRight events.
  • Add entities plugin.
  • Add response to the fileUploaded event.
  • Add afterImageUpload and afterFileUpload events.
  • Replace node.children with node.childNodes.
  • Improve imageResize and imageResizeEnd events.
  • Add saveParam.
  • Allow to type in RTL or LTR according to the keyboard type.
  • Improve Danish translation.
  • Improve pasting.
  • Add afterPasteCleanup event.
  • Text inside link is not sanitized anymore
  • Add iconClasses option.
  • Add useFileName option.
  • Add Estonian translation.
  • Bug fixing

v1.2.6 (2015-02-22)

  • Reflect in UI the disable state.
  • Placeholder has no longer italic style.
  • Default linkAutoPrefix value is empty string instead of false.
  • Popups are closed when the window is resized.
  • Enter is no longer copying the style of the previous block element.
  • Allow video preview in all browsers.
  • Check TAB by testing the charCode instead of the string itself.
  • Improve Russian translation.
  • Add allowScript option.
  • Add allowStyle option.
  • Add fullPage option.
  • Add unsupportedAgents option.
  • Add maxCharNumberExceeded event.
  • Bug fixing

v1.2.5 (2015-01-20)

  • Improve overall typing when paragraphy option is false.
  • Add linkAutoPrefix option.
  • Improve cleaning algorithm
  • Submit popups by hitting ENTER.
  • Close popups when hitting ESC.
  • Add defaultTag as experimental.
  • Style tag is no longer allowed in order to prevent XSS.
  • Text is the default selection in the colors dropdown.
  • Add foreColors option.
  • Add backColors option.
  • Add defaultColorOption option.
  • Add backColorsDisabled option.
  • Add foreColorsDisabled option.
  • Improve plain paste.
  • Improve coping text within the editor.
  • fr-tag is no longer added by default. useFrTag should be used instead.
  • editable.imageInserted event has one more param, response, that contains the unprocessed response from the server
  • Extra <p> tags are no longer added in list items.
  • Add customImageButtons option.
  • Add option showNextToCursor.
  • Add multiLine option.
  • Upload files by drag and drop directly in the editor.
  • Replace CTRL + F shortcut by CTRL + E.
  • Improve URL sanitizer.
  • Add urls plugin that would automatically convert URLS.
  • Add fullscreen plugin.
  • Basic iframe support.
  • Add Ukrainian language.
  • Improve Norwegian language.
  • Add scrollableContainer option.
  • Add defaultImageAlignment option.
  • Add defaultVideoAlignment option.
  • Improve undo/redo saving performance
  • allowedEmptyTags tags is no longer available.
  • allowedBlankTags should be used to allow empty tag that don't have any attributes.
  • Bug fixing

v1.2.4 (2014-11-25)

  • Add disabled option for buttons.
  • imageInserted event is receiving the jQuery object instead of the image URL.
  • Korean language improvements.
  • Finnish language improvements.
  • Croatian language improvements.
  • PT-BR language improvements.
  • Japanese language improvements.
  • Overall translation improvements.
  • A custom font name can be set in fontList option.
  • Image params are passed to clipboard paste upload requests.
  • Add allowedEmptyTags option.
  • Add selfClosingTags option.
  • insertHTML improvements.
  • Add defaultImageTitle option.
  • Allow Font Awesome icons inside editable area.
  • Bug fixing

v1.2.3 (2014-10-23)

  • Improve events managing mechanism.
  • Improve syncing and undo manager.
  • Improve pasting focus.
  • defaultImageWidth option is ignored if it is set to 0.
  • Add setDirty method.
  • blockTags option accepts more tags now.
  • Improve Word pasting.
  • Improve insertHTML method.
  • Improve floating toolbar when fixedToolbar option is false.
  • Improve button click experience on mobile devices.
  • froala_page.css is renamed to froala_style.css.
  • froala_style.css is no longer included by default and it has to be included separately.
  • Redesign colors plugin.
  • colors option was added.
  • colorsStep option was added.
  • imageDeleteConfirmation option was added.
  • Improve Russian language
  • Add scrolling to allowedAttrs.
  • countCharacters option was added.
  • zIndex option default value is now 2000.
  • typingTimer option default value is now 500.
  • Add removeFormat button.
  • Images pasted from clipboard are now uploaded to http://i.froala.com/upload_base64.
  • Support for callbacks is removed completely. Events should be used instead.
  • Bugs fixed.

v1.2.2 (2014-09-16)

  • Add char_counter plugin.
  • Review list of allowedAttributes.
  • Review list of allowedTags.
  • Add beautifyCode option.
  • Add onPaste event.
  • Add granular control for shortcuts: shortcutsAvailable option.
  • Add convertEmailAddresses option.
  • Improve UX for inserting link.
  • Add badLink event.
  • Paste improvements in all browsers
  • Moving images now works in IE too.
  • Add pasteImage option.
  • Improve cleaning.
  • Add royal theme.
  • Add refresh and refreshOnShow options for custom dropdowns.
  • Add refresh option for custom buttons.
  • Show loader when image is inserted by link.
  • Add videoAllowedAttributes and videoAllowedTags.
  • Allow undo/redo without buttons.
  • Add imageTitle option.
  • Bug fixing

v1.2.1 (2014-09-11)

  • Add data-name to the custom buttons and custom dropdowns.
  • Disable editing while uploading image.
  • Improve regular expression that match the attribues to clear.
  • Accept application/json as response from pastedImagesUploadURL.
  • Bug fixing

v1.2.0 (2014-09-04)

  • Bug fixing

v1.1.9 (2014-08-24)

  • Bug fixing

v1.1.8 (2014-08-24)

  • Add linkClasses option.
  • Add headers option.
  • Add withCredentials option.
  • Add focus event.
  • Add blur event.
  • Add initialized event.
  • Improve cleanup methods
  • Cleanup on paste from Word.
  • Improve XSS filters.
  • Paste cleanup improvements.
  • Add popup for editing video.
  • New algorithm to clean the HTML output.
  • Separate stylesheet for page style - froala_page.css.
  • Add HTML code style by default from the editor.
  • Add Hebrew language.
  • Bug fixing

v1.1.7 (2014-07-20)

  • Save/Restore selection works for multiple ranges.
  • Bugs fixed.

v1.1.6 (2014-07-14)

  • Tables.
  • Insert video by URL.
  • Speed improvements.
  • Add support for IE8.
  • Improvement to Android support.
  • Improve mobile popup positioning.
  • The following features are plugins and they are no longer included by default: Block Style, Text and Background colors, Media Manager, Tables, Video, Font Size, Font Family
  • Add simpleAmpersand option.
  • Add imageLink option.
  • Improvements to German languages.
  • Beautifier is used as a separate lib and is no longer available by default.
  • Add maxHeight option.
  • Default is no longer available as default, but options can be toggled.
  • inverseSkin is replaced by theme option.
  • Theme CSS file.
  • Improve HTML output.
  • Improve Italian language translation.
  • Start in color/font size.
  • Allow user to return error from server for image.
  • Replace invisible space with BR tag.
  • Improve French translation.
  • Add saveRequestType option.
  • Callbacks from images get jQuery object as parameter instead of src.
  • Clean HTML with regular expressions instead of jQuery code.
  • Editor can be initialized on image.
  • Editor can be initialized on link.
  • Option to edit the text from the DOM element in a popup.
  • Pass a default list of links to choose from.
  • Add option to open the link in another tab.
  • Add disableRightClick option.
  • Add blockStylesToggle option.
  • Add trackScroll option.
  • Add unlinkButton option.
  • Bugs fixing

v1.1.5 (2014-05-18)

  • Add focus method.
  • Show editor on right click.
  • Editor can now be initialized on image.
  • imageUploadToS3 option to upload to Amazon S3.
  • imageUpload option to disable image upload.
  • customDropdowns option to customize dropdowns.
  • blockStyle command to set a custom blockStyle.
  • blockStyles option to set specific blockStyles.
  • defaultBlockStyle option to set default available block styles.
  • Improve destroy method.
  • Improve placeholder support.
  • Improve coding mode.
  • Improve new line in code and blockquotes.
  • Set media manager to always expect JSON and not text.
  • Update to FontAwesome 4.1.0.
  • Replace paragraph icon.
  • Replace color icon.
  • Add fontFamily button in toolbar.
  • Add blockStyle button in toolbar.
  • Add html button back in toolbar.
  • Allow URLs starting with # and /.
  • Sync when image is dropped.
  • Show editor by key selection in inline mode.
  • Focus input when showing the link popup.
  • Bug fixing

v1.1.4 (2014-05-06)

  • Media manager for images.
  • Add zIndex option.
  • Minimum for autosaveInterval was changed to 100.
  • Improve for XSS support.
  • Improve insertHTML method.
  • saveURL is no longer required to trigger save.
  • Add image restriction by using allowedImageTypes option.
  • CTRL + Backspace is cutting text.
  • CTRL + ] in indenting text.
  • CTRL + [ is outdenting text.
  • CTRL + " is formatting text as quote.
  • CTRL + \ is formatting text as code.
  • Sync before submitting form.
  • Delete image by hitting delete when it is selected.
  • Hitting enter when image is selecting is getting it down.
  • maxImageSize option to restrict image size before upload.
  • Add defaultImageWidth option to set the image size on insertion.
  • afterRemoveImageCallback is now getting the image src as param.
  • Image remove control improved.
  • Horizontal line command.
  • Font family support.
  • Move writeVideo to its own method.
  • Improve wrapping support.
  • Improve getHTML method.
  • Improve block formatting.
  • Setting background color would take into consideration parents too.
  • Improve contentChangedCallback support.
  • Remove invisible characters when saving the HTML.
  • Add isActive method to check if command is active.
  • Improve undo mechanisms.
  • Use a custom version of Modernizr that does not conflict anymore.
  • Improve editor position in Firefox when a scale transform is applied.
  • Selected fontFamily, fontSize or block type appears selected in the dropdown.
  • beforeFileUpload callback.
  • Bug fixing

v1.1.3 (2014-04-08)

  • Custom tags from html are no longer removed.
  • minHeight option.
  • removeFormat method.
  • Image is inserted where the cursor is.
  • Undo preserves selection and cursor position.
  • Please wait message when uploading image.
  • <br> are no longer removed when calling save.
  • Bug fixing

v1.1.2 (2014-03-18)

  • Add textNearImage option.
  • Add imageButtons option.
  • Add alwaysVisible option.
  • Add noFollow option.
  • Add alwaysBlank option
  • Add plainPaste option
  • Add icons option
  • Add callbacks for pasting.
  • Add getText() method.
  • Bugs fixing

v1.1.1 (2014-03-13)

  • image resize fix.

v1.1.0 (2014-03-11)

  • Add language support (28 languages).
  • Inverse skin colors.
  • Blockquote has quote at the beginning.
  • Additional parameters to image upload request.
  • Additional parameters to save request.
  • Video support.
  • Custom buttons in toolbar.
  • Paragraphy option.
  • Improvement and bugs fixed.

v1.0.6 (2014-02-23)

  • update

 


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