Options

allowStylingOnNonEditable

false

Specifies whether styling is permitted on non-editable content. When set to true, styles can be applied to non-editable elements; when set to false, styling is restricted to editable content only.

CODE EXAMPLE

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

attribution

true

Remove the Powered By Froala message.

CODE EXAMPLE

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

autofocus

false

Focus the editor instance when the page is loaded.

CODE EXAMPLE

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

new FroalaEditor('.selector', {
  direction: 'rtl'
});

disableRightClick

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

false

Turns on the editor best setup for editing documents.

CODE EXAMPLE

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

editInPopup

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

null

Set a custom class for the WYSIWYG editor editing box.

CODE EXAMPLE

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

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

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

height

null

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

CODE EXAMPLE

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

heightMax

null

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

CODE EXAMPLE

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

heightMin

null

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

CODE EXAMPLE

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

htmlAllowComments

true

Allow comments inside the edited HTML.

CODE EXAMPLE

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

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

htmlAllowedEmptyTags

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

[.*]

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

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

['script', 'style']

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

CODE EXAMPLE

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

htmlExecuteScripts

true

Allow running scripts that are entered in Code View.

CODE EXAMPLE

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

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

htmlRemoveTags

['script', 'style']

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

CODE EXAMPLE

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

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

htmlUntouched

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

'svg'

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

CODE EXAMPLE

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

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

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

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

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

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

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

keepFormatOnDelete

false

Keep format of the selected text when it is deleted.

CODE EXAMPLE

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

Key

required

The key received by activating the editor license. The activation key instructions/usage can be found

multiLine

true

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

CODE EXAMPLE

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

pasteAllowedStyleProps

[]

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

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

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

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

CODE EXAMPLE

new FroalaEditor('.selector', {
  pasteDeniedAttrs: [
    'class', 
    'id'
  ]
});

pasteDeniedTags

[]

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

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

The placeholder used when the WYSIWYG editor body is empty.

CODE EXAMPLE

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

CODE EXAMPLE

new FroalaEditor('.selector', {
  pluginsEnabled: [
    'image', 
    'link'
  ]
});

pluginsDisabled

null

Defines a list of plugins to be excluded in the current editor instance. By default, all plugins are enabled unless specified otherwise.

CODE EXAMPLE

new FroalaEditor('.selector', {
  pluginsDisabled: [
    'track_changes', 
    'link'
  ]
});

requestHeaders

{}

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

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

true

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

CODE EXAMPLE

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

scrollableContainer

'body'

Sets the container in which the editor popups are added.

CODE EXAMPLE

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

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

shortcutsHint

true

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

CODE EXAMPLE

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

spellcheck

true

Enables browser spellcheck for the text inside the editing box.

CODE EXAMPLE

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

tabIndex

null

The tabIndex to set on the editor element.

CODE EXAMPLE

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

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

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

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

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

}

}

The list of buttons that appear in the rich text editor’s toolbar on large devices (≥ 1200px).

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

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.

CODE EXAMPLE

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

toolbarButtonsSM

{

'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).

CODE EXAMPLE

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

toolbarButtonsXS

{

'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).

CODE EXAMPLE

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

toolbarContainer

null

A custom HTML selector placing the toolbar inside.

CODE EXAMPLE

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

toolbarInline

false

Enable or disable inline mode.

CODE EXAMPLE

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

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

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

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

tooltips

true

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

CODE EXAMPLE

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

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

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

width

'auto'

Sets the width of the editing box.

CODE EXAMPLE

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

zIndex

1

The zIndex to set on the editor toolbars and popups.

CODE EXAMPLE

new FroalaEditor('.selector', {
  zIndex: 2501
});