Options

apiKey app attribution autoStart autofocus aviaryKey aviaryOptions charCounterCount charCounterMax codeBeautifierOptions codeMirror codeMirrorOptions codeViewKeepActiveButtons codoxOptions colorsBackground colorsButtons colorsHEXInput colorsStep colorsText direction disableRightClick docId documentReady dragInline editInPopup editor editorClass embedlyEditButtons embedlyInsertButtons embedlyKey embedlyScriptPath emoticonsButtons emoticonsSet emoticonsStep emoticonsUseImage enter entities events faButtons fileAllowedTypes fileInsertButtons fileMaxSize fileUpload fileUploadMethod fileUploadParam fileUploadParams fileUploadToS3 fileUploadURL fileUseSelectedText fontAwesomeSets fontAwesomeTemplate fontFamily fontFamilyDefaultSelection fontFamilySelection fontSize fontSizeDefaultSelection fontSizeSelection fontSizeUnit formEditButtons formMultipleStyles formStyles formUpdateButtons 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 imageDefaultMargin imageDefaultWidth imageEditButtons imageInsertButtons imageManagerDeleteMethod imageManagerDeleteParams imageManagerDeleteURL imageManagerLoadMethod imageManagerLoadParams imageManagerLoadURL imageManagerPageSize imageManagerPreloader imageManagerScrollOffset imageManagerToggleTags imageMaxSize imageMinWidth imageMove imageMultipleStyles imageOutputSize imagePaste imagePasteProcess imageResize imageResizeWithPercent imageRoundPercent imageSizeButtons imageSplitHTML imageStyles imageTUIOptions imageTextNear imageUpload imageUploadMethod imageUploadParam imageUploadParams imageUploadRemoteUrls imageUploadToS3 imageUploadURL indentMargin initOnClick inlineClasses inlineStyles keepFormatOnDelete language lineBreakerHorizontalOffset lineBreakerOffset lineBreakerTags lineHeights linkAlwaysBlank linkAlwaysNoFollow linkAttributes linkAutoPrefix linkConvertEmailAddress linkEditButtons linkInsertButtons linkList linkMultipleStyles linkNoOpener linkNoReferrer linkStyles linkText listAdvancedTypes multiLine paragraphDefaultSelection paragraphFormat paragraphFormatSelection paragraphMultipleStyles paragraphStyles pasteAllowLocalImages pasteAllowedStyleProps pasteDeniedAttrs pasteDeniedTags pastePlain placeholderText pluginsEnabled quickInsertButtons quickInsertEnabled quickInsertTags requestHeaders requestWithCORS requestWithCredentials saveInterval saveMethod saveParam saveParams saveURL scrollableContainer shortcutsEnabled shortcutsHint specialCharButtons 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 username 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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  colorsBackground: ['#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE']
});

colorsButtons

Type: Array
Default:
["colorsBack", "|", "-"]
Plugin: colors.min.js

Set the buttons the colors popup.

CODE EXAMPLE

new FroalaEditor('.selector', {
  colorsButtons: ["colorsBack", "|", "-"]
});

colorsHEXInput

Type: Boolean
Default:
true
Plugin: colors.min.js

Show HEX input to choose custom color.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  embedlyScriptPath: 'https://cdn.embedly.com/widgets/platform.js'
});

Emoticons

emoticonsButtons

Type: Array
Default:
["emoticonsBack", "|"]
Plugin: emoticons.min.js

Buttons set for emoticons popup.

CODE EXAMPLE

new FroalaEditor('.selector', {
  emoticonsButtons: ["emoticonsBack", "|"]
});

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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  fileMaxSize: 1024 * 1024 * 3
});

fileUpload

Type: Boolean
Default:
true
Plugin: file.min.js

Enable or disable file upload.

CODE EXAMPLE

new FroalaEditor('.selector', {
  fileUpload: false
});

fileUploadMethod

Type: String
Default:
'POST'
Plugin: file.min.js

The HTTP file upload request type.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  fileUploadParam: 'file_name'
});

fileUploadParams

Type: Object
Default:
{}
Plugin: file.min.js

Pass additional parameters to the file upload request.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  fontSizeDefaultSelection: '14'
});

fontSizeUnit

Type: String
Default:
'px'
Plugin: font_size.min.js

The unit to be used for the font size.

CODE EXAMPLE

new FroalaEditor('.selector', {
  fontSizeUnit: 'pt'
});

Form

formEditButtons

Type: Array
Default:
["inputStyle", "inputEdit"]
Plugin: form.min.js

Buttons for form edit popup.

CODE EXAMPLE

new FroalaEditor('.selector', {
  formEditButtons: ["inputStyle", "inputEdit"]
});

formMultipleStyles

Type: Boolean
Default:
true
Plugin: form.min.js

To enable applying multiple css on form elements.

CODE EXAMPLE

new FroalaEditor('.selector', {
  formMultipleStyles: true
});

formStyles

Type: Object
Default:
 {fr-rounded: "Rounded", fr-large: "Large"}
Plugin: form.min.js

Options for applying styles on form.

CODE EXAMPLE

new FroalaEditor('.selector', {
  formStyles: {class1: "Class 1", class2: "Class 2"}
});

formUpdateButtons

Type: Array
Default:
["inputBack", "|"]
Plugin: form.min.js

Buttons for form popup.

CODE EXAMPLE

new FroalaEditor('.selector', {
  formUpdateButtons: ["inputBack", "|"]
});

General

attribution

Type: Boolean
Default:
true

Remove the Powered By Froala message.

CODE EXAMPLE

new FroalaEditor('.selector', {
  attribution: false
});

autofocus

Type: Boolean
Default:
false

Focus the editor instance when the page is loaded.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  disableRightClick: true
});

documentReady

Type: Boolean
Default:
false

Turns on the editor best setup for editing documents.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  editInPopup: true
});

editorClass

Type: String
Default:
null

Set a custom class for the WYSIWYG editor editing box.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  fullPage: true
});

height

Type: Number
Default:
null

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

CODE EXAMPLE

new FroalaEditor('.selector', {
  height: 300
});

heightMax

Type: Number
Default:
null

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

CODE EXAMPLE

new FroalaEditor('.selector', {
  heightMax: 500
});

heightMin

Type: Number
Default:
null

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

CODE EXAMPLE

new FroalaEditor('.selector', {
  heightMin: 200
});

htmlAllowComments

Type: Boolean
Default:
true

Allow comments inside the edited HTML.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  htmlAllowedAttrs: ['title', 'href', 'alt', 'src', 'style']
});

htmlAllowedEmptyTags

Type: Array
Default:
['textarea', 'a', 'iframe', 'object', 'video', 'style', 'script', '.fa', '.fr-emoticon', '.fr-inner', 'path', 'line', 'hr']

The list of tags that are not removed when they have no content inside.

CODE EXAMPLE

new FroalaEditor('.selector', {
  htmlAllowedEmptyTags: ['table', 'strong']
});

htmlAllowedStyleProps

Type: Array
Default:
[]

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

CODE EXAMPLE

new FroalaEditor('.selector', {
  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', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr']

The list of allowed tags.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

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

htmlExecuteScripts

Type: Boolean
Default:
true

Allow running scripts that are entered in Code View.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  htmlIgnoreCSSProperties: ['font-family', 'font-size']
});

htmlRemoveTags

Type: Array
Default:
['script', 'style']

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

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  htmlUntouched: true
});

iconsTemplate

Type: String
Default:
'svg'

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

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  initOnClick: true
});

keepFormatOnDelete

Type: Boolean
Default:
false

Keep format of the selected text when it is deleted.

CODE EXAMPLE

new FroalaEditor('.selector', {
  keepFormatOnDelete: true
});

multiLine

Type: Boolean
Default:
true

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

CODE EXAMPLE

new FroalaEditor('.selector', {
  multiLine: false
});

pasteAllowedStyleProps

Type: Array
Default:
[]

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

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  pasteAllowLocalImages: true
});

pasteDeniedAttrs

Type: Array
Default:
['class', 'id', 'style']

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

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  pastePlain: true
});

placeholderText

Type: String
Default:
'Type Something'

The placeholder used when the WYSIWYG editor body is empty.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  requestWithCredentials: true
});

requestWithCORS

Type: Boolean
Default:
true

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

CODE EXAMPLE

new FroalaEditor('.selector', {
  requestWithCORS: false
});

scrollableContainer

Type: String
Default:
'body'

Sets the container in which the editor popups are added.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  shortcutsEnabled: ['bold', 'italic']
});

shortcutsHint

Type: Boolean
Default:
true

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

CODE EXAMPLE

new FroalaEditor('.selector', {
  shortcutsHint: false
});

spellcheck

Type: Boolean
Default:
true

Enables browser spellcheck for the text inside the editing box.

CODE EXAMPLE

new FroalaEditor('.selector', {
  spellcheck: false
});

tabIndex

Type: Number
Default:
null

The tabIndex to set on the editor element.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  toolbarBottom: true
});

toolbarButtons

Type: Object/Array
Default:
{
  'moreText': {
    'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting']
  },
  'moreParagraph': {
    'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
  },
  'moreRich': {
    'buttons': ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR']
  },
  'moreMisc': {
    'buttons': ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
    'align': 'right',
    'buttonsVisible': 2
  }
}

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

new FroalaEditor('.selector', {
  toolbarButtons: {
  'moreText': {
    'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting']
  },
  'moreParagraph': {
    'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
  },
  'moreRich': {
    'buttons': ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR']
  },
  'moreMisc': {
    'buttons': ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
    'align': 'right',
    'buttonsVisible': 2
  }
}
});

toolbarButtonsMD

Type: Object/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

new FroalaEditor('.selector', {
  toolbarButtonsMD: {
  'moreText': {
    'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
    'buttonsVisible': 6
  }
}
});

toolbarButtonsSM

Type: Object/Array
Default:
{
  'moreText': {
    'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
    'buttonsVisible': 2
  },
  'moreParagraph': {
    'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'],
    'buttonsVisible': 2
  },
  'moreRich': {
    'buttons': ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR'],
    'buttonsVisible': 2
  },
  'moreMisc': {
    'buttons': ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
    'align': 'right',
    'buttonsVisible': 2
  }
}

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

new FroalaEditor('.selector', {
  toolbarButtonsSM: {
  'moreText': {
    'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
    'buttonsVisible': 4
  }
}
});

toolbarButtonsXS

Type: Object/Array
Default:
{
  'moreText': {
    'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
    'buttonsVisible': 0
  },
  'moreParagraph': {
    'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'],
    'buttonsVisible': 0
  },
  'moreRich': {
    'buttons': ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR'],
    'buttonsVisible': 0
  },
  'moreMisc': {
    'buttons': ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
    'align': 'right',
    'buttonsVisible': 2
  }
}

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

new FroalaEditor('.selector', {
  toolbarButtonsXS: {
  'moreMisc': {
    'buttons': ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
    'align': 'right',
    'buttonsVisible': 4
  }
}
});

toolbarContainer

Type: Boolean
Default:
null

A custom HTML selector placing the toolbar inside.

CODE EXAMPLE

new FroalaEditor('.selector', {
  toolbarContainer: '#toolbarContainer'
});

toolbarInline

Type: Boolean
Default:
false

Enable or disable inline mode.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  toolbarVisibleWithoutSelection: true
});

tooltips

Type: Boolean
Default:
true

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

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  useClasses: false
});

width

Type: String
Default:
'auto'

Sets the width of the editing box.

CODE EXAMPLE

new FroalaEditor('.selector', {
  width: '800'
});

zIndex

Type: Number
Default:
1

The zIndex to set on the editor toolbars and popups.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  imageDefaultDisplay: 'inline'
});

imageDefaultMargin

Type: Number
Default:
5
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

new FroalaEditor('.selector', {
  imageDefaultMargin: 7
});

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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  imageMove: false
});

imageMultipleStyles

Type: Boolean
Default:
true
Plugin: image.min.js

Allows multiple image styles to be selected at a time.

CODE EXAMPLE

new FroalaEditor('.selector', {
  imageMultipleStyles: false
});

imagePaste

Type: Boolean
Default:
true
Plugin: image.min.js

Allows pasting images from clipboard.

CODE EXAMPLE

new FroalaEditor('.selector', {
  imagePaste: false
});

imagePasteProcess

Type: Boolean
Default:
false
Plugin: image.min.js

Use default image settings for pasted images.

CODE EXAMPLE

new FroalaEditor('.selector', {
  imagePasteProcess: true
});

imageResize

Type: Boolean
Default:
true
Plugin: image.min.js

Disables image resize when set to 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

new FroalaEditor('.selector', {
  imageResizeWithPercent: true
});

imageRoundPercent

Type: Boolean
Default:
false
Plugin: image.min.js

Force image percent to round to integer while resizing.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  imageSizeButtons: ['imageBack']
});

imageSplitHTML

Type: Boolean
Default:
false
Plugin: image.min.js

Enables splitting the HTML when inserting a new image.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  imageStyles: {
  class1: 'Class 1',
  class2: 'Class 2',
  class3: 'Class 3'
}
});

imageTUIOptions

Type: Object
Default:
{
   includeUI: {
      initMenu: "filter",
      menuBarPosition: "left",
      theme: {
        "menu.activeIcon.path": "https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/svg/icon-b.svg",
        "menu.disabledIcon.path": "https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/svg/icon-a.svg",
        "menu.hoverIcon.path": "https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/svg/icon-c.svg",
        "menu.normalIcon.path": "https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/svg/icon-d.svg",
        "submenu.activeIcon.name": "icon-c",
        "submenu.activeIcon.path": "https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/svg/icon-c.svg",
        "submenu.normalIcon.name": "icon-d",
        "submenu.normalIcon.path": "https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/svg/icon-d.svg"
   }
}
Plugin: image.min.js

Set options for TUI editor plugin.

CODE EXAMPLE

new FroalaEditor('.selector', {
  imageTUIOptions: {
   includeUI: {
      initMenu: "filter",
      menuBarPosition: "left",
      theme: {
        "menu.activeIcon.path": "https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/svg/icon-b.svg",
        "menu.disabledIcon.path": "https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/svg/icon-a.svg",
        "menu.hoverIcon.path": "https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/svg/icon-c.svg",
        "menu.normalIcon.path": "https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/svg/icon-d.svg",
        "submenu.activeIcon.name": "icon-c",
        "submenu.activeIcon.path": "https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/svg/icon-c.svg",
        "submenu.normalIcon.name": "icon-d",
        "submenu.normalIcon.path": "https://cdn.jsdelivr.net/npm/tui-image-editor@3.2.2/dist/svg/icon-d.svg"
   }
}
});

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

new FroalaEditor('.selector', {
  imageTextNear: false
});

imageUpload

Type: Boolean
Default:
true
Plugin: image.min.js

Enable or disable image upload.

CODE EXAMPLE

new FroalaEditor('.selector', {
  imageUpload: false
});

imageAddNewLine

Type: Boolean
Default:
false
Plugin: image.min.js

Add new line after inserting an image when enabled.

CODE EXAMPLE

new FroalaEditor('.selector', {
  imageAddNewLine: true
});

imageUploadMethod

Type: String
Default:
'POST'
Plugin: image.min.js

The HTTP image upload request type.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  imageUploadParam: 'file_name'
});

imageUploadParams

Type: Object
Default:
{}
Plugin: image.min.js

Pass additional parameters to the upload request.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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:
null
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

new FroalaEditor('.selector', {
  imageUploadURL: 'http://i.froala.com/upload'
});

Image Manager

imageManagerDeleteMethod

Type: String
Default:
'POST'
Plugin: image_manager.min.js

The HTTP image manager delete image request type.

CODE EXAMPLE

new FroalaEditor('.selector', {
  imageManagerDeleteMethod: 'DELETE'
});

imageManagerDeleteParams

Type: Object
Default:
{}
Plugin: image_mananger.min.js

Additional parameters passed to the image manager image delete request.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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='http://exmaple.com/images/photo1.jpg' data-name='Photo 1 Name' data-id='103454285'>

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  imageManagerScrollOffset: 10
});

imageManagerToggleTags

Type: Boolean
Default:
true
Plugin: image_manager.min.js

To enable/disable toggle of filter tags for image manager popup.

CODE EXAMPLE

new FroalaEditor('.selector', {
  imageManagerToggleTags: false
});

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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  language: 'es'
});

Line Breaker

lineBreakerHorizontalOffset

Type: Number
Default:
10
Plugin: line_breaker.min.js

The distance in pixels from the left or right of an element at which to show the line-breaker.

CODE EXAMPLE

new FroalaEditor('.selector', {
  lineBreakerHorizontalOffset: 20
});

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

new FroalaEditor('.selector', {
  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

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

Paragraph Format

paragraphDefaultSelection

Type: String
Default:
'Paragraph Format'
Plugin: paragraph_format.min.js

The default option to select for Paragraph Format.

CODE EXAMPLE

new FroalaEditor('.selector', {
  paragraphDefaultSelection: 'Paragraph'
});

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

new FroalaEditor('.selector', {
  paragraphFormat: {
    N: 'Normal',
    H1: 'Heading 1',
    H2: 'Heading 2'
  }
});

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

new FroalaEditor('.selector', {
  paragraphFormatSelection: true
});

paragraphMultipleStyles

Type: Boolean
Default:
true
Plugin: paragraph_format.min.js

Allows multiple paragraph styles to be selected at a time.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  quickInsertButtons: ['image', 'table']
});

quickInsertEnabled

Type: Boolean
Default:
true
Plugin: quick_insert.min.js

To enable quick insert functionality.

CODE EXAMPLE

new FroalaEditor('.selector', {
  quickInsertEnabled: false
});

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

new FroalaEditor('.selector', {
  quickInsertTags: ['p', 'div']
});

Font Awesome

faButtons

Type: Array
Default:
["fontAwesomeBack", "|"]
Third Party: font_awesome.min.js

The list of Font Awesome buttons to show in the popup for inserting icons.

CODE EXAMPLE

new FroalaEditor('.selector', {
  faButtons: ["fontAwesomeBack", "|"]
});

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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  fontAwesomeTemplate: '<i class="fa fa-[NAME] fr-deletable" aria-hidden="true">&nbsp;</i>'
});

Special Characters

specialCharButtons

Type: Array
Default:
["specialCharBack", "|"]
Third Party: special_characters.min.js

The list of special characters buttons for popup.

CODE EXAMPLE

new FroalaEditor('.selector', {
  specialCharButtons: ["specialCharBack", "|"]
});

specialCharactersSets

Type: Object
Default:
{}
Third Party: special_characters.min.js

The list of special characters to show.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

events

Type: Object
Default:
window.WEBSPELLCHECKER_CONFIG = {
  autoSearch: true,
  autoDestroy: true,
  serviceId: '1:long-identifier-received-from-webspellchecker-after-subscription'
};
Third Party: wscbundle.min.js

The options used for WebSpellChecker.

CODE EXAMPLE

new FroalaEditor('.selector', {
  events: {
  'initialized': function() {
      WEBSPELLCHECKER.init({
          container: this.el
      });
    }
  }
});

Codox Wave

codoxOptions

Type: object
Default:
events: {
  'initialized': function() {
    //Adding Wave configuration
    const editor = this;
    var config = { 
      "app"      : "froala",
      "docId"    : "mydoc",
      "username" : "Chris",
      "editor"   : editor,
      "apiKey"   : "Your-codox-key-here"
    };   
    codox.init(config);
  }
}
Third Party: wave.client.min.js

Set options for codox plugin.

app

Type: string
Default:
required

The static string value froala

docId

Type: string
Default:
required

A unique identifier for the document. In a content management service, this could for example be the resource identifier for the document.

username

Type: string
Default:
required

The name of the user joining the co-editing session. For a content management service, this should be set for each logged-in user based on their credentials. This name will be displayed during real-time co-editing sessions.

apiKey

Type: string
Default:
required

The API key for the Froala integration. You can obtain a key from your Wave account.

editor

Type: Froala
Default:
required

A reference to a Froala editor instance, in which the co-editing session should be bootstrapped.

autoStart

Type: boolean
Default:
optional

Set to true, if co-editing session should start automatically on init(config). Set to false to initialize but delay start the co-editing (see the start() client API). Default setting is true.

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

new FroalaEditor('.selector', {
  saveInterval: 2500
});

saveMethod

Type: String
Default:
'POST'
Plugin: save.min.js

The HTTP save request type.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  saveParam: 'content'
});

saveParams

Type: Object
Default:
{}
Plugin: save.min.js

Additional parameters passed to the save request.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  tableInsertHelper: false
});

tableInsertHelperOffset

Type: Integer
Default:
15
Plugin: table.min.js

The offset for showing the table insert helper.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  tableInsertMaxSize: 8
});

tableMultipleStyles

Type: Boolean
Default:
true
Plugin: table.min.js

Allows multiple table styles to be selected at a time.

CODE EXAMPLE

new FroalaEditor('.selector', {
  tableMultipleStyles: false
});

tableResizer

Type: Boolean
Default:
true
Plugin: table.min.js

Enables resizing table cells.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  videoMove: false
});

videoResize

Type: Boolean
Default:
true
Plugin: video.min.js

Enable or disable resizing the videos inside the editor.

CODE EXAMPLE

new FroalaEditor('.selector', {
  videoResize: false
});

videoResponsive

Type: Boolean
Default:
false
Plugin: video.min.js

Enable or disable inserting responsive videos in the Froala Editor.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  videoSizeButtons: ['videoBack']
});

videoSplitHTML

Type: Boolean
Default:
false
Plugin: video.min.js

Enables splitting the HTML when inserting a new view.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  videoTextNear: false
});

videoUpload

Type: Boolean
Default:
true
Plugin: video.min.js

Enable or disable video upload.

CODE EXAMPLE

new FroalaEditor('.selector', {
  videoUpload: false
});

videoUploadMethod

Type: String
Default:
'POST'
Plugin: video.min.js

The HTTP video upload request type.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  videoUploadParam: 'file_name'
});

videoUploadParams

Type: Object
Default:
{}
Plugin: video.min.js

Pass additional parameters to the upload request.

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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:
null
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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  wordAllowedStyleProps: ['font-size']
});

wordDeniedAttrs

Type: Array
Default:
[]

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

CODE EXAMPLE

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  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

new FroalaEditor('.selector', {
  wordPasteModal: false
});

wordPasteKeepFormatting

Type: Boolean
Default:
true

Choose the default action when wordPasteModal option is enabled.

CODE EXAMPLE

new FroalaEditor('.selector', {
  wordPasteKeepFormatting: false
});
Top