Days
Hours
Minutes
Seconds
x

New Advanced File Management – Learn More

Skip to content

Options

autofocus aviaryKey aviaryOptions charCounterCount charCounterMax codeBeautifierOptions codeMirror codeMirrorOptions codeViewKeepActiveButtons colorsBackground colorsDefaultTab colorsHEXInput colorsStep colorsText direction disableRightClick documentReady dragInline editInPopup editorClass embedlyEditButtons embedlyInsertButtons embedlyKey embedlyScriptPath emoticonsSet emoticonsStep emoticonsUseImage enter entities fileAllowedTypes fileInsertButtons fileMaxSize fileUpload fileUploadMethod fileUploadParam fileUploadParams fileUploadToS3 fileUploadURL fileUseSelectedText fontAwesomeSets fontAwesomeTemplate fontFamily fontFamilyDefaultSelection fontFamilySelection fontSize fontSizeDefaultSelection fontSizeSelection fontSizeUnit fullPage height heightMax heightMin helpSets htmlAllowComments htmlAllowedAttrs htmlAllowedEmptyTags htmlAllowedStyleProps htmlAllowedTags htmlDoNotWrapTags htmlExecuteScripts htmlIgnoreCSSProperties htmlRemoveTags htmlSimpleAmpersand htmlUntouched iconsTemplate iframe iframeDefaultStyle iframeStyle iframeStyleFiles imageAddNewLine imageAllowedTypes imageAltButtons imageCORSProxy imageDefaultAlign imageDefaultDisplay imageDefaultWidth imageEditButtons imageInsertButtons imageManagerDeleteMethod imageManagerDeleteParams imageManagerDeleteURL imageManagerLoadMethod imageManagerLoadParams imageManagerLoadURL imageManagerPageSize imageManagerPreloader imageManagerScrollOffset imageMaxSize imageMinWidth imageMove imageMultipleStyles imageOutputSize imagePaste imagePasteProcess imageResize imageResizeWithPercent imageRoundPercent imageSizeButtons imageSplitHTML imageStyles imageTextNear imageUpload imageUploadMethod imageUploadParam imageUploadParams imageUploadRemoteUrls imageUploadToS3 imageUploadURL indentMargin initOnClick inlineClasses inlineStyles keepFormatOnDelete language lineBreakerOffset lineBreakerTags lineHeights linkAlwaysBlank linkAlwaysNoFollow linkAttributes linkAutoPrefix linkConvertEmailAddress linkEditButtons linkInsertButtons linkList linkMultipleStyles linkNoOpener linkNoReferrer linkStyles linkText listAdvancedTypes multiLine paragraphFormat paragraphFormatDefaultSelection paragraphFormatSelection paragraphMultipleStyles paragraphStyles pasteAllowLocalImages pasteAllowedStyleProps pasteDeniedAttrs pasteDeniedTags pastePlain placeholderText pluginsEnabled quickInsertButtons quickInsertTags requestHeaders requestWithCORS requestWithCredentials saveInterval saveMethod saveParam saveParams saveURL scaytAutoload scaytCustomerId scaytOptions scrollableContainer shortcutsEnabled shortcutsHint specialCharactersSets spellcheck tabIndex tabSpaces tableCellMultipleStyles tableCellStyles tableColors tableColorsButtons tableColorsStep tableDefaultWidth tableEditButtons tableInsertButtons tableInsertHelper tableInsertHelperOffset tableInsertMaxSize tableMultipleStyles tableResizer tableResizerOffset tableResizingLimit tableStyles theme toolbarBottom toolbarButtons toolbarButtonsMD toolbarButtonsSM toolbarButtonsXS toolbarContainer toolbarInline toolbarSticky toolbarStickyOffset toolbarVisibleWithoutSelection tooltips typingTimer useClasses videoAllowedProviders videoAllowedTypes videoDefaultAlign videoDefaultDisplay videoDefaultWidth videoEditButtons videoInsertButtons videoMaxSize videoMove videoResize videoResponsive videoSizeButtons videoSplitHTML videoTextNear videoUpload videoUploadMethod videoUploadParam videoUploadParams videoUploadToS3 videoUploadURL width wordAllowedStyleProps wordDeniedAttrs wordDeniedTags wordPasteKeepFormatting wordPasteModal zIndex

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']
});

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">&nbsp;</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">&nbsp;</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': '&iexcl;', desc: 'INVERTED EXCLAMATION MARK' },
      { 'char': '&cent;', desc: 'CENT SIGN' },
      { 'char': '&pound;', desc: 'POUND SIGN' },
      { 'char': '&curren;', desc: 'CURRENCY SIGN' },
      { 'char': '&yen;', desc: 'YEN SIGN' },
      { 'char': '&brvbar;', desc: 'BROKEN BAR' },
      { 'char': '&sect;', desc: 'SECTION SIGN' },
      { 'char': '&uml;', desc: 'DIAERESIS' },
      { 'char': '&copy;', desc: 'COPYRIGHT SIGN' },
      { 'char': '&trade;', desc: 'TRADEMARK SIGN' },
      { 'char': '&ordf;', desc: 'FEMININE ORDINAL INDICATOR' },
      { 'char': '&laquo;', desc: 'LEFT-POINTING DOUBLE ANGLE QUOTATION MARK' },
      { 'char': '&not;', desc: 'NOT SIGN' },
      { 'char': '&reg;', desc: 'REGISTERED SIGN' },
      { 'char': '&macr;', desc: 'MACRON' },
      { 'char': '&deg;', desc: 'DEGREE SIGN' },
      { 'char': '&plusmn;', desc: 'PLUS-MINUS SIGN' },
      { 'char': '&sup2;', desc: 'SUPERSCRIPT TWO' },
      { 'char': '&sup3;', desc: 'SUPERSCRIPT THREE' },
      { 'char': '&acute;', desc: 'ACUTE ACCENT' },
      { 'char': '&micro;', desc: 'MICRO SIGN' },
      { 'char': '&para;', desc: 'PILCROW SIGN' },
      { 'char': '&middot;', desc: 'MIDDLE DOT' },
    ]
  },
  {
    title: 'Greek',
    list: [
      { 'char': '&Alpha;', desc: 'GREEK CAPITAL LETTER ALPHA' },
      { 'char': '&Beta;', desc: 'GREEK CAPITAL LETTER BETA' },
      { 'char': '&Gamma;', desc: 'GREEK CAPITAL LETTER GAMMA' },
      { 'char': '&Delta;', desc: 'GREEK CAPITAL LETTER DELTA' },
      { 'char': '&Epsilon;', desc: 'GREEK CAPITAL LETTER EPSILON' },
      { 'char': '&Zeta;', desc: 'GREEK CAPITAL LETTER ZETA' },
      { 'char': '&Eta;', desc: 'GREEK CAPITAL LETTER ETA' },
      { 'char': '&Theta;', desc: 'GREEK CAPITAL LETTER THETA' },
      { 'char': '&Iota;', desc: 'GREEK CAPITAL LETTER IOTA' },
      { 'char': '&Kappa;', 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
});