- Back to Docs
- Get Started
- API
- Options
- Methods
- Events
- Other Resources
- Examples
- Concepts
- Plugins
- Languages
- Shortcuts
- Browser Support
- Client Frameworks
- Server SDKs
Options
Aviary Editor
aviaryKey
Type: | Boolean |
Default: | ADOBE_CREATIVE_CLOUD_KEY |
Third Party: | image_aviary.min.js |
The key of your Adobe Creative Cloud SDK to be used for advanced image editing. For more details about getting a key, see: https://creativesdk.zendesk.com/hc/en-us/articles/216369343-Why-and-how-to-register-my-app-.
CODE EXAMPLE
$('.selector').froalaEditor({ aviaryKey: ADOBE_CREATIVE_CLOUD_KEY });
aviaryOptions
Type: | Object |
Default: | { displayImageSize: true, theme: 'minimum' } |
Third Party: | image_aviary.min.js |
The options to be set on the Aviary instance.
CODE EXAMPLE
$('.selector').froalaEditor({ aviaryOptions: { displayImageSize: true, theme: 'dark' } });
Char Counter
charCounterCount
Type: | Boolean |
Default: | true |
Plugin: | char_counter.min.js |
Enables or disables the display of the character counter.
CODE EXAMPLE
$('.selector').froalaEditor({ charCounterCount: false });
charCounterMax
Type: | Number |
Default: | -1 |
Plugin: | char_counter.min.js |
The maximum number of characters allowed to be inserted into the rich text editor. -1
means that there is not limit set.
CODE EXAMPLE
$('.selector').froalaEditor({ charCounterMax: 140 });
Code Beautifier
codeBeautifierOptions
Type: | Object |
Default: | { end_with_newline: true, indent_inner_html: true, extra_liners: "['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'ul', 'ol', 'table', 'dl']", brace_style: 'expand', indent_char: '\t', indent_size: 1, wrap_line_length: 0 } |
Plugin: | code_beautifier.min.js |
Specify the options for Code Beautifier.
CODE EXAMPLE
$('.selector').froalaEditor({ codeBeautifierOptions: { end_with_newline: true, indent_inner_html: true, extra_liners: "['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'ul', 'ol', 'table', 'dl']", brace_style: 'expand', indent_char: ' ', indent_size: 4, wrap_line_length: 0 } });
Code View
codeMirror
Type: | Object |
Default: | window.CodeMirror |
Plugin: | code_view.min.js |
Disable or enable using the CodeMirror library to highlight the HTML view.
Note: This option requires the CodeMirror library to be included.
CODE EXAMPLE
$('.selector').froalaEditor({ codeMirror: false });
codeMirrorOptions
Type: | Object |
Default: | { indentWithTabs: true, lineNumbers: true, lineWrapping: true, mode: 'text/html', tabMode: 'indent', tabSize: 2 } |
Plugin: | code_view.min.js |
Specify the options for CodeMirror.
CODE EXAMPLE
$('.selector').froalaEditor({ codeMirrorOptions: { tabSize: 4 } });
codeViewKeepActiveButtons
Type: | Array |
Default: | ["fullscreen"] |
Plugin: | code_view.min.js |
A list of buttons to keep active while editor is in Code View mode.
CODE EXAMPLE
$('.selector').froalaEditor({ codeViewKeepActiveButtons: [] });
Colors
colorsBackground
Type: | Array |
Default: | [ '#61BD6D', '#1ABC9C', '#54ACD2', '#2C82C9', '#9365B8', '#475577', '#CCCCCC', '#41A85F', '#00A885', '#3D8EB9', '#2969B0', '#553982', '#28324E', '#000000', '#F7DA64', '#FBA026', '#EB6B56', '#E25041', '#A38F84', '#EFEFEF', '#FFFFFF', '#FAC51C', '#F37934', '#D14841', '#B8312F', '#7C706B', '#D1D5D8', 'REMOVE' ] |
Plugin: | colors.min.js |
An array of colors used in the colors popup for background. Passing REMOVE
as a value in the array will display the Clear Formatting button for colors.
CODE EXAMPLE
$('.selector').froalaEditor({ colorsBackground: ['#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE'] });
colorsDefaultTab
Type: | String |
Default: | 'text' |
Plugin: | colors.min.js |
Set the default color tab from the colors popup.
CODE EXAMPLE
$('.selector').froalaEditor({ colorsDefaultTab: 'background' });
colorsHEXInput
Type: | Boolean |
Default: | true |
Plugin: | colors.min.js |
Show HEX input to choose custom color.
CODE EXAMPLE
$('.selector').froalaEditor({ colorsHEXInput: false });
colorsStep
Type: | Number |
Default: | 7 |
Plugin: | colors.min.js |
The number of colors displayed on a line in the colors popup.
CODE EXAMPLE
$('.selector').froalaEditor({ colorsStep: 14 });
colorsText
Type: | Array |
Default: | [ '#61BD6D', '#1ABC9C', '#54ACD2', '#2C82C9', '#9365B8', '#475577', '#CCCCCC', '#41A85F', '#00A885', '#3D8EB9', '#2969B0', '#553982', '#28324E', '#000000', '#F7DA64', '#FBA026', '#EB6B56', '#E25041', '#A38F84', '#EFEFEF', '#FFFFFF', '#FAC51C', '#F37934', '#D14841', '#B8312F', '#7C706B', '#D1D5D8', 'REMOVE' ] |
Plugin: | colors.min.js |
An array of colors used in the colors popup for text. Passing REMOVE
as a value in the array will display the Clear Formatting button for colors.
CODE EXAMPLE
$('.selector').froalaEditor({ colorsText: ['#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE'] });
Draggable
dragInline
Type: | Boolean |
Default: | true |
Plugin: | draggable.min.js |
Specifies how the dragged elements should be placed in the new position. When this option is disabled, the dragged elements are placed between block tags and not inside them.
CODE EXAMPLE
$('.selector').froalaEditor({ dragInline: false });
Embedly
embedlyKey
Type: | String |
Default: | null |
Plugin: | embedly.min.js |
Your key from Embed.ly to remove the "Powered By Banner".
CODE EXAMPLE
$('.selector').froalaEditor({ embedlyKey: XXXXXXXXXXXXXXXXXXXXXX });
embedlyEditButtons
Type: | Array |
Default: | ['embedlyRemove'] |
Plugin: | video.min.js |
The buttons that appear in the edit Embed.ly popup, when an embedded object is selected.
CODE EXAMPLE
$('.selector').froalaEditor({ embedlyEditButtons: [] });
embedlyInsertButtons
Type: | Array |
Default: | ['embedlyBack', '|'] |
Plugin: | embedly.min.js |
The buttons that appear in the insert Embed.ly popup, when an embeded object is inserted into the WYSIWYG editor.
CODE EXAMPLE
$('.selector').froalaEditor({ embedlyInsertButtons: ['embedlyBack', '|'] });
embedlyScriptPath
Type: | String |
Default: | 'https://cdn.embedly.com/widgets/platform.js' |
Plugin: | embedly.min.js |
The default script path for the Embedly JS.
CODE EXAMPLE
$('.selector').froalaEditor({ embedlyScriptPath: 'https://cdn.embedly.com/widgets/platform.js' });
Emoticons
emoticonsSet
Type: | Array |
Default: | [ {code: '1f600', desc: 'Grinning face'}, {code: '1f601', desc: 'Grinning face with smiling eyes'}, {code: '1f602', desc: 'Face with tears of joy'}, {code: '1f603', desc: 'Smiling face with open mouth'}, {code: '1f604', desc: 'Smiling face with open mouth and smiling eyes'}, {code: '1f605', desc: 'Smiling face with open mouth and cold sweat'}, {code: '1f606', desc: 'Smiling face with open mouth and tightly-closed eyes'}, {code: '1f607', desc: 'Smiling face with halo'}, {code: '1f608', desc: 'Smiling face with horns'}, {code: '1f609', desc: 'Winking face'}, {code: '1f60a', desc: 'Smiling face with smiling eyes'}, {code: '1f60b', desc: 'Face savoring delicious food'}, {code: '1f60c', desc: 'Relieved face'}, {code: '1f60d', desc: 'Smiling face with heart-shaped eyes'}, {code: '1f60e', desc: 'Smiling face with sunglasses'}, {code: '1f60f', desc: 'Smirking face'}, {code: '1f610', desc: 'Neutral face'}, {code: '1f611', desc: 'Expressionless face'}, {code: '1f612', desc: 'Unamused face'}, {code: '1f613', desc: 'Face with cold sweat'}, {code: '1f614', desc: 'Pensive face'}, {code: '1f615', desc: 'Confused face'}, {code: '1f616', desc: 'Confounded face'}, {code: '1f617', desc: 'Kissing face'}, {code: '1f618', desc: 'Face throwing a kiss'}, {code: '1f619', desc: 'Kissing face with smiling eyes'}, {code: '1f61a', desc: 'Kissing face with closed eyes'}, {code: '1f61b', desc: 'Face with stuck out tongue'}, {code: '1f61c', desc: 'Face with stuck out tongue and winking eye'}, {code: '1f61d', desc: 'Face with stuck out tongue and tightly-closed eyes'}, {code: '1f61e', desc: 'Disappointed face'}, {code: '1f61f', desc: 'Worried face'}, {code: '1f620', desc: 'Angry face'}, {code: '1f621', desc: 'Pouting face'}, {code: '1f622', desc: 'Crying face'}, {code: '1f623', desc: 'Persevering face'}, {code: '1f624', desc: 'Face with look of triumph'}, {code: '1f625', desc: 'Disappointed but relieved face'}, {code: '1f626', desc: 'Frowning face with open mouth'}, {code: '1f627', desc: 'Anguished face'}, {code: '1f628', desc: 'Fearful face'}, {code: '1f629', desc: 'Weary face'}, {code: '1f62a', desc: 'Sleepy face'}, {code: '1f62b', desc: 'Tired face'}, {code: '1f62c', desc: 'Grimacing face'}, {code: '1f62d', desc: 'Loudly crying face'}, {code: '1f62e', desc: 'Face with open mouth'}, {code: '1f62f', desc: 'Hushed face'}, {code: '1f630', desc: 'Face with open mouth and cold sweat'}, {code: '1f631', desc: 'Face screaming in fear'}, {code: '1f632', desc: 'Astonished face'}, {code: '1f633', desc: 'Flushed face'}, {code: '1f634', desc: 'Sleeping face'}, {code: '1f635', desc: 'Dizzy face'}, {code: '1f636', desc: 'Face without mouth'}, {code: '1f637', desc: 'Face with medical mask'} ] |
Plugin: | emoticons.min.js |
An array of emoticons available in the insert emoticon popup. Each emoticon is defined by an Object
containing the code and description of each emoticon.
CODE EXAMPLE
$('.selector').froalaEditor({ emoticonsSet: [ {code: '1f630', desc: 'Face with open mouth and cold sweat'}, {code: '1f631', desc: 'Face screaming in fear'}, {code: '1f632', desc: 'Astonished face'}, {code: '1f633', desc: 'Flushed face'}, {code: '1f634', desc: 'Sleeping face'}, {code: '1f635', desc: 'Dizzy face'}, {code: '1f636', desc: 'Face without mouth'}, {code: '1f637', desc: 'Face with medical mask'} ] });
emoticonsUseImage
Type: | Boolean |
Default: | true |
Plugin: | emoticons.min.js |
Use EmojiOne svg images instead of Unicode text.
CODE EXAMPLE
$('.selector').froalaEditor({ emoticonsUseImage: false });
emoticonsStep
Type: | Number |
Default: | 8 |
Plugin: | emoticons.min.js |
The number of emoticons displayed on a line in the insert emoticon popup.
CODE EXAMPLE
$('.selector').froalaEditor({ emoticonsStep: 10 });
Entities
entities
Type: | String |
Default: | '"'¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿŒœŠšŸƒˆ˜ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρςστυφχψωϑϒϖ   ‌‍‎‏–—‘’‚“”„†‡•…‰′″‹›‾⁄€ℑ℘ℜ™ℵ←↑→↓↔↵⇐⇑⇒⇓⇔∀∂∃∅∇∈∉∋∏∑−∗√∝∞∠∧∨∩∪∫∴∼≅≈≠≡≤≥⊂⊃⊄⊆⊇⊕⊗⊥⋅⌈⌉⌊⌋⟨⟩◊♠♣♥♦' |
Plugin: | entities.min.js |
A list with the characters that are reserved in HTML. More details about using entities in HTML can be found on W3C and Wikipedia.
CODE EXAMPLE
$('.selector').froalaEditor({ entities: '"'¡¢£¤¥¦' });
File
fileAllowedTypes
Type: | Array |
Default: | ['*'] |
Plugin: | file.min.js |
The list of file types that are allowed to be uploaded. Although this will restrict uploading other types of files, we strongly recommend you to check the file type on the server too.
CODE EXAMPLE
$('.selector').froalaEditor({ fileAllowedTypes: ['application/pdf', 'application/msword'] });
fileInsertButtons
Type: | Array |
Default: | ['fileBack', '|'] |
Plugin: | file.min.js |
The list of buttons that appear in the insert file popup, when inserting a new file into the WYSIWYG editor.
CODE EXAMPLE
$('.selector').froalaEditor({ fileInsertButtons: [] });
fileMaxSize
Type: | Number |
Default: | 1024 * 1024 * 10 |
Plugin: | file.min.js |
The maximum file size allowed on upload in bytes. The default value is 10MB. Although this makes an additional check before uploading the file, it is highly recommended to check file size on your server too.
CODE EXAMPLE
$('.selector').froalaEditor({ fileMaxSize: 1024 * 1024 * 3 });
fileUpload
Type: | Boolean |
Default: | true |
Plugin: | file.min.js |
Enable or disable file upload.
CODE EXAMPLE
$('.selector').froalaEditor({ fileUpload: false });
fileUploadMethod
Type: | String |
Default: | 'POST' |
Plugin: | file.min.js |
The HTTP file upload request type.
CODE EXAMPLE
$('.selector').froalaEditor({ fileUploadMethod: 'PUT' });
fileUploadParam
Type: | String |
Default: | 'file' |
Plugin: | file.min.js |
Customize the name of the parameter that contains the file in the upload request.
CODE EXAMPLE
$('.selector').froalaEditor({ fileUploadParam: 'file_name' });
fileUploadParams
Type: | Object |
Default: | {} |
Plugin: | file.min.js |
Pass additional parameters to the file upload request.
CODE EXAMPLE
$('.selector').froalaEditor({ fileUploadParams: { id: 'my_editor' } });
fileUploadToS3
Type: | Object |
Default: | false |
Plugin: | file.min.js |
Set the options for file upload to S3. All the fields from the example below are required. Also make sure that you have enabled CORS on Amazon.
Note: uploadURL
property can be used instead of bucket
and region
properties to specify a custom URL from Amazon where to upload the image.
CODE EXAMPLE
$('.selector').froalaEditor({ fileUploadToS3: { bucket: 'editor', region: 's3', keyStart: 'uploads/', params: { acl: 'public-read', // ACL according to Amazon Documentation. AWSAccessKeyId: 'ACCESS_KEY', // Access Key from Amazon. policy: 'POLICY_STRING', // Policy string computed in the backend. signature: '', // Signature computed in the backend. // If you are using Amazon Signature V4, the followings should be used instead. // "X-Amz-Credential": "...", // "X-Amz-Algorithm": "AWS4-HMAC-SHA256", // "X-Amz-Date": "...", // Policy: "...", // // "X-Amz-Signature": "", // computed in backend } } });
fileUploadURL
Type: | String |
Default: | 'http://i.froala.com/upload' |
Plugin: | file.min.js |
The URL where the files uploaded by the user are saved. When a file is uploaded, the editor sends the file to the server through a HTTP request. The server should process the data from the file
parameter of the request and return a JSON object containing a link
field with the link to the uploaded file. More details can be found in the File Upload concept article.
E.g. {link: 'path/to/file.pdf'}.
Note 1: By default, the files are stored on our servers, but if you want to have full control over them, you should consider implementing the upload on your server. The files stored on our servers, may be deleted at any time without any notice.
Note 2: If the domain where the file is saved is not the same with the one where the editor is running, you may need to enable requestWithCORS option and make specific customizations on the server. For more information please refer to Cross-origin resource sharing.
CODE EXAMPLE
$('.selector').froalaEditor({ fileUploadURL: '/upload_file' });
fileUseSelectedText
Type: | Boolean |
Default: | false |
Plugin: | file.min.js |
Enables using the file's name instead of the selected text when a file is inserted.
CODE EXAMPLE
$('.selector').froalaEditor({ fileUseSelectedText: true });
Font Family
fontFamily
Type: | Object |
Default: | { 'Arial,Helvetica,sans-serif': 'Arial', 'Georgia,serif': 'Georgia', 'Impact,Charcoal,sans-serif': 'Impact', 'Tahoma,Geneva,sans-serif': 'Tahoma', "'Times New Roman',Times,serif": 'Times New Roman', 'Verdana,Geneva,sans-serif': 'Verdana' } |
Plugin: | font_family.min.js |
Defines the fonts that appear under the Font Family button from the rich text editor's toolbar.
CODE EXAMPLE
$('.selector').froalaEditor({ fontFamily: { 'Arial,Helvetica,sans-serif': 'Font 1', 'Impact,Charcoal,sans-serif': 'Font 2', 'Tahoma,Geneva,sans-serif', 'Font 3' } });
fontFamilyDefaultSelection
Type: | String |
Default: | 'Font Family' |
Plugin: | font_family.min.js |
The text to display when the font family is unkown or nothing is selected.
CODE EXAMPLE
$('.selector').froalaEditor({ fontFamilyDefaultSelection: 'Font' });
fontFamilySelection
Type: | Boolean |
Default: | false |
Plugin: | font_family.min.js |
The Font Family button from the WYSIWYG editor's toolbar is replaced with a dropdown showing the actual font family name for the current text selection.
CODE EXAMPLE
$('.selector').froalaEditor({ fontFamilySelection: true });
Font Size
fontSizeSelection
Type: | Boolean |
Default: | false |
Plugin: | font_size.min.js |
The Font Size button from the WYSIWYG editor's toolbar is replaced with a dropdown showing the actual font size value for the current text selection.
CODE EXAMPLE
$('.selector').froalaEditor({ fontSizeSelection: true });
fontSize
Type: | Array |
Default: | ['8', '9', '10', '11', '12', '14', '18', '24', '30', '36', '48', '60', '72', '96'] |
Plugin: | font_size.min.js |
Defines the font sizes that appear under the Font Size button from the rich text editor's toolbar.
CODE EXAMPLE
$('.selector').froalaEditor({ fontSize: ['8', '10', '12', '14', '18', '30', '60', '96'] });
fontSizeDefaultSelection
Type: | String |
Default: | '12' |
Plugin: | font_size.min.js |
The text to display when the font size is unkown or nothing is selected.
CODE EXAMPLE
$('.selector').froalaEditor({ fontSizeDefaultSelection: '14' });
fontSizeUnit
Type: | String |
Default: | 'px' |
Plugin: | font_size.min.js |
The unit to be used for the font size.
CODE EXAMPLE
$('.selector').froalaEditor({ fontSizeUnit: 'pt' });
General
autofocus
Type: | Boolean |
Default: | false |
Focus the editor instance when the page is loaded.
CODE EXAMPLE
$('.selector').froalaEditor({ autofocus: true });
direction
Type: | String |
Default: | 'auto' |
Sets the direction of the text. Possible values are: 'auto'
, 'ltr'
and 'rtl'
. When the option is set to auto
the editor automatically detects if the keyboard input is RTL or LTR. However only the text inside the editing box changes direction, the toolbar remains the same. The rtl
and ltr
values also change the toolbar's direction.
CODE EXAMPLE
$('.selector').froalaEditor({ direction: 'rtl' });
disableRightClick
Type: | Boolean |
Default: | false |
Disables the default browser context menu. It's recommended to be used if toolbarVisibleWithoutSelection option is enabled.
CODE EXAMPLE
$('.selector').froalaEditor({ disableRightClick: true });
documentReady
Type: | Boolean |
Default: | false |
Turns on the editor best setup for editing documents.
CODE EXAMPLE
$('.selector').froalaEditor({ documentReady: true });
editInPopup
Type: | Boolean |
Default: | false |
Edit the text inside the HTML element on which the editor is initialized on in a popup.
CODE EXAMPLE
$('.selector').froalaEditor({ editInPopup: true });
editorClass
Type: | String |
Default: | null |
Set a custom class for the WYSIWYG editor editing box.
CODE EXAMPLE
$('.selector').froalaEditor({ editorClass: 'custom-class' });
enter
Type: | String |
Default: | $.FroalaEditor.ENTER_P |
Set the default tag to be used when ENTER key is hit. Possible values are $.FroalaEditor.ENTER_P
, $.FroalaEditor.ENTER_DIV
or $.FroalaEditor.ENTER_BR
.
CODE EXAMPLE
$('.selector').froalaEditor({ enter: $.FroalaEditor.ENTER_BR });
fullPage
Type: | Boolean |
Default: | false |
Allows the usage of HTML
, HEAD
, BODY
tags and DOCTYPE
declaration.
Note: Enabling this option will automatically enables the iframe option.
CODE EXAMPLE
$('.selector').froalaEditor({ fullPage: true });
height
Type: | Number |
Default: | null |
Set a height for the rich text editor's editing box.
CODE EXAMPLE
$('.selector').froalaEditor({ height: 300 });
heightMax
Type: | Number |
Default: | null |
Set a maximum height for the rich text editor's editing box.
CODE EXAMPLE
$('.selector').froalaEditor({ heightMax: 500 });
heightMin
Type: | Number |
Default: | null |
Set a minimum height for the rich text editor's editing box.
CODE EXAMPLE
$('.selector').froalaEditor({ heightMin: 200 });
htmlAllowComments
Type: | Boolean |
Default: | true |
Allow comments inside the edited HTML.
CODE EXAMPLE
$('.selector').froalaEditor({ htmlAllowComments: false });
htmlAllowedAttrs
Type: | Array |
Default: | ['accept', 'accept-charset', 'accesskey', 'action', 'align', 'allowfullscreen', 'allowtransparency', 'alt', 'aria-.*', 'async', 'autocomplete', 'autofocus', 'autoplay', 'autosave', 'background', 'bgcolor', 'border', 'charset', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'color', 'cols', 'colspan', 'content', 'contenteditable', 'contextmenu', 'controls', 'coords', 'data', 'data-.*', 'datetime', 'default', 'defer', 'dir', 'dirname', 'disabled', 'download', 'draggable', 'dropzone', 'enctype', 'for', 'form', 'formaction', 'frameborder', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'http-equiv', 'icon', 'id', 'ismap', 'itemprop', 'keytype', 'kind', 'label', 'lang', 'language', 'list', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'mozallowfullscreen', 'multiple', 'muted', 'name', 'novalidate', 'open', 'optimum', 'pattern', 'ping', 'placeholder', 'playsinline', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'reversed', 'rows', 'rowspan', 'sandbox', 'scope', 'scoped', 'scrolling', 'seamless', 'selected', 'shape', 'size', 'sizes', 'span', 'src', 'srcdoc', 'srclang', 'srcset', 'start', 'step', 'summary', 'spellcheck', 'style', 'tabindex', 'target', 'title', 'type', 'translate', 'usemap', 'value', 'valign', 'webkitallowfullscreen', 'width', 'wrap'] |
The list of allowed attributes to be used for tags.
CODE EXAMPLE
$('.selector').froalaEditor({ htmlAllowedAttrs: ['title', 'href', 'alt', 'src', 'style'] });
htmlAllowedEmptyTags
Type: | Array |
Default: | ['textarea', 'a', 'iframe', 'object', 'video', 'style', 'script', '.fa', '.fr-emoticon', '.fr-inner', 'path', 'line'] |
The list of tags that are not removed when they have no content inside.
CODE EXAMPLE
$('.selector').froalaEditor({ htmlAllowedEmptyTags: ['table', 'strong'] });
htmlAllowedStyleProps
Type: | Array |
Default: | [] |
The list of allowed CSS attributes to be used for tags.
CODE EXAMPLE
$('.selector').froalaEditor({ htmlAllowedStyleProps: ['font-family', 'font-size', 'background', 'color', 'width', 'text-align', 'vertical-align', 'background-color'] });
htmlAllowedTags
Type: | Array |
Default: | ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'pre', 'progress', 'queue', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'style', 'section', 'select', 'small', 'source', 'span', 'strike', 'strong', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr'] |
The list of allowed tags.
CODE EXAMPLE
$('.selector').froalaEditor({ htmlAllowedTags: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] });
htmlDoNotWrapTags
Type: | Array |
Default: | ['script', 'style'] |
The list of tags that should not be wrapped inside block tags.
CODE EXAMPLE
$('.selector').froalaEditor({ htmlDoNotWrapTags: ['script', 'style', 'img'] });
htmlExecuteScripts
Type: | Boolean |
Default: | true |
Allow running scripts that are entered in Code View.
CODE EXAMPLE
$('.selector').froalaEditor({ htmlExecuteScripts: false });
htmlIgnoreCSSProperties
Type: | Array |
Default: | [] |
A list of CSS properties to be ignored when useClasses
option is disabled and the CSS from external stylesheets is converted to inline style.
CODE EXAMPLE
$('.selector').froalaEditor({ htmlIgnoreCSSProperties: ['font-family', 'font-size'] });
htmlRemoveTags
Type: | Array |
Default: | ['script', 'style'] |
The list of tags that are removed together with their content.
CODE EXAMPLE
$('.selector').froalaEditor({ htmlRemoveTags: ['script', 'style', 'base'] });
htmlSimpleAmpersand
Type: | Boolean |
Default: | false |
Allows the usage of simple ampersands (&) instead of the relative HTML entity (&). This is not recommended by the W3C XHTML specifications, so this option should remain false
whenever possible.
CODE EXAMPLE
$('.selector').froalaEditor({ htmlSimpleAmpersand: true });
htmlUntouched
Type: | Boolean |
Default: | false |
Leave the HTML inside the editor untouched without doing any special processing to it except HTML cleaning.
CODE EXAMPLE
$('.selector').froalaEditor({ htmlUntouched: true });
iconsTemplate
Type: | String |
Default: | 'font_awesome' |
Set the template to be used for the icons inside the editor UI.
CODE EXAMPLE
$('.selector').froalaEditor({ iconsTemplate: 'font_awesome_5' });
iframe
Type: | Boolean |
Default: | false |
When this option is enabled, the editor's content will be placed in an iframe and isolated from the rest of the page.
CODE EXAMPLE
$('.selector').froalaEditor({ iframe: true });
iframeDefaultStyle
Type: | String |
Default: | 'html{margin: 0px;}body{padding:10px;background:transparent;color:#000000;position:relative;z-index: 2;-webkit-user-select:auto;margin:0px;overflow:hidden;}body:after{content:"";clear:both;display:block}' |
Default style needed by the editor to be used inside the iframe to display content.
CODE EXAMPLE
$('.selector').froalaEditor({ iframeDefaultStyle: 'body{position:relative;z-index:2;}pre{white-space:pre-wrap;word-wrap:break-word;}' });
iframeStyle
Type: | String |
Default: | '' |
Custom style to be used inside the iframe to display content. This style is added over the iframeDefaultStyle
style.
CODE EXAMPLE
$('.selector').froalaEditor({ iframeStyle: 'body{position:relative;z-index:2;}pre{white-space:pre-wrap;word-wrap:break-word;}' });
iframeStyleFiles
Type: | Array |
Default: | [] |
An array with custom CSS files to inject inside the iframe to display content.
CODE EXAMPLE
$('.selector').froalaEditor({ iframeStyleFiles: ['/path/to/my_cssFile.css', '/path/to/other_cssFile.css'] });
indentMargin
Type: | Integer |
Default: | 20 |
The number of pixels to use for indenting the current line.
CODE EXAMPLE
$('.selector').froalaEditor({ indentMargin: 10 });
initOnClick
Type: | Boolean |
Default: | false |
Only the minimum required events are initialized on page load and the rest of them when the user clicks inside the editable area. This is very useful when using multiple editors on the same page because it reduces the page load time.
CODE EXAMPLE
$('.selector').froalaEditor({ initOnClick: true });
keepFormatOnDelete
Type: | Boolean |
Default: | false |
Keep format of the selected text when it is deleted.
CODE EXAMPLE
$('.selector').froalaEditor({ keepFormatOnDelete: true });
multiLine
Type: | Boolean |
Default: | true |
Allows new line to be inserted when ENTER key is hit.
CODE EXAMPLE
$('.selector').froalaEditor({ multiLine: false });
pasteAllowedStyleProps
Type: | Array |
Default: | [] |
The list of allowed CSS attributes to be used for tags on paste.
CODE EXAMPLE
$('.selector').froalaEditor({ pasteAllowedStyleProps: ['font-family', 'font-size', 'color'] });
pasteAllowLocalImages
Type: | Boolean |
Default: | false |
Removes images that have local path (file://) on paste. Enabling this option might result in having mixed content on HTTPS websites.
CODE EXAMPLE
$('.selector').froalaEditor({ pasteAllowLocalImages: true });
pasteDeniedAttrs
Type: | Array |
Default: | ['class', 'id', 'style'] |
Attributes that are removed when pasting something into the rich text editor.
CODE EXAMPLE
$('.selector').froalaEditor({ pasteDeniedAttrs: ['class', 'id'] });
pasteDeniedTags
Type: | Array |
Default: | [] |
Tags that are removed together with their content when pasting something into the rich text editor.
CODE EXAMPLE
$('.selector').froalaEditor({ pasteDeniedTags: ['a', 'i'] });
pastePlain
Type: | Boolean |
Default: | false |
Removes text formatting when pasting content into the rich text editor, but keeps the content's structure.
CODE EXAMPLE
$('.selector').froalaEditor({ pastePlain: true });
placeholderText
Type: | String |
Default: | 'Type Something' |
The placeholder used when the WYSIWYG editor body is empty.
CODE EXAMPLE
$('.selector').froalaEditor({ placeholderText: 'Placeholder' });
pluginsEnabled
Type: | Array |
Default: | null |
The plugins that should be enabled in the current editor instance. By default, all plugins are enabled. Available plugins are: align
, charCounter
, codeBeautifier
, codeView
, colors
, draggable
, embedly
, emoticons
, entities
, file
, fontAwesome
, fontFamily
, fontSize
, fullscreen
, image
, imageTUI
, imageManager
, inlineStyle
, inlineClass
, lineBreaker
, lineHeight
, link
, lists
, paragraphFormat
, paragraphStyle
, quickInsert
, quote
, save
, table
, url
, video
, wordPaste
.
Note: Each plugin requires you to include the corresponding JS and CSS files. Here is the complete list of plugins and the files required by them.
CODE EXAMPLE
$('.selector').froalaEditor({ pluginsEnabled: ['image', 'link'] });
requestHeaders
Type: | Object |
Default: | {} |
An Object with additional header key/value pairs to send along with requests using the XMLHttpRequest transport.
CODE EXAMPLE
$('.selector').froalaEditor({ requestHeaders: { custom_header: 'My custom header data.' } });
requestWithCredentials
Type: | Boolean |
Default: | false |
A that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. For more information refer to XMLHttpRequest.withCredentials.
CODE EXAMPLE
$('.selector').froalaEditor({ requestWithCredentials: true });
requestWithCORS
Type: | Boolean |
Default: | true |
Make AJAX requests using CORS. For more information refer to Cross-origin resource sharing.
CODE EXAMPLE
$('.selector').froalaEditor({ requestWithCORS: false });
scrollableContainer
Type: | String |
Default: | 'body' |
Sets the container in which the editor popups are added.
CODE EXAMPLE
$('.selector').froalaEditor({ scrollableContainer: '#my_scrollable_container' });
shortcutsEnabled
Type: | Array |
Default: | ['show', 'bold', 'italic', 'underline', 'strikeThrough', 'indent', 'outdent', 'undo', 'redo', 'insertImage', 'createLink'] |
Granular control for enabling or disabling specific shortcuts.
CODE EXAMPLE
$('.selector').froalaEditor({ shortcutsEnabled: ['bold', 'italic'] });
shortcutsHint
Type: | Boolean |
Default: | true |
When enabled, the shortcut is displayed in the button tooltip.
CODE EXAMPLE
$('.selector').froalaEditor({ shortcutsHint: false });
spellcheck
Type: | Boolean |
Default: | true |
Enables browser spellcheck for the text inside the editing box.
CODE EXAMPLE
$('.selector').froalaEditor({ spellcheck: false });
tabIndex
Type: | Number |
Default: | null |
The tabIndex to set on the editor element.
CODE EXAMPLE
$('.selector').froalaEditor({ tabIndex: 10 });
tabSpaces
Type: | Integer |
Default: | 0 |
When TAB key is hit, the editor will add the specified number of space. If set to 0 the TAB key allows default navigation through the page.
CODE EXAMPLE
$('.selector').froalaEditor({ tabSpaces: 4 });
theme
Type: | String |
Default: | null |
Specify the theme name to use in the editor. The theme should be included as CSS. For more details please read the color themes example.
CODE EXAMPLE
$('.selector').froalaEditor({ theme: "dark" });
toolbarBottom
Type: | Boolean |
Default: | false |
Enable or disable positioning the toolbar at the bottom of the editor. This option is not available on mobile devices.
CODE EXAMPLE
$('.selector').froalaEditor({ toolbarBottom: true });
toolbarButtons
Type: | Array |
Default: | ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineClass', 'inlineStyle', 'paragraphStyle', 'lineHeight', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'fontAwesome', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'getPDF', 'spellChecker', 'help', 'html', '|', 'undo', 'redo'] |
The list of buttons that appear in the rich text editor's toolbar on large devices (≥ 1200px).
Note: |
will insert a vertical separator line in the toolbar, and -
a horizontal one.
Some of the buttons above require a specific plugin. Here is the complete list of plugins and the files required by each them.
• align
button requires align
plugin;
• color
button requires colors
plugin;
• embedly
button requires embedly
plugin;
• emoticons
button requires emoticons
plugin;
• fontFamily
button requires fontFamily
plugin;
• fontSize
button requires fontSize
plugin;
• formatOL
and formatUL
buttons require lists
plugin;
• fullscreen
button requires fullscreen
plugin;
• getPDF
button requires print
plugin;
• html
button requires codeView
plugin;
• inlineStyle
button requires inlineStyle
plugin;
• inlineClass
button requires inlineClass
plugin;
• insertFile
button requires file
plugin;
• insertImage
button requires image
plugin;
• insertLink
button requires link
plugin;
• insertTable
button requires table
plugin;
• insertVideo
button requires video
plugin;
• paragraphFormat
button requires paragraphFormat
plugin;
• paragraphStyle
button requires paragraphStyle
plugin;
• print
button requires print
plugin;
• quote
button requires quote
plugin;
• specialCharacters
button requires specialCharacters
plugin;
CODE EXAMPLE
$('.selector').froalaEditor({ toolbarButtons: ['bold', 'italic', 'underline'] });
toolbarButtonsMD
Type: | Array |
Default: | null |
The list of buttons that appear in the rich text editor's toolbar on medium devices (≥ 992px). By default on MD screens, the editor uses the same buttons as for toolbarButtons.
Note: Some of the buttons above require a specific plugin. See toolbarButtons option for more details.
CODE EXAMPLE
$('.selector').froalaEditor({ toolbarButtonsMD: ['bold', 'italic', 'underline'] });
toolbarButtonsSM
Type: | Array |
Default: | ['fullscreen', 'bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'insertLink', 'insertImage', 'insertTable', 'undo', 'redo'] |
The list of buttons that appear in the rich text editor's toolbar on small devices (≥ 768px).
Note: Some of the buttons above require a specific plugin. See toolbarButtons option for more details.
CODE EXAMPLE
$('.selector').froalaEditor({ toolbarButtonsSM: ['bold', 'italic', 'underline'] });
toolbarButtonsXS
Type: | Array |
Default: | ['bold', 'italic', 'fontFamily', 'fontSize', 'undo', 'redo'] |
The list of buttons that appear in the rich text editor's toolbar on extra small devices (< 768px).
Note: Some of the buttons above require a specific plugin. See toolbarButtons option for more details.
CODE EXAMPLE
$('.selector').froalaEditor({ toolbarButtonsXS: ['bold', 'italic', 'underline'] });
toolbarContainer
Type: | Boolean |
Default: | null |
A custom HTML selector placing the toolbar inside.
CODE EXAMPLE
$('.selector').froalaEditor({ toolbarContainer: '#toolbarContainer' });
toolbarInline
Type: | Boolean |
Default: | false |
Enable or disable inline mode.
CODE EXAMPLE
$('.selector').froalaEditor({ toolbarInline: true });
toolbarSticky
Type: | Boolean |
Default: | true |
Keeps the toolbar at the top of the editing box in basic mode. Disabling this option, will keep the toolbar at the top of the page when scrolling down.
CODE EXAMPLE
$('.selector').froalaEditor({ toolbarSticky: false });
toolbarStickyOffset
Type: | Number |
Default: | 0 |
The offset of the sticky toolbar from top of the page. If toolbarBottom option is used, then this option will define the offset of the toolbar from the bottom of the page.
CODE EXAMPLE
$('.selector').froalaEditor({ toolbarStickyOffset: 50 });
toolbarVisibleWithoutSelection
Type: | Boolean |
Default: | false |
Keeps the editor visible next to the cursor even when there is no selection.
Note: This option is available only when the toolbarInline option is set to true
.
CODE EXAMPLE
$('.selector').froalaEditor({ toolbarVisibleWithoutSelection: true });
tooltips
Type: | Boolean |
Default: | true |
Control if tooltips are shown when getting with mouse over the buttons from the toolbar.
CODE EXAMPLE
$('.selector').froalaEditor({ tooltips: false });
typingTimer
Type: | Number |
Default: | 500 |
Time in milliseconds to define how long the typing pause may be without the change to be saved in the undo stack. The minimum value that can be set is 500.
CODE EXAMPLE
$('.selector').froalaEditor({ typingTimer: 750 });
useClasses
Type: | Boolean |
Default: | true |
When this options is disabled the edited content will have the external CSS properties converted to inline style.
Note: For this option to work correctly, it is necessary to load the CSS files from the same domain the editor is running on.
CODE EXAMPLE
$('.selector').froalaEditor({ useClasses: false });
width
Type: | String |
Default: | 'auto' |
Sets the width of the editing box.
CODE EXAMPLE
$('.selector').froalaEditor({ width: '800' });
zIndex
Type: | Number |
Default: | 1 |
The zIndex to set on the editor toolbars and popups.
CODE EXAMPLE
$('.selector').froalaEditor({ zIndex: 2501 });
Help
helpSets
Type: | Array |
Default: | [ { title: 'Inline Editor', commands: [ { val: 'OSkeyE', desc: 'Show the editor' } ] }, { title: 'Common actions', commands: [ { val: 'OSkeyC', desc: 'Copy' }, { val: 'OSkeyX', desc: 'Cut' }, { val: 'OSkeyV', desc: 'Paste' }, { val: 'OSkeyZ', desc: 'Undo' }, { val: 'OSkeyShift+Z', desc: 'Redo' }, { val: 'OSkeyK', desc: 'Insert Link' }, { val: 'OSkeyP', desc: 'Insert Image' } ] }, { title: 'Basic Formatting', commands: [ { val: 'OSkeyA', desc: 'Select All' }, { val: 'OSkeyB', desc: 'Bold' }, { val: 'OSkeyI', desc: 'Italic' }, { val: 'OSkeyU', desc: 'Underline' }, { val: 'OSkeyS', desc: 'Strikethrough' }, { val: 'OSkey]', desc: 'Increase Indent' }, { val: 'OSkey[', desc: 'Decrease Indent' } ] }, { title: 'Quote', commands: [ { val: 'OSkey\'', desc: 'Increase quote level' }, { val: 'OSkeyShift+\'', desc: 'Decrease quote level' } ] }, { title: 'Image / Video', commands: [ { val: 'OSkey+', desc: 'Resize larger' }, { val: 'OSkey-', desc: 'Resize smaller' } ] }, { title: 'Table', commands: [ { val: 'Alt+Space', desc: 'Select table cell' }, { val: 'Shift+Left/Right arrow', desc: 'Extend selection one cell' }, { val: 'Shift+Up/Down arrow', desc: 'Extend selection one row' } ] }, { title: 'Navigation', commands: [ { val: 'OSkey/', desc: 'Shortcuts' }, { val: 'Alt+F10', desc: 'Focus popup / toolbar' }, { val: 'Esc', desc: 'Return focus to previous position' } ] } ] |
Plugin: | help.min.js |
An object of items to show in the help modal.
CODE EXAMPLE
$('.selector').froalaEditor({ helpSets: [ { title: 'Common actions', commands: [ { val: 'OSkeyC', desc: 'Copy' }, { val: 'OSkeyX', desc: 'Cut' }, { val: 'OSkeyV', desc: 'Paste' }, { val: 'OSkeyZ', desc: 'Undo' }, { val: 'OSkeyShift+Z', desc: 'Redo' }, { val: 'OSkeyK', desc: 'Insert Link' }, { val: 'OSkeyP', desc: 'Insert Image' } ] }, { title: 'Basic Formatting', commands: [ { val: 'OSkeyA', desc: 'Select All' }, { val: 'OSkeyB', desc: 'Bold' }, { val: 'OSkeyI', desc: 'Italic' }, { val: 'OSkeyU', desc: 'Underline' }, { val: 'OSkeyS', desc: 'Strikethrough' }, { val: 'OSkey]', desc: 'Increase Indent' }, { val: 'OSkey[', desc: 'Decrease Indent' } ] }] });
Image
imageAllowedTypes
Type: | Array |
Default: | ['jpeg', 'jpg', 'png', 'gif', 'webp'] |
Plugin: | image.min.js |
The list of image types that are allowed to be uploaded. Although this will restrict uploading other types of files, we strongly recommend you to check the file type on the server too.
CODE EXAMPLE
$('.selector').froalaEditor({ imageAllowedTypes: ['jpeg', 'jpg', 'png'] });
imageAltButtons
Type: | Array |
Default: | ['imageBack', '|'] |
Plugin: | image.min.js |
The list of buttons that appear in the edit image alternate text popup, when changing the alternate text of the image.
CODE EXAMPLE
$('.selector').froalaEditor({ imageAltButtons: ['imageBack'] });
imageCORSProxy
Type: | String |
Default: | 'https://cors-anywhere.froala.com' |
Plugin: | image.min.js |
Proxy server to be used for reading images inserted by URL and upload them to a custom server. By default we provide a proxy hosted on our servers, however for full control, we recommend setting up your own proxy by using the details from CORS Anywhere.
CODE EXAMPLE
$('.selector').froalaEditor({ imageCORSProxy: 'https://cors-anywhere.herokuapp.com' });
imageDefaultAlign
Type: | String |
Default: | 'center' |
Plugin: | image.min.js |
Sets the default image alignment when it is inserted in the rich text editor. Possible values are 'left'
, 'center'
and 'right'
.
CODE EXAMPLE
$('.selector').froalaEditor({ imageDefaultAlign: 'left' });
imageDefaultDisplay
Type: | String |
Default: | 'block' |
Plugin: | image.min.js |
Sets the default display for an image when is is inserted in the rich text. Possible options are: 'inline'
and 'block'
.
CODE EXAMPLE
$('.selector').froalaEditor({ imageDefaultDisplay: 'inline' });
imageDefaultWidth
Type: | Number |
Default: | 300 |
Plugin: | image.min.js |
Sets the default width of the image when it is inserted in the rich text editor. Setting it to 0
will not set any width.
CODE EXAMPLE
$('.selector').froalaEditor({ imageDefaultWidth: 200 });
imageEditButtons
Type: | Array |
Default: | ['imageReplace', 'imageAlign', 'imageCaption', 'imageRemove', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageAlt', 'imageSize'] |
Plugin: | image.min.js |
The list of buttons that appear in the edit image popup, when an image is selected. If Image Aviary
plugin is included, then 'aviary'
can be used as an option as well.
CODE EXAMPLE
$('.selector').froalaEditor({ imageEditButtons: ['imageReplace', 'imageAlign', 'imageCaption', 'imageRemove'] });
imageInsertButtons
Type: | Array |
Default: | ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'] |
Plugin: | image.min.js |
The list of buttons that appear in the insert image popup, when inserting a new image into the WYSIWYG editor.
CODE EXAMPLE
$('.selector').froalaEditor({ imageInsertButtons: ['imageBack', '|', 'imageManager'] });
imageMaxSize
Type: | Number |
Default: | 1024 * 1024 * 10 |
Plugin: | image.min.js |
The maximum image size allowed on upload in bytes. The default value is 10MB. Although this makes an additional check before uploading the image, it is highly recommended to check image size on your server too.
CODE EXAMPLE
$('.selector').froalaEditor({ imageMaxSize: 1024 * 1024 * 3 });
imageMinWidth
Type: | Number |
Default: | 16 |
Plugin: | image.min.js |
The minimum width in PX the image can be resized to.
CODE EXAMPLE
$('.selector').froalaEditor({ imageMinWidth: 32 });
imageMove
Type: | Boolean |
Default: | true |
Plugin: | image.min.js |
Allows changing the position of the images by dragging them. This option will work correctly only when including the draggable plugin.
CODE EXAMPLE
$('.selector').froalaEditor({ imageMove: false });
imageMultipleStyles
Type: | Boolean |
Default: | true |
Plugin: | image.min.js |
Allows multiple image styles to be selected at a time.
CODE EXAMPLE
$('.selector').froalaEditor({ imageMultipleStyles: false });
imagePaste
Type: | Boolean |
Default: | true |
Plugin: | image.min.js |
Allows pasting images from clipboard.
CODE EXAMPLE
$('.selector').froalaEditor({ imagePaste: false });
imagePasteProcess
Type: | Boolean |
Default: | false |
Plugin: | image.min.js |
Use default image settings for pasted images.
CODE EXAMPLE
$('.selector').froalaEditor({ imagePasteProcess: true });
imageResize
Type: | Boolean |
Default: | true |
Plugin: | image.min.js |
Disables image resize when set to false
.
CODE EXAMPLE
$('.selector').froalaEditor({ imageResize: false });
imageResizeWithPercent
Type: | Boolean |
Default: | false |
Plugin: | image.min.js |
By default the image resize is using PX. Enabling this option will use % instead when resizing an image inside the editor.
CODE EXAMPLE
$('.selector').froalaEditor({ imageResizeWithPercent: true });
imageRoundPercent
Type: | Boolean |
Default: | false |
Plugin: | image.min.js |
Force image percent to round to integer while resizing.
CODE EXAMPLE
$('.selector').froalaEditor({ imageRoundPercent: true });
imageOutputSize
Type: | Boolean |
Default: | false |
Plugin: | image.min.js |
When this option is enabled, the images will get the width and height set as attribute in the output.
CODE EXAMPLE
$('.selector').froalaEditor({ imageOutputSize: true });
imageSizeButtons
Type: | Array |
Default: | ['imageBack', '|'] |
Plugin: | image.min.js |
The list of buttons that appear in the edit image size popup, when editing the image's width and height.
CODE EXAMPLE
$('.selector').froalaEditor({ imageSizeButtons: ['imageBack'] });
imageSplitHTML
Type: | Boolean |
Default: | false |
Plugin: | image.min.js |
Enables splitting the HTML when inserting a new image.
CODE EXAMPLE
$('.selector').froalaEditor({ imageSplitHTML: true });
imageStyles
Type: | Object |
Default: | { 'fr-rounded': 'Rounded', 'fr-bordered': 'Bordered' } |
Plugin: | image.min.js |
Set custom styles for the selected image. The classes should be defined in CSS, otherwise no changes will be visible on the image's appearance.
CODE EXAMPLE
$('.selector').froalaEditor({ imageStyles: { class1: 'Class 1', class2: 'Class 2', class3: 'Class 3' } });
imageTextNear
Type: | Boolean |
Default: | true |
Plugin: | image.min.js |
Allows text near an image when it is aligned to the left or to the right. Disabling this option will make the display
button for image editor popup unavailable.
CODE EXAMPLE
$('.selector').froalaEditor({ imageTextNear: false });
imageUpload
Type: | Boolean |
Default: | true |
Plugin: | image.min.js |
Enable or disable image upload.
CODE EXAMPLE
$('.selector').froalaEditor({ imageUpload: false });
imageAddNewLine
Type: | Boolean |
Default: | false |
Plugin: | image.min.js |
Add new line after inserting an image when enabled.
CODE EXAMPLE
$('.selector').froalaEditor({ imageAddNewLine: true });
imageUploadMethod
Type: | String |
Default: | 'POST' |
Plugin: | image.min.js |
The HTTP image upload request type.
CODE EXAMPLE
$('.selector').froalaEditor({ imageUploadMethod: 'PUT' });
imageUploadParam
Type: | String |
Default: | 'file' |
Plugin: | image.min.js |
Customize the name of the parameter that contains the image file in the upload request.
CODE EXAMPLE
$('.selector').froalaEditor({ imageUploadParam: 'file_name' });
imageUploadParams
Type: | Object |
Default: | {} |
Plugin: | image.min.js |
Pass additional parameters to the upload request.
CODE EXAMPLE
$('.selector').froalaEditor({ imageUploadParams: { id: 'my_editor' } });
imageUploadRemoteUrls
Type: | Boolean |
Default: | true |
Plugin: | image.min.js |
Upload images inserted by URL to custom server instead of linking them by URL.
CODE EXAMPLE
$('.selector').froalaEditor({ imageUploadRemoteUrls: false });
imageUploadToS3
Type: | Object |
Default: | false |
Plugin: | image.min.js |
Set the options for image upload to S3. All the fields from the example below are required. Also make sure that you have enabled CORS on Amazon.
Note: uploadURL
property can be used instead of bucket
and region
properties to specify a custom URL from Amazon where to upload the image.
CODE EXAMPLE
$('.selector').froalaEditor({ imageUploadToS3: { bucket: 'editor', // Your bucket region. region: 's3-us-east-1', keyStart: 'uploads/', params: { acl: 'public-read', // ACL according to Amazon Documentation. AWSAccessKeyId: 'ACCESS_KEY', // Access Key from Amazon. policy: 'POLICY_STRING', // Policy string computed in the backend. signature: '', // Signature computed in the backend. // If you are using Amazon Signature V4, the followings should be used instead. // "X-Amz-Credential": "...", // "X-Amz-Algorithm": "AWS4-HMAC-SHA256", // "X-Amz-Date": "...", // Policy: "...", // // "X-Amz-Signature": "", // computed in backend } } });
imageUploadURL
Type: | String |
Default: | 'http://i.froala.com/upload' |
Plugin: | image.min.js |
The URL where the images uploaded by the user are saved. When an image is uploaded, the editor sends the file to the server through a HTTP request. The server should process the data from the file
parameter of the request and return a JSON object containing a link
field with the link to the uploaded image. More details can be found in the Image Upload concept article.
E.g. {link: 'path/to/image.jpg'}.
Note 1: By default, the images are stored on our servers, but if you want to have full control over them, you should consider implementing the upload on your server. The images stored on our servers, may be deleted at any time without any notice.
Note 2: If the domain where the image is saved is not the same with the one where the editor is running, you may need to enable requestWithCORS option and make specific customizations on the server. For more information please refer to Cross-origin resource sharing.
CODE EXAMPLE
$('.selector').froalaEditor({ imageUploadURL: '/upload_image' });
Image Manager
imageManagerDeleteMethod
Type: | String |
Default: | 'POST' |
Plugin: | image_manager.min.js |
The HTTP image manager delete image request type.
CODE EXAMPLE
$('.selector').froalaEditor({ imageManagerDeleteMethod: 'DELETE' });
imageManagerDeleteParams
Type: | Object |
Default: | {} |
Plugin: | image_mananger.min.js |
Additional parameters passed to the image manager image delete request.
CODE EXAMPLE
$('.selector').froalaEditor({ imageManagerDeleteParams: {user_id: 4219762} });
imageManagerDeleteURL
Type: | String |
Default: | '' |
Plugin: | image_manager.min.js |
The URL where the HTTP request is done to delete the image. The request will contain the image source as src
parameter.
CODE EXAMPLE
$('.selector').froalaEditor({ imageManagerDeleteURL: 'http://example.com/delete_image' });
imageManagerLoadMethod
Type: | String |
Default: | 'GET' |
Plugin: | image_manager.min.js |
The HTTP image manager load images request type.
CODE EXAMPLE
$('.selector').froalaEditor({ imageManagerLoadMethod: 'POST' });
imageManagerLoadParams
Type: | Object |
Default: | {} |
Plugin: | image_manager.min.js |
Additional parameters passed to the load images request from the image manager.
CODE EXAMPLE
$('.selector').froalaEditor({ imageManagerLoadParams: {user_id: 4219762} });
imageManagerLoadURL
Type: | String |
Default: | 'http://i.froala.com/load-files' |
Plugin: | image_manager.min.js |
The URL where the HTTP request is done in order to load a page of images that appear in the image manager. The response should be an array with an Object for each image, similar to:
[ { url: 'http://exmaple.com/images/photo1.jpg', thumb: "http://exmaple.com/thumbs/photo1.jpg", tag: 'flower' }, { url: 'http://exmaple.com/images/photo2.jpg', thumb: "http://exmaple.com/thumbs/photo2.jpg", tag: 'sport' } ]
Where
url
is required, thumb
is recommended and tag
is optional. The image Object may also contain additional data that will be saved as image attributes data-*
. E.g.: [ { url: 'http://exmaple.com/images/photo1.jpg', thumb: "http://exmaple.com/thumbs/photo1.jpg", tag: 'flower', name: "Photo 1 Name", id: 103454285, } ]
<img src='https://exmaple.com/images/photo1.jpg' data-name='Photo 1 Name' data-id='103454285'>
CODE EXAMPLE
$('.selector').froalaEditor({ imageManagerLoadURL: 'http://example.com/load_images' });
imageManagerPageSize
Type: | Number |
Default: | 12 |
Plugin: | image_manager.min.js |
The number of images loaded per page in the image manager.
CODE EXAMPLE
$('.selector').froalaEditor({ imageManagerPageSize: 10 });
imageManagerPreloader
Type: | String |
Default: | '' |
Plugin: | image_manager.min.js |
The path to a gif image to be displayed while loading the images from the server in the image manager. If no option is specified, "Loading.." text will appear.
CODE EXAMPLE
$('.selector').froalaEditor({ imageManagerPreloader: '/images/loader.gif' });
imageManagerScrollOffset
Type: | Number |
Default: | 20 |
Plugin: | image_manager.min.js |
The distance in pixels from the bottom of the scrollable content at which to trigger the loading of the next page of images.
CODE EXAMPLE
$('.selector').froalaEditor({ imageManagerScrollOffset: 10 });
Inline Style
inlineStyles
Type: | Object |
Default: | { 'Big Red': 'font-size: 20px; color: red;', 'Small Blue': 'font-size: 14px; color: blue;' } |
Plugin: | inline_style.min.js |
Set custom styles for the selected text. This option is an Object where the key is the name of the new style that appears in the dropdown and the value specifies the CSS properties for it.
CODE EXAMPLE
$('.selector').froalaEditor({ inlineStyles: { 'Big Red': 'font-size: 20px; color: red;', 'Small Blue': 'font-size: 14px; color: blue;' } });
Inline Class
inlineClasses
Type: | Object |
Default: | { 'fr-class-code': 'Code', 'fr-class-highlighted': 'Highlighted', 'fr-class-transparency': 'Transparent' } |
Plugin: | inline_class.min.js |
Set custom classes for the selected text. This option is an Object where the key is the name of the new class that appears in the dropdown and the value specifies the class name for it.
CODE EXAMPLE
$('.selector').froalaEditor({ inlineClasses: { 'fr-class-code': 'Code', 'fr-class-highlighted': 'Highlighted', 'fr-class-transparency': 'Transparent' } });
Language
language
Type: | String |
Default: | null |
Select the language to be used in the rich text editor's interface. The corresponding language file is required: /langs/es.js.
CODE EXAMPLE
$('.selector').froalaEditor({ language: 'es' });
Line Breaker
lineBreakerOffset
Type: | Number |
Default: | 15 |
Plugin: | line_breaker.min.js |
The distance in pixels from the top or bottom of an element at which to show the line-breaker.
CODE EXAMPLE
$('.selector').froalaEditor({ lineBreakerOffset: 20 });
lineBreakerTags
Type: | Array |
Default: | ['table', 'hr', 'form', 'dl', 'span.fr-video', '.fr-embedly', '.fr-img-caption'] |
Plugin: | line_breaker.min.js |
The list of HTML tags between which the line-breaker should appear.
CODE EXAMPLE
$('.selector').froalaEditor({ lineBreakerTags: ['table', 'hr', 'form'] });
Link
linkAlwaysBlank
Type: | Boolean |
Default: | false |
Plugin: | link.min.js |
When enabled, all links open in a new tab and no option to set this action would be presented in the UI.
CODE EXAMPLE
$('.selector').froalaEditor({ linkAlwaysBlank: true });
linkAlwaysNoFollow
Type: | Boolean |
Default: | true |
Plugin: | link.min.js |
Specifies if the rel="nofollow"
attribute should be added on all links.
CODE EXAMPLE
$('.selector').froalaEditor({ linkAlwaysNoFollow: false });
linkAttributes
Type: | Object |
Default: | {} |
Plugin: | link.min.js |
An object with additional attributes that could be customized for a link.
CODE EXAMPLE
$('.selector').froalaEditor({ linkAttributes: { title: 'Title' } });
linkAutoPrefix
Type: | String |
Default: | 'http://' |
Plugin: | link.min.js |
Sets the default URL prefix.
CODE EXAMPLE
$('.selector').froalaEditor({ linkAutoPrefix: 'https://' });
linkConvertEmailAddress
Type: | Boolean |
Default: | true |
Plugin: | link.min.js |
Email addresses inserted as link are converted to mailto:
links.
CODE EXAMPLE
$('.selector').froalaEditor({ linkConvertEmailAddress: false });
linkEditButtons
Type: | Array |
Default: | ['linkOpen', 'linkStyle', 'linkEdit', 'linkRemove'] |
Plugin: | link.min.js |
The list of buttons that appear in the edit link popup, when clicking on an existing link from the editor.
CODE EXAMPLE
$('.selector').froalaEditor({ linkEditButtons: ['linkEdit', 'linkRemove'] });
linkInsertButtons
Type: | Array |
Default: | ['linkBack', '|', 'linkList'] |
Plugin: | link.min.js |
The list of buttons that appear in the insert link popup, when inserting a new link into the WYSIWYG editor.
CODE EXAMPLE
$('.selector').froalaEditor({ linkInsertButtons: ['linkBack'] });
linkList
Type: | Array |
Default: | [] |
Plugin: | link.min.js |
Set a predefined list of links to select from when inserting or editing a link.
CODE EXAMPLE
$('.selector').froalaEditor({ linkList: [ { text: 'Google', href: 'http://google.com', target: '_blank', rel: 'nofollow' }, { displayText: 'Froala', href: 'https://froala.com', target: '_blank' } ] });
linkMultipleStyles
Type: | Boolean |
Default: | true |
Plugin: | link.min.js |
Allows multiple link styles to be selected at a time.
CODE EXAMPLE
$('.selector').froalaEditor({ linkMultipleStyles: false });
linkNoOpener
Type: | Boolean |
Default: | true |
Plugin: | link.min.js |
Disables adding the noopener
attribute when link is set to open in a new tab.
CODE EXAMPLE
$('.selector').froalaEditor({ linkNoOpener: false });
linkNoReferrer
Type: | Boolean |
Default: | true |
Plugin: | link.min.js |
Disables adding the noreferrer
attribute when link is set to open in a new tab.
CODE EXAMPLE
$('.selector').froalaEditor({ linkNoReferrer: false });
linkStyles
Type: | Object |
Default: | { 'fr-green': 'Green', 'fr-strong': 'Thick' } |
Plugin: | link.min.js |
Set custom styles for the selected link. The classes should be defined in CSS, otherwise no changes will be visible on the link's appearance.
CODE EXAMPLE
$('.selector').froalaEditor({ linkStyles: { class1: 'Class 1', class2: 'Class 2', class3: 'Class 3' } });
linkText
Type: | Boolean |
Default: | false |
Plugin: | link.min.js |
This option allows to edit the link text inside the edit link popup.
CODE EXAMPLE
$('.selector').froalaEditor({ linkText: true });
Paragraph Format
paragraphFormat
Type: | Object |
Default: | { N: 'Normal', H1: 'Heading 1', H2: 'Heading 2', H3: 'Heading 3', H4: 'Heading 4', PRE: 'Code' } |
Plugin: | paragraph_format.min.js |
An Object with the options that will appear in the Paragraph Format dropdown from the toolbar. Where 'N' tag will be treated as a <p>
when the enter option is set to $.FroalaEditor.ENTER_P
and as a <div>
when the enter option is set to $.FroalaEditor.ENTER_DIV
.
CODE EXAMPLE
$('.selector').froalaEditor({ paragraphFormat: { N: 'Normal', H1: 'Heading 1', H2: 'Heading 2' } });
paragraphFormatDefaultSelection
Type: | String |
Default: | 'Parahraph Format' |
Plugin: | paragraph_format.min.js |
The text to display when the paragraph format is unkown or nothing is selected.
CODE EXAMPLE
$('.selector').froalaEditor({ paragraphFormatDefaultSelection: 'Paragraph' });
paragraphFormatSelection
Type: | Boolean |
Default: | false |
Plugin: | paragraph_format.min.js |
The Paragraph Format button from the WYSIWYG editor's toolbar is replaced with a dropdown showing the actual paragraph format name for the current text selection.
CODE EXAMPLE
$('.selector').froalaEditor({ paragraphFormatSelection: true });
paragraphMultipleStyles
Type: | Boolean |
Default: | true |
Plugin: | paragraph_format.min.js |
Allows multiple paragraph styles to be selected at a time.
CODE EXAMPLE
$('.selector').froalaEditor({ paragraphMultipleStyles: false });
paragraphStyles
Type: | Object |
Default: | { 'fr-text-gray': 'Gray', 'fr-text-bordered': 'Bordered', 'fr-text-spaced': 'Spaced', 'fr-text-uppercase': 'Uppercase' } |
Plugin: | paragraph_style.min.js |
Set custom styles for the selected paragraph. The classes should be defined in CSS, otherwise no changes will be visible on the paragraph's appearance.
CODE EXAMPLE
$('.selector').froalaEditor({ paragraphStyles: { class1: 'Class 1', class2: 'Class 2', class3: 'Class 3' } });
lineHeights
Type: | Object |
Default: | { Default: '', Single: '1', '1.15': '1.15', '1.5': '1.5', Double: '2' } |
Plugin: | line_height.min.js |
Set the line height for the current selected paragraph.
CODE EXAMPLE
$('.selector').froalaEditor({ lineHeights: { '1.15': '1.15', '1.5': '1.5', Double: '2' } });
Lists
listAdvancedTypes
Type: | Boolean |
Default: | true |
Plugin: | lists.min.js |
Enables list advanced types for the bullets.
CODE EXAMPLE
$('.selector').froalaEditor({ listAdvancedTypes: false });
Quick Insert
quickInsertButtons
Type: | Array |
Default: | ['image', 'video', 'embedly', 'table', 'ul', 'ol', 'hr'] |
Plugin: | quick_insert.min.js |
The buttons to display in quick insert.
CODE EXAMPLE
$('.selector').froalaEditor({ quickInsertButtons: ['image', 'table'] });
quickInsertTags
Type: | Array |
Default: | ['p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'blockquote'] |
Plugin: | quick_insert.min.js |
The list of tags for which the quick insert button will appear when empty.
CODE EXAMPLE
$('.selector').froalaEditor({ quickInsertTags: ['p', 'div'] });
Font Awesome
fontAwesomeSets
Type: | Object |
Default: | {} |
Third Party: | font_awesome.min.js |
The list of Font Awesome icons to show in the modal for inserting icons.
CODE EXAMPLE
$('.selector').froalaEditor({ fontAwesomeSets: [{ title: 'Accessibility Icons', list: ['american-sign-language-interpreting', 'asl-interpreting ', 'assistive-listening-systems', 'audio-description', 'blind', 'braille', 'cc', 'deaf', 'deafness ', 'hard-of-hearing ', 'low-vision', 'question-circle-o', 'sign-language', 'signing ', 'tty', 'universal-access', 'volume-control-phone', 'wheelchair', 'wheelchair-alt'] }, { title: 'Hand Icons', list: ['hand-grab-o ', 'hand-lizard-o', 'hand-o-down', 'hand-o-left', 'hand-o-right', 'hand-o-up', 'hand-paper-o', 'hand-peace-o', 'hand-pointer-o', 'hand-rock-o', 'hand-scissors-o', 'hand-spock-o', 'hand-stop-o ', 'thumbs-down', 'thumbs-o-down', 'thumbs-o-up', 'thumbs-up'] }] });
fontAwesomeTemplate
Type: | String |
Default: | '<i class="fa fa-[NAME] fr-deletable" aria-hidden="true"> </i>' |
Third Party: | font_awesome.min.js |
Set the template to be used for the Font Awesome icons inserted in the editor.
CODE EXAMPLE
$('.selector').froalaEditor({ fontAwesomeTemplate: '<i class="fa fa-[NAME] fr-deletable" aria-hidden="true"> </i>' });
Special Characters
specialCharactersSets
Type: | Object |
Default: | {} |
Third Party: | special_characters.min.js |
The list of special characters to show.
CODE EXAMPLE
$('.selector').froalaEditor({ specialCharactersSets: [{ title: 'Latin', list: [ { 'char': '¡', desc: 'INVERTED EXCLAMATION MARK' }, { 'char': '¢', desc: 'CENT SIGN' }, { 'char': '£', desc: 'POUND SIGN' }, { 'char': '¤', desc: 'CURRENCY SIGN' }, { 'char': '¥', desc: 'YEN SIGN' }, { 'char': '¦', desc: 'BROKEN BAR' }, { 'char': '§', desc: 'SECTION SIGN' }, { 'char': '¨', desc: 'DIAERESIS' }, { 'char': '©', desc: 'COPYRIGHT SIGN' }, { 'char': '™', desc: 'TRADEMARK SIGN' }, { 'char': 'ª', desc: 'FEMININE ORDINAL INDICATOR' }, { 'char': '«', desc: 'LEFT-POINTING DOUBLE ANGLE QUOTATION MARK' }, { 'char': '¬', desc: 'NOT SIGN' }, { 'char': '®', desc: 'REGISTERED SIGN' }, { 'char': '¯', desc: 'MACRON' }, { 'char': '°', desc: 'DEGREE SIGN' }, { 'char': '±', desc: 'PLUS-MINUS SIGN' }, { 'char': '²', desc: 'SUPERSCRIPT TWO' }, { 'char': '³', desc: 'SUPERSCRIPT THREE' }, { 'char': '´', desc: 'ACUTE ACCENT' }, { 'char': 'µ', desc: 'MICRO SIGN' }, { 'char': '¶', desc: 'PILCROW SIGN' }, { 'char': '·', desc: 'MIDDLE DOT' }, ] }, { title: 'Greek', list: [ { 'char': 'Α', desc: 'GREEK CAPITAL LETTER ALPHA' }, { 'char': 'Β', desc: 'GREEK CAPITAL LETTER BETA' }, { 'char': 'Γ', desc: 'GREEK CAPITAL LETTER GAMMA' }, { 'char': 'Δ', desc: 'GREEK CAPITAL LETTER DELTA' }, { 'char': 'Ε', desc: 'GREEK CAPITAL LETTER EPSILON' }, { 'char': 'Ζ', desc: 'GREEK CAPITAL LETTER ZETA' }, { 'char': 'Η', desc: 'GREEK CAPITAL LETTER ETA' }, { 'char': 'Θ', desc: 'GREEK CAPITAL LETTER THETA' }, { 'char': 'Ι', desc: 'GREEK CAPITAL LETTER IOTA' }, { 'char': 'Κ', desc: 'GREEK CAPITAL LETTER KAPPA' } ] }] });
WebSpellChecker Spell Checker
scaytAutoload
Type: | Boolean |
Default: | false |
Third Party: | spell_checker.min.js |
Enable spellchecker when the editor is initialized.
CODE EXAMPLE
$('.selector').froalaEditor({ scaytAutoload: true });
scaytCustomerId
Type: | Boolean |
Default: | FROALA_EDITOR_CUSTOMER_ID |
Third Party: | spell_checker.min.js |
The customer ID to be used for WebSpellChecker.
CODE EXAMPLE
$('.selector').froalaEditor({ scaytCustomerId: 'LONG_SCAYT_CUSTOMER_ID' });
scaytOptions
Type: | Object |
Default: | {} |
Third Party: | spell_checker.min.js |
The options used for WebSpellChecker.
CODE EXAMPLE
$('.selector').froalaEditor({ scaytOptions: { enableOnTouchDevices: false, localization:'en', extraModules: 'ui', DefaultSelection: 'American English', spellcheckLang: 'en_US', contextMenuSections: 'suggest|moresuggest', serviceProtocol: 'https', servicePort:'80', serviceHost:'svc.webspellchecker.net', servicePath:'spellcheck/script/ssrv.cgi', contextMenuForMisspelledOnly: true, scriptPath: 'https://demo.webspellchecker.net/froala/customscayt.js' } });
Save
saveInterval
Type: | Number |
Default: | 10000 |
Plugin: | save.min.js |
Time in milliseconds that defines when the autosave should be triggered. Setting a higher interval helps preventing request overload on the server. The autosave will be triggered only if the content was changed from the last interval. Setting the value to 0
will disable autosave.
Note: It is not recommended to use values lower than 2000ms in order to prevent overload.
CODE EXAMPLE
$('.selector').froalaEditor({ saveInterval: 2500 });
saveMethod
Type: | String |
Default: | 'POST' |
Plugin: | save.min.js |
The HTTP save request type.
CODE EXAMPLE
$('.selector').froalaEditor({ saveMethod: 'PUT' });
saveParam
Type: | String |
Default: | 'body' |
Plugin: | save.min.js |
The name of the parameter which contains the rich text editor's content on the save request.
CODE EXAMPLE
$('.selector').froalaEditor({ saveParam: 'content' });
saveParams
Type: | Object |
Default: | {} |
Plugin: | save.min.js |
Additional parameters passed to the save request.
CODE EXAMPLE
$('.selector').froalaEditor({ saveParams: { id: 'my_editor' } });
saveURL
Type: | String |
Default: | null |
Plugin: | save.min.js |
The URL where the save request is being made. The editor will initialize a HTTP request to the specified URL passing the editor's content in the body parameter of the HTTP request.
CODE EXAMPLE
$('.selector').froalaEditor({ saveURL: 'http://example.com/save' });
Table
tableCellMultipleStyles
Type: | Boolean |
Default: | true |
Plugin: | table.min.js |
Allows multiple table cell styles to be selected at a time.
CODE EXAMPLE
$('.selector').froalaEditor({ tableCellMultipleStyles: false });
tableCellStyles
Type: | Object |
Default: | { 'fr-highlighted': 'Highlighted', 'fr-thick': 'Thick' } |
Plugin: | table.min.js |
Set custom styles for the selected table cells. The classes should be defined in CSS, otherwise no changes will be visible.
CODE EXAMPLE
$('.selector').froalaEditor({ tableCellStyles: { class1: 'Class 1', class2: 'Class 2', class3: 'Class 3' } });
tableColors
Type: | Array |
Default: | [ '#61BD6D', '#1ABC9C', '#54ACD2', '#2C82C9', '#9365B8', '#475577', '#CCCCCC', '#41A85F', '#00A885', '#3D8EB9', '#2969B0', '#553982', '#28324E', '#000000', '#F7DA64', '#FBA026', '#EB6B56', '#E25041', '#A38F84', '#EFEFEF', '#FFFFFF', '#FAC51C', '#F37934', '#D14841', '#B8312F', '#7C706B', '#D1D5D8', 'REMOVE' ] |
Plugin: | table.min.js |
The list of colors used in the edit table colors popup for the background of a table cell. Passing REMOVE
as a value in the array will display the Clear Formatting button for the cell background color.
CODE EXAMPLE
$('.selector').froalaEditor({ tableColors: ['#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE'] });
tableColorsButtons
Type: | Array |
Default: | ['tableBack', '|'] |
Plugin: | table.min.js |
The list of buttons that appear in the edit table colors popup.
CODE EXAMPLE
$('.selector').froalaEditor({ tableColorsButtons: ['tableBack'] });
tableColorsStep
Type: | Number |
Default: | 7 |
Plugin: | table.min.js |
The number of colors displayed on a line in the edit table colors popup.
CODE EXAMPLE
$('.selector').froalaEditor({ tableColorsStep: 5 });
tableDefaultWidth
Type: | String |
Default: | 100% |
Plugin: | table.min.js |
The size of the table when it is inserted in the editor.
CODE EXAMPLE
$('.selector').froalaEditor({ tableDefaultWidth: 200px });
tableEditButtons
Type: | Array |
Default: | ['tableHeader', 'tableRemove', '|', 'tableRows', 'tableColumns', 'tableStyle', '-', 'tableCells', 'tableCellBackground', 'tableCellVerticalAlign', 'tableCellHorizontalAlign', 'tableCellStyle'] |
Plugin: | table.min.js |
The list of buttons that appear in the edit table popup, when one or many cells are selected.
CODE EXAMPLE
$('.selector').froalaEditor({ tableEditButtons: ['tableRows', 'tableColumns', 'tableCells', 'tableCellVerticalAlign', 'tableRemove'] });
tableInsertButtons
Type: | Array |
Default: | ['tableBack', '|'] |
Plugin: | table.min.js |
The list of buttons that appear in the insert table popup, when the toolbarInline option is set to true
.
CODE EXAMPLE
$('.selector').froalaEditor({ tableInsertButtons: ['tableBack'] });
tableInsertHelper
Type: | Boolean |
Default: | true |
Plugin: | table.min.js |
Insert rows and columns easier by going to the edge of the table.
CODE EXAMPLE
$('.selector').froalaEditor({ tableInsertHelper: false });
tableInsertHelperOffset
Type: | Integer |
Default: | 15 |
Plugin: | table.min.js |
The offset for showing the table insert helper.
CODE EXAMPLE
$('.selector').froalaEditor({ tableInsertHelperOffset: 25 });
tableInsertMaxSize
Type: | Number |
Default: | 10 |
Plugin: | table.min.js |
The maximum number of lines and columns when inserting a table into the rich text editor.
CODE EXAMPLE
$('.selector').froalaEditor({ tableInsertMaxSize: 8 });
tableMultipleStyles
Type: | Boolean |
Default: | true |
Plugin: | table.min.js |
Allows multiple table styles to be selected at a time.
CODE EXAMPLE
$('.selector').froalaEditor({ tableMultipleStyles: false });
tableResizer
Type: | Boolean |
Default: | true |
Plugin: | table.min.js |
Enables resizing table cells.
CODE EXAMPLE
$('.selector').froalaEditor({ tableResizer: false });
tableResizerOffset
Type: | Number |
Default: | 5 |
Plugin: | table.min.js |
The distance in pixels from the table cell's left or right border at which to show the resizer.
CODE EXAMPLE
$('.selector').froalaEditor({ tableResizerOffset: 10 });
tableResizingLimit
Type: | Number |
Default: | 30 |
Plugin: | table.min.js |
The minimum width in pixels of a table cell allowed while resizing. The resizer cannot be dragged over this limit.
CODE EXAMPLE
$('.selector').froalaEditor({ tableResizingLimit: 20 });
tableStyles
Type: | Object |
Default: | { 'fr-dashed-borders': 'Dashed Borders', 'fr-alternate-rows': 'Alternate Rows' } |
Plugin: | table.min.js |
Set custom styles for the selected table. The classes should be defined in CSS, otherwise no changes will be visible on the table's appearance.
CODE EXAMPLE
$('.selector').froalaEditor({ tableStyles: { class1: 'Class 1', class2: 'Class 2', class3: 'Class 3' } });
Video
videoAllowedProviders
Type: | Array |
Default: | ['.*'] |
Plugin: | video.min.js |
The list of video providers allowed to be inserted as URL.
CODE EXAMPLE
$('.selector').froalaEditor({ videoAllowedProviders: ['youtube', 'vimeo'] });
videoAllowedTypes
Type: | Array |
Default: | ['mp4', 'webm', 'ogg'] |
Plugin: | image.min.js |
The list of video types that are allowed to be uploaded. Although this will restrict uploading other types of files, we strongly recommend you to check the file type on the server too.
CODE EXAMPLE
$('.selector').froalaEditor({ videoAllowedTypes: ['mp4'] });
videoDefaultAlign
Type: | String |
Default: | 'center' |
Plugin: | video.min.js |
Sets the default video alignment when it is inserted into the WYSIWYG editor. Possible values are left
, center
and right
.
CODE EXAMPLE
$('.selector').froalaEditor({ videoDefaultAlign: 'left' });
videoDefaultDisplay
Type: | String |
Default: | 'block' |
Plugin: | video.min.js |
Sets the default display for videos when they are inserted into the WYSIWYG editor. Possible options are: "inline" and "block".
CODE EXAMPLE
$('.selector').froalaEditor({ videoDefaultDisplay: 'inline' });
videoDefaultWidth
Type: | Number |
Default: | 600 |
Plugin: | image.min.js |
Sets the default width of the video when it is inserted in the rich text editor. Setting it to 0
will not set any width.
CODE EXAMPLE
$('.selector').froalaEditor({ videoDefaultWidth: 200 });
videoEditButtons
Type: | Array |
Default: | ['videoReplace', 'videoRemove', '|' 'videoDisplay', 'videoAlign', 'videoSize'] |
Plugin: | video.min.js |
The buttons that appear in the edit video popup, when a video is selected.
CODE EXAMPLE
$('.selector').froalaEditor({ videoEditButtons: ['videoDisplay', 'videoRemove'] });
videoInsertButtons
Type: | Array |
Default: | ['videoBack', '|', 'videoByURL', 'videoEmbed', 'videoUpload'] |
Plugin: | video.min.js |
The buttons that appear in the insert video popup, when a video is inserted into the WYSIWYG editor.
CODE EXAMPLE
$('.selector').froalaEditor({ videoInsertButtons: ['videoBack', '|', 'videoByURL'] });
videoMaxSize
Type: | Number |
Default: | 1024 * 1024 * 30 |
Plugin: | video.min.js |
The maximum video size allowed on upload in bytes. The default value is 30MB. Although this makes an additional check before uploading the video, it is highly recommended to check image size on your server too.
CODE EXAMPLE
$('.selector').froalaEditor({ videoMaxSize: 1024 * 1024 * 15 });
videoMove
Type: | Boolean |
Default: | true |
Plugin: | video.min.js |
Allows changing the position of the videos by dragging them.
CODE EXAMPLE
$('.selector').froalaEditor({ videoMove: false });
videoResize
Type: | Boolean |
Default: | true |
Plugin: | video.min.js |
Enable or disable resizing the videos inside the editor.
CODE EXAMPLE
$('.selector').froalaEditor({ videoResize: false });
videoResponsive
Type: | Boolean |
Default: | false |
Plugin: | video.min.js |
Enable or disable inserting responsive videos in the Froala Editor.
CODE EXAMPLE
$('.selector').froalaEditor({ videoResponsive: true });
videoSizeButtons
Type: | Array |
Default: | ['videoBack', '|'] |
Plugin: | video.min.js |
The buttons that appear in the edit video size popup, when changing the size of a selected video.
CODE EXAMPLE
$('.selector').froalaEditor({ videoSizeButtons: ['videoBack'] });
videoSplitHTML
Type: | Boolean |
Default: | false |
Plugin: | video.min.js |
Enables splitting the HTML when inserting a new view.
CODE EXAMPLE
$('.selector').froalaEditor({ videoSplitHTML: true });
videoTextNear
Type: | Boolean |
Default: | true |
Plugin: | video.min.js |
Allows text near a video when it is aligned to the left or to the right. Disabling this option will make the display
button for image editor popup unavailable.
CODE EXAMPLE
$('.selector').froalaEditor({ videoTextNear: false });
videoUpload
Type: | Boolean |
Default: | true |
Plugin: | video.min.js |
Enable or disable video upload.
CODE EXAMPLE
$('.selector').froalaEditor({ videoUpload: false });
videoUploadMethod
Type: | String |
Default: | 'POST' |
Plugin: | video.min.js |
The HTTP video upload request type.
CODE EXAMPLE
$('.selector').froalaEditor({ videoUploadMethod: 'PUT' });
videoUploadParam
Type: | String |
Default: | 'file' |
Plugin: | video.min.js |
Customize the name of the parameter that contains the video file in the upload request.
CODE EXAMPLE
$('.selector').froalaEditor({ videoUploadParam: 'file_name' });
videoUploadParams
Type: | Object |
Default: | {} |
Plugin: | video.min.js |
Pass additional parameters to the upload request.
CODE EXAMPLE
$('.selector').froalaEditor({ videoUploadParams: { id: 'my_editor' } });
videoUploadToS3
Type: | Object |
Default: | false |
Plugin: | video.min.js |
Set the options for video upload to S3. All the fields from the example below are required. Also make sure that you have enabled CORS on Amazon.
Note: uploadURL
property can be used instead of bucket
and region
properties to specify a custom URL from Amazon where to upload the video.
CODE EXAMPLE
$('.selector').froalaEditor({ videoUploadToS3: { bucket: 'editor', // Your bucket region. region: 's3-us-east-1', keyStart: 'uploads/', params: { acl: 'public-read', // ACL according to Amazon Documentation. AWSAccessKeyId: 'ACCESS_KEY', // Access Key from Amazon. policy: 'POLICY_STRING', // Policy string computed in the backend. signature: '', // Signature computed in the backend. // If you are using Amazon Signature V4, the followings should be used instead. // "X-Amz-Credential": "...", // "X-Amz-Algorithm": "AWS4-HMAC-SHA256", // "X-Amz-Date": "...", // Policy: "...", // // "X-Amz-Signature": "", // computed in backend } } });
videoUploadURL
Type: | String |
Default: | 'http://i.froala.com/upload' |
Plugin: | video.min.js |
The URL where the videos uploaded by the user are saved. When a video is uploaded, the editor sends the file to the server through a HTTP request. The server should process the data from the file
parameter of the request and return a JSON object containing a link
field with the link to the uploaded video.
Note 1: By default, the videos are stored on our servers, but if you want to have full control over them, you should consider implementing the upload on your server. The videos stored on our servers, may be deleted at any time without any notice.
Note 2: If the domain where the video is saved is not the same with the one where the editor is running, you may need to enable requestWithCORS option and make specific customizations on the server. For more information please refer to Cross-origin resource sharing.
CODE EXAMPLE
$('.selector').froalaEditor({ videoUploadURL: '/upload_video' });
Word
wordAllowedStyleProps
Type: | Array |
Default: | ['font-family', 'font-size', 'background', 'color', 'width', 'text-align', 'vertical-align', 'background-color', 'padding', 'margin', 'height', 'margin-top', 'margin-left', 'margin-right', 'margin-bottom', 'text-decoration', 'font-weight', 'font-style', 'text-indent', 'border', 'border-.*'] |
The list of allowed CSS attributes to be used for tags when pasting from Word.
CODE EXAMPLE
$('.selector').froalaEditor({ wordAllowedStyleProps: ['font-size'] });
wordDeniedAttrs
Type: | Array |
Default: | [] |
Attributes that are removed when pasting something into the rich text editor from Word.
CODE EXAMPLE
$('.selector').froalaEditor({ wordDeniedAttrs: ['style'] });
wordDeniedTags
Type: | Array |
Default: | [] |
Tags that are removed together with their content when pasting something into the rich text editor from Word.
CODE EXAMPLE
$('.selector').froalaEditor({ wordDeniedTags: ['a'] });
wordPasteModal
Type: | Boolean |
Default: | true |
Show modal to choose if to keep or not styles pasted from Word. If set to false
, the default action is to keep the formatting.
CODE EXAMPLE
$('.selector').froalaEditor({ wordPasteModal: false });
wordPasteKeepFormatting
Type: | Boolean |
Default: | true |
Choose the default action when wordPasteModal
option is enabled.
CODE EXAMPLE
$('.selector').froalaEditor({ wordPasteKeepFormatting: false });