Options

aviaryKey

ADOBE_CREATIVE_CLOUD_KEY

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

{
  displayImageSize: true,
  theme: 'minimum'
}

The options to be set on the Aviary instance.

CODE EXAMPLE

$('.selector').froalaEditor({
  aviaryOptions: {
    displayImageSize: true,
    theme: 'dark'
  }
});

charCounterCount

true

Enables or disables the display of the character counter.

CODE EXAMPLE

$('.selector').froalaEditor({
  charCounterCount: false
});

charCounterMax

-1

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

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: '\t',
  indent_size: 1,
  wrap_line_length: 0
}

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

codeMirror

window.CodeMirror

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

{
  indentWithTabs: true,
  lineNumbers: true,
  lineWrapping: true,
  mode: 'text/html',
  tabMode: 'indent',
  tabSize: 2
}

Specify the options for CodeMirror.

CODE EXAMPLE

$('.selector').froalaEditor({
  codeMirrorOptions: {
    tabSize: 4
  }
});

codeViewKeepActiveButtons

["fullscreen"]

A list of buttons to keep active while editor is in Code View mode.

CODE EXAMPLE

$('.selector').froalaEditor({
  codeViewKeepActiveButtons: []
});

colorsBackground

[
  '#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'
]

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

'text'

Set the default color tab from the colors popup.

CODE EXAMPLE

$('.selector').froalaEditor({
  colorsDefaultTab: 'background'
});

colorsHEXInput

true

Show HEX input to choose custom color.

CODE EXAMPLE

$('.selector').froalaEditor({
  colorsHEXInput: false
});

colorsStep

7

The number of colors displayed on a line in the colors popup.

CODE EXAMPLE

$('.selector').froalaEditor({
  colorsStep: 14
});

colorsText

[
  '#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'
]

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

dragInline

true

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

embedlyKey

null

Your key from Embed.ly to remove the "Powered By Banner".

CODE EXAMPLE

$('.selector').froalaEditor({
  embedlyKey: XXXXXXXXXXXXXXXXXXXXXX
});

embedlyEditButtons

['embedlyRemove']

The buttons that appear in the edit Embed.ly popup, when an embedded object is selected.

CODE EXAMPLE

$('.selector').froalaEditor({
  embedlyEditButtons: []
});

embedlyInsertButtons

['embedlyBack', '|']

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

'https://cdn.embedly.com/widgets/platform.js'

The default script path for the Embedly JS.

CODE EXAMPLE

$('.selector').froalaEditor({
  embedlyScriptPath: 'https://cdn.embedly.com/widgets/platform.js'
});

emoticonsSet

[
  {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'}
]

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

true

Use EmojiOne svg images instead of Unicode text.

CODE EXAMPLE

$('.selector').froalaEditor({
  emoticonsUseImage: false
});

emoticonsStep

8

The number of emoticons displayed on a line in the insert emoticon popup.

CODE EXAMPLE

$('.selector').froalaEditor({
  emoticonsStep: 10
});

entities

'"'¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿŒœŠšŸƒˆ˜ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρςστυφχψωϑϒϖ   ‌‍‎‏–—‘’‚“”„†‡•…‰′″‹›‾⁄€ℑ℘ℜ™ℵ←↑→↓↔↵⇐⇑⇒⇓⇔∀∂∃∅∇∈∉∋∏∑−∗√∝∞∠∧∨∩∪∫∴∼≅≈≠≡≤≥⊂⊃⊄⊆⊇⊕⊗⊥⋅⌈⌉⌊⌋⟨⟩◊♠♣♥♦'

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: '"'¡¢£¤¥¦'
});

fileAllowedTypes

['*']

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

['fileBack', '|']

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

1024 * 1024 * 10

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

true

Enable or disable file upload.

CODE EXAMPLE

$('.selector').froalaEditor({
  fileUpload: false
});

fileUploadMethod

'POST'

The HTTP file upload request type.

CODE EXAMPLE

$('.selector').froalaEditor({
  fileUploadMethod: 'PUT'
});

fileUploadParam

'file'

Customize the name of the parameter that contains the file in the upload request.

CODE EXAMPLE

$('.selector').froalaEditor({
  fileUploadParam: 'file_name'
});

fileUploadParams

{}

Pass additional parameters to the file upload request.

CODE EXAMPLE

$('.selector').froalaEditor({
  fileUploadParams: {
    id: 'my_editor'
  }
});

fileUploadToS3

false

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

'http://i.froala.com/upload'

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

false

Enables using the file's name instead of the selected text when a file is inserted.

CODE EXAMPLE

$('.selector').froalaEditor({
  fileUseSelectedText: true
});

fontFamily

{
  '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'
}

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

'Font Family'

The text to display when the font family is unkown or nothing is selected.

CODE EXAMPLE

$('.selector').froalaEditor({
  fontFamilyDefaultSelection: 'Font'
});

fontFamilySelection

false

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

fontSizeSelection

false

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

['8', '9', '10', '11', '12', '14', '18', '24', '30', '36', '48', '60', '72', '96']

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

'12'

The text to display when the font size is unkown or nothing is selected.

CODE EXAMPLE

$('.selector').froalaEditor({
  fontSizeDefaultSelection: '14'
});

fontSizeUnit

'px'

The unit to be used for the font size.

CODE EXAMPLE

$('.selector').froalaEditor({
  fontSizeUnit: 'pt'
});

autofocus

false

Focus the editor instance when the page is loaded.

CODE EXAMPLE

$('.selector').froalaEditor({
  autofocus: true
});

direction

'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

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

false

Turns on the editor best setup for editing documents.

CODE EXAMPLE

$('.selector').froalaEditor({
  documentReady: true
});

editInPopup

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

null

Set a custom class for the WYSIWYG editor editing box.

CODE EXAMPLE

$('.selector').froalaEditor({
  editorClass: 'custom-class'
});

enter

$.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

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

null

Set a height for the rich text editor's editing box.

CODE EXAMPLE

$('.selector').froalaEditor({
  height: 300
});

heightMax

null

Set a maximum height for the rich text editor's editing box.

CODE EXAMPLE

$('.selector').froalaEditor({
  heightMax: 500
});

heightMin

null

Set a minimum height for the rich text editor's editing box.

CODE EXAMPLE

$('.selector').froalaEditor({
  heightMin: 200
});

htmlAllowComments

true

Allow comments inside the edited HTML.

CODE EXAMPLE

$('.selector').froalaEditor({
  htmlAllowComments: false
});

htmlAllowedAttrs

['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

['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

[]

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

['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

['script', 'style']

The list of tags that should not be wrapped inside block tags.

CODE EXAMPLE

$('.selector').froalaEditor({
  htmlDoNotWrapTags: ['script', 'style', 'img']
});

htmlExecuteScripts

true

Allow running scripts that are entered in Code View.

CODE EXAMPLE

$('.selector').froalaEditor({
  htmlExecuteScripts: false
});

htmlIgnoreCSSProperties

[]

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

['script', 'style']

The list of tags that are removed together with their content.

CODE EXAMPLE

$('.selector').froalaEditor({
  htmlRemoveTags: ['script', 'style', 'base']
});

htmlSimpleAmpersand

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

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

'font_awesome'

Set the template to be used for the icons inside the editor UI.

CODE EXAMPLE

$('.selector').froalaEditor({
  iconsTemplate: 'font_awesome_5'
});

iframe

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

'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

''

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

[]

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

20

The number of pixels to use for indenting the current line.

CODE EXAMPLE

$('.selector').froalaEditor({
  indentMargin: 10
});

initOnClick

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

false

Keep format of the selected text when it is deleted.

CODE EXAMPLE

$('.selector').froalaEditor({
  keepFormatOnDelete: true
});

multiLine

true

Allows new line to be inserted when ENTER key is hit.

CODE EXAMPLE

$('.selector').froalaEditor({
  multiLine: false
});

pasteAllowedStyleProps

[]

The list of allowed CSS attributes to be used for tags on paste.

CODE EXAMPLE

$('.selector').froalaEditor({
  pasteAllowedStyleProps: ['font-family', 'font-size', 'color']
});

pasteAllowLocalImages

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

['class', 'id', 'style']

Attributes that are removed when pasting something into the rich text editor.

CODE EXAMPLE

$('.selector').froalaEditor({
  pasteDeniedAttrs: ['class', 'id']
});

pasteDeniedTags

[]

Tags that are removed together with their content when pasting something into the rich text editor.

CODE EXAMPLE

$('.selector').froalaEditor({
  pasteDeniedTags: ['a', 'i']
});

pastePlain

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 Something'

The placeholder used when the WYSIWYG editor body is empty.

CODE EXAMPLE

$('.selector').froalaEditor({
  placeholderText: 'Placeholder'
});

pluginsEnabled

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

{}

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

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

true

Make AJAX requests using CORS. For more information refer to Cross-origin resource sharing.

CODE EXAMPLE

$('.selector').froalaEditor({
  requestWithCORS: false
});

scrollableContainer

'body'

Sets the container in which the editor popups are added.

CODE EXAMPLE

$('.selector').froalaEditor({
  scrollableContainer: '#my_scrollable_container'
});

shortcutsEnabled

['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

true

When enabled, the shortcut is displayed in the button tooltip.

CODE EXAMPLE

$('.selector').froalaEditor({
  shortcutsHint: false
});

spellcheck

true

Enables browser spellcheck for the text inside the editing box.

CODE EXAMPLE

$('.selector').froalaEditor({
  spellcheck: false
});

tabIndex

null

The tabIndex to set on the editor element.

CODE EXAMPLE

$('.selector').froalaEditor({
  tabIndex: 10
});

tabSpaces

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

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

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

['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

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

['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

['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

null

A custom HTML selector placing the toolbar inside.

CODE EXAMPLE

$('.selector').froalaEditor({
  toolbarContainer: '#toolbarContainer'
});

toolbarInline

false

Enable or disable inline mode.

CODE EXAMPLE

$('.selector').froalaEditor({
  toolbarInline: true
});

toolbarSticky

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

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

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

true

Control if tooltips are shown when getting with mouse over the buttons from the toolbar.

CODE EXAMPLE

$('.selector').froalaEditor({
  tooltips: false
});

typingTimer

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

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

'auto'

Sets the width of the editing box.

CODE EXAMPLE

$('.selector').froalaEditor({
  width: '800'
});

zIndex

1

The zIndex to set on the editor toolbars and popups.

CODE EXAMPLE

$('.selector').froalaEditor({
  zIndex: 2501
});

helpSets

[
  {
    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' }
    ]
  }
]

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

imageAllowedTypes

['jpeg', 'jpg', 'png', 'gif', 'webp']

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

['imageBack', '|']

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

'https://cors-anywhere.froala.com'

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

'center'

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

'block'

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

300

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

['imageReplace', 'imageAlign', 'imageCaption', 'imageRemove', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageAlt', 'imageSize']

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

['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager']

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

1024 * 1024 * 10

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

16

The minimum width in PX the image can be resized to.

CODE EXAMPLE

$('.selector').froalaEditor({
  imageMinWidth: 32
});

imageMove

true

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

true

Allows multiple image styles to be selected at a time.

CODE EXAMPLE

$('.selector').froalaEditor({
  imageMultipleStyles: false
});

imagePaste

true

Allows pasting images from clipboard.

CODE EXAMPLE

$('.selector').froalaEditor({
  imagePaste: false
});

imagePasteProcess

false

Use default image settings for pasted images.

CODE EXAMPLE

$('.selector').froalaEditor({
  imagePasteProcess: true
});

imageResize

true

Disables image resize when set to false.

CODE EXAMPLE

$('.selector').froalaEditor({
  imageResize: false
});

imageResizeWithPercent

false

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

false

Force image percent to round to integer while resizing.

CODE EXAMPLE

$('.selector').froalaEditor({
  imageRoundPercent: true
});

imageOutputSize

false

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

['imageBack', '|']

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

false

Enables splitting the HTML when inserting a new image.

CODE EXAMPLE

$('.selector').froalaEditor({
  imageSplitHTML: true
});

imageStyles

{
  'fr-rounded': 'Rounded',
  'fr-bordered': 'Bordered'
}

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

true

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

true

Enable or disable image upload.

CODE EXAMPLE

$('.selector').froalaEditor({
  imageUpload: false
});

imageAddNewLine

false

Add new line after inserting an image when enabled.

CODE EXAMPLE

$('.selector').froalaEditor({
  imageAddNewLine: true
});

imageUploadMethod

'POST'

The HTTP image upload request type.

CODE EXAMPLE

$('.selector').froalaEditor({
  imageUploadMethod: 'PUT'
});

imageUploadParam

'file'

Customize the name of the parameter that contains the image file in the upload request.

CODE EXAMPLE

$('.selector').froalaEditor({
  imageUploadParam: 'file_name'
});

imageUploadParams

{}

Pass additional parameters to the upload request.

CODE EXAMPLE

$('.selector').froalaEditor({
  imageUploadParams: {
    id: 'my_editor'
  }
});

imageUploadRemoteUrls

true

Upload images inserted by URL to custom server instead of linking them by URL.

CODE EXAMPLE

$('.selector').froalaEditor({
  imageUploadRemoteUrls: false
});

imageUploadToS3

false

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

'http://i.froala.com/upload'

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

imageManagerDeleteMethod

'POST'

The HTTP image manager delete image request type.

CODE EXAMPLE

$('.selector').froalaEditor({
  imageManagerDeleteMethod: 'DELETE'
});

imageManagerDeleteParams

{}

Additional parameters passed to the image manager image delete request.

CODE EXAMPLE

$('.selector').froalaEditor({
  imageManagerDeleteParams: {user_id: 4219762}
});

imageManagerDeleteURL

''

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

'GET'

The HTTP image manager load images request type.

CODE EXAMPLE

$('.selector').froalaEditor({
  imageManagerLoadMethod: 'POST'
});

imageManagerLoadParams

{}

Additional parameters passed to the load images request from the image manager.

CODE EXAMPLE

$('.selector').froalaEditor({
  imageManagerLoadParams: {user_id: 4219762}
});

imageManagerLoadURL

'http://i.froala.com/load-files'

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

[
  {
    url: 'http://exmaple.com/images/photo1.jpg',
    thumb: "http://exmaple.com/thumbs/photo1.jpg",
    tag: 'flower',
    name: "Photo 1 Name",
    id: 103454285,
  }
]

CODE EXAMPLE

$('.selector').froalaEditor({
  imageManagerLoadURL: 'http://example.com/load_images'
});

imageManagerPageSize

12

The number of images loaded per page in the image manager.

CODE EXAMPLE

$('.selector').froalaEditor({
  imageManagerPageSize: 10
});

imageManagerPreloader

''

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

20

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

inlineStyles

{
  'Big Red': 'font-size: 20px; color: red;',
  'Small Blue': 'font-size: 14px; color: blue;'
}

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

inlineClasses

{
  'fr-class-code': 'Code',
  'fr-class-highlighted': 'Highlighted',
  'fr-class-transparency': 'Transparent'
}

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

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

lineBreakerOffset

15

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

['table', 'hr', 'form', 'dl', 'span.fr-video', '.fr-embedly', '.fr-img-caption']

The list of HTML tags between which the line-breaker should appear.

CODE EXAMPLE

$('.selector').froalaEditor({
  lineBreakerTags: ['table', 'hr', 'form']
});

linkAlwaysBlank

false

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

true

Specifies if the rel="nofollow" attribute should be added on all links.

CODE EXAMPLE

$('.selector').froalaEditor({
  linkAlwaysNoFollow: false
});

linkAttributes

{}

An object with additional attributes that could be customized for a link.

CODE EXAMPLE

$('.selector').froalaEditor({
  linkAttributes: {
  title: 'Title'
}
});

linkAutoPrefix

'http://'

Sets the default URL prefix.

CODE EXAMPLE

$('.selector').froalaEditor({
  linkAutoPrefix: 'https://'
});

linkConvertEmailAddress

true

Email addresses inserted as link are converted to mailto: links.

CODE EXAMPLE

$('.selector').froalaEditor({
  linkConvertEmailAddress: false
});

linkEditButtons

['linkOpen', 'linkStyle', 'linkEdit', 'linkRemove']

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

['linkBack', '|', 'linkList']

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

[]

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

true

Allows multiple link styles to be selected at a time.

CODE EXAMPLE

$('.selector').froalaEditor({
  linkMultipleStyles: false
});

linkNoOpener

true

Disables adding the noopener attribute when link is set to open in a new tab.

CODE EXAMPLE

$('.selector').froalaEditor({
  linkNoOpener: false
});

linkNoReferrer

true

Disables adding the noreferrer attribute when link is set to open in a new tab.

CODE EXAMPLE

$('.selector').froalaEditor({
  linkNoReferrer: false
});

linkStyles

{
  'fr-green': 'Green',
  'fr-strong': 'Thick'
}

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

false

This option allows to edit the link text inside the edit link popup.

CODE EXAMPLE

$('.selector').froalaEditor({
  linkText: true
});

paragraphFormat

{
  N: 'Normal',
  H1: 'Heading 1',
  H2: 'Heading 2',
  H3: 'Heading 3',
  H4: 'Heading 4',
  PRE: 'Code'
}

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

'Parahraph Format'

The text to display when the paragraph format is unkown or nothing is selected.

CODE EXAMPLE

$('.selector').froalaEditor({
  paragraphFormatDefaultSelection: 'Paragraph'
});

paragraphFormatSelection

false

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

true

Allows multiple paragraph styles to be selected at a time.

CODE EXAMPLE

$('.selector').froalaEditor({
  paragraphMultipleStyles: false
});

paragraphStyles

{
  'fr-text-gray': 'Gray',
  'fr-text-bordered': 'Bordered',
  'fr-text-spaced': 'Spaced',
  'fr-text-uppercase': 'Uppercase'
}

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

{
  Default: '',
  Single: '1',
  '1.15': '1.15',
  '1.5': '1.5',
  Double: '2'
}

Set the line height for the current selected paragraph.

CODE EXAMPLE

$('.selector').froalaEditor({
  lineHeights: {
    '1.15': '1.15',
    '1.5': '1.5',
    Double: '2'
  }
});

listAdvancedTypes

true

Enables list advanced types for the bullets.

CODE EXAMPLE

$('.selector').froalaEditor({
  listAdvancedTypes: false
});

quickInsertButtons

['image', 'video', 'embedly', 'table', 'ul', 'ol', 'hr']

The buttons to display in quick insert.

CODE EXAMPLE

$('.selector').froalaEditor({
  quickInsertButtons: ['image', 'table']
});

quickInsertTags

['p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'blockquote']

The list of tags for which the quick insert button will appear when empty.

CODE EXAMPLE

$('.selector').froalaEditor({
  quickInsertTags: ['p', 'div']
});

fontAwesomeSets

{}

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

'<i class="fa fa-[NAME] fr-deletable" aria-hidden="true">&nbsp;</i>'

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

specialCharactersSets

{}

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

scaytAutoload

false

Enable spellchecker when the editor is initialized.

CODE EXAMPLE

$('.selector').froalaEditor({
  scaytAutoload: true
});

scaytCustomerId

FROALA_EDITOR_CUSTOMER_ID

The customer ID to be used for WebSpellChecker.

CODE EXAMPLE

$('.selector').froalaEditor({
  scaytCustomerId: 'LONG_SCAYT_CUSTOMER_ID'
});

scaytOptions

{}

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

saveInterval

10000

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

'POST'

The HTTP save request type.

CODE EXAMPLE

$('.selector').froalaEditor({
  saveMethod: 'PUT'
});

saveParam

'body'

The name of the parameter which contains the rich text editor's content on the save request.

CODE EXAMPLE

$('.selector').froalaEditor({
  saveParam: 'content'
});

saveParams

{}

Additional parameters passed to the save request.

CODE EXAMPLE

$('.selector').froalaEditor({
  saveParams: {
  id: 'my_editor'
}
});

saveURL

null

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

tableCellMultipleStyles

true

Allows multiple table cell styles to be selected at a time.

CODE EXAMPLE

$('.selector').froalaEditor({
  tableCellMultipleStyles: false
});

tableCellStyles

{
  'fr-highlighted': 'Highlighted',
  'fr-thick': 'Thick'
}

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

[
  '#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'
]

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

['tableBack', '|']

The list of buttons that appear in the edit table colors popup.

CODE EXAMPLE

$('.selector').froalaEditor({
  tableColorsButtons: ['tableBack']
});

tableColorsStep

7

The number of colors displayed on a line in the edit table colors popup.

CODE EXAMPLE

$('.selector').froalaEditor({
  tableColorsStep: 5
});

tableDefaultWidth

100%

The size of the table when it is inserted in the editor.

CODE EXAMPLE

$('.selector').froalaEditor({
  tableDefaultWidth: 200px
});

tableEditButtons

['tableHeader', 'tableRemove', '|', 'tableRows', 'tableColumns', 'tableStyle', '-', 'tableCells', 'tableCellBackground', 'tableCellVerticalAlign', 'tableCellHorizontalAlign', 'tableCellStyle']

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

['tableBack', '|']

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

true

Insert rows and columns easier by going to the edge of the table.

CODE EXAMPLE

$('.selector').froalaEditor({
  tableInsertHelper: false
});

tableInsertHelperOffset

15

The offset for showing the table insert helper.

CODE EXAMPLE

$('.selector').froalaEditor({
  tableInsertHelperOffset: 25
});

tableInsertMaxSize

10

The maximum number of lines and columns when inserting a table into the rich text editor.

CODE EXAMPLE

$('.selector').froalaEditor({
  tableInsertMaxSize: 8
});

tableMultipleStyles

true

Allows multiple table styles to be selected at a time.

CODE EXAMPLE

$('.selector').froalaEditor({
  tableMultipleStyles: false
});

tableResizer

true

Enables resizing table cells.

CODE EXAMPLE

$('.selector').froalaEditor({
  tableResizer: false
});

tableResizerOffset

5

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

30

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

{
  'fr-dashed-borders': 'Dashed Borders',
  'fr-alternate-rows': 'Alternate Rows'
}

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

videoAllowedProviders

['.*']

The list of video providers allowed to be inserted as URL.

CODE EXAMPLE

$('.selector').froalaEditor({
  videoAllowedProviders: ['youtube', 'vimeo']
});

videoAllowedTypes

['mp4', 'webm', 'ogg']

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

'center'

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

'block'

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

600

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

['videoReplace', 'videoRemove', '|' 'videoDisplay', 'videoAlign', 'videoSize']

The buttons that appear in the edit video popup, when a video is selected.

CODE EXAMPLE

$('.selector').froalaEditor({
  videoEditButtons: ['videoDisplay', 'videoRemove']
});

videoInsertButtons

['videoBack', '|', 'videoByURL', 'videoEmbed', 'videoUpload']

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

1024 * 1024 * 30

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

true

Allows changing the position of the videos by dragging them.

CODE EXAMPLE

$('.selector').froalaEditor({
  videoMove: false
});

videoResize

true

Enable or disable resizing the videos inside the editor.

CODE EXAMPLE

$('.selector').froalaEditor({
  videoResize: false
});

videoResponsive

false

Enable or disable inserting responsive videos in the Froala Editor.

CODE EXAMPLE

$('.selector').froalaEditor({
  videoResponsive: true
});

videoSizeButtons

['videoBack', '|']

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

false

Enables splitting the HTML when inserting a new view.

CODE EXAMPLE

$('.selector').froalaEditor({
  videoSplitHTML: true
});

videoTextNear

true

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

true

Enable or disable video upload.

CODE EXAMPLE

$('.selector').froalaEditor({
  videoUpload: false
});

videoUploadMethod

'POST'

The HTTP video upload request type.

CODE EXAMPLE

$('.selector').froalaEditor({
  videoUploadMethod: 'PUT'
});

videoUploadParam

'file'

Customize the name of the parameter that contains the video file in the upload request.

CODE EXAMPLE

$('.selector').froalaEditor({
  videoUploadParam: 'file_name'
});

videoUploadParams

{}

Pass additional parameters to the upload request.

CODE EXAMPLE

$('.selector').froalaEditor({
  videoUploadParams: {
    id: 'my_editor'
  }
});

videoUploadToS3

false

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

'http://i.froala.com/upload'

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

wordAllowedStyleProps

['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

[]

Attributes that are removed when pasting something into the rich text editor from Word.

CODE EXAMPLE

$('.selector').froalaEditor({
  wordDeniedAttrs: ['style']
});

wordDeniedTags

[]

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

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

true

Choose the default action when wordPasteModal option is enabled.

CODE EXAMPLE

$('.selector').froalaEditor({
  wordPasteKeepFormatting: false
});