Skip to content

Options

allowComments

Type: Boolean
Default: true

Allow comments inside the edited HTML.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the allowComments option specified:

$('.selector').editable({
  allowComments: false
});

Get or set the allowComments option, after initialization:

// Getter.
var allowComments = $('.selector').editable('option', 'allowComments');

// Setter.
$('.selector').editable('option', 'allowComments', false);

allowedAttrs

Type: Array
Default: *

The list of allowed attributes to be used for tags. By default the following attributes are allowed: accept, accept-charset, accesskey, action, align, alt, async, autocomplete, autofocus, autoplay, autosave, background, bgcolor, border, charset, cellpadding, cellspacing, checked, cite, class, color, cols, colspan, contenteditable, contextmenu, controls, coords, data, data-.*, datetime, default, defer, dir, dirname, disabled, download, draggable, dropzone, enctype, for, form, formaction, headers, height, hidden, high, href, hreflang, icon, id, ismap, itemprop, keytype, kind, label, lang, language, list, loop, low, max, maxlength, media, method, min, multiple, name, novalidate, open, optimum, pattern, ping, placeholder, poster, preload, pubdate, radiogroup, readonly, rel, required, reversed, rows, rowspan, sandbox, scope, scoped, seamless, selected, shape, size, sizes, span, src, srcdoc, srclang, srcset, start, step, summary, spellcheck, style, tabindex, target, title, type, translate, usemap, value, valign, width, wrap.
Note: Because of performance considerations the attributes may not be removed immediately, but they will never be sent to the server when saving.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the allowedAttrs option specified:

$('.selector').editable({
  allowedAttrs: ['title', 'href', 'alt', 'src', 'style']
});

Get or set the allowedAttrs option, after initialization:

// Getter.
var allowedAttrs = $('.selector').editable('option', 'allowedAttrs');

// Setter.
$('.selector').editable('option', 'allowedAttrs', ['title', 'href', 'alt', 'src', 'style']);

allowedBlankTags

Type: Array
Default: *

A list of tags that are not removed when they have no content and no attributes.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the allowedBlankTags option specified:

$('.selector').editable({
  allowedBlankTags: ['table', 'strong']
});

Get or set the allowedBlankTags option, after initialization:

// Getter.
var allowedBlankTags = $('.selector').editable('option', 'allowedBlankTags');

// Setter.
$('.selector').editable('option', 'allowedBlankTags', ['table', 'strong']);

allowedFileTypes

Type: Array
Default: *

A 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 EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the allowedFileTypes option specified:

$('.selector').editable({
  allowedFileTypes: ['application/pdf', 'application/msword']
});

Get or set the allowedFileTypes option, after initialization:

// Getter.
var allowedFileTypes = $('.selector').editable('option', 'allowedFileTypes');

// Setter.
$('.selector').editable('option', 'allowedFileTypes', ['application/pdf', 'application/msword']);

allowedImageTypes

Type: Array
Default: ['jpeg', 'jpg', 'png', 'gif']

A 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 EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the allowedImageTypes option specified:

$('.selector').editable({
  allowedImageTypes: ['jpeg', 'jpg', 'png']
});

Get or set the allowedImageTypes option, after initialization:

// Getter.
var allowedImageTypes = $('.selector').editable('option', 'allowedImageTypes');

// Setter.
$('.selector').editable('option', 'allowedImageTypes', ['jpeg', 'jpg', 'png']);

allowedTags

Type: Array
Default: *

The list of allowed tags. By default the following tags are allowed: !--, 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, section, select, text-small, source, span, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr.
Note: Because of performance considerations the tags may not be removed immediately, but they will never be sent to the server when saving.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the allowedTags option specified:

$('.selector').editable({
  allowedTags: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']
});

Get or set the allowedTags option, after initialization:

// Getter.
var allowedTags = $('.selector').editable('option', 'allowedTags');

// Setter.
$('.selector').editable('option', 'allowedTags', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']);

allowScript

Type: Boolean
Default: false

Allow to use the SCRIPT tag.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the allowScript option specified:

$('.selector').editable({
  allowScript: true
});

Get or set the allowScript option, after initialization:

// Getter.
var allowScript = $('.selector').editable('option', 'allowScript');

// Setter.
$('.selector').editable('option', 'allowScript', true);

allowStyle

Type: Boolean
Default: false

Allow to use the STYLE tag.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the allowStyle option specified:

$('.selector').editable({
  allowStyle: true
});

Get or set the allowStyle option, after initialization:

// Getter.
var allowStyle = $('.selector').editable('option', 'allowStyle');

// Setter.
$('.selector').editable('option', 'allowStyle', true);

alwaysBlank

Type: Boolean
Default: false

Specifies the default state of the "Open in new tab" checkbox from the link popup.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the alwaysBlank option specified:

$('.selector').editable({
  alwaysBlank: true
});

Get or set the alwaysBlank option, after initialization:

// Getter.
var alwaysBlank = $('.selector').editable('option', 'alwaysBlank');

// Setter.
$('.selector').editable('option', 'alwaysBlank', true);

alwaysVisible

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 inlineMode option is true.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the alwaysVisible option specified:

$('.selector').editable({
  alwaysVisible: true
});

Get or set the alwaysVisible option, after initialization:

// Getter.
var alwaysVisible = $('.selector').editable('option', 'alwaysVisible');

// Setter.
$('.selector').editable('option', 'alwaysVisible', true);

autosave

Type: Boolean
Default: false

Enables autosave in order to prevent data loss. When enabled, the save action is triggered according to the autosaveInterval option. The save request is made to the URL specified in saveURL option. The save request is triggered only if the user is not typing.
Note: In order to prevent server overload, save will be triggered only if the content was changed from the last save request.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the autosave option specified:

$('.selector').editable({
  autosave: true
});

Get or set the autosave option, after initialization:

// Getter.
var autosave = $('.selector').editable('option', 'autosave');

// Setter.
$('.selector').editable('option', 'autosave', true);

autosaveInterval

Type: Number
Default: 10000

Time in milliseconds that defines when the autosave should be triggered. Setting a higher interval helps preventing request overload on the server.
Note: The autosave will be triggered only if the content was changed from the last interval. Also, the minimum value that can be set is 100.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the autosaveInterval option specified:

$('.selector').editable({
  autosaveInterval: 2500
});

Get or set the autosaveInterval option, after initialization:

// Getter.
var autosaveInterval = $('.selector').editable('option', 'autosaveInterval');

// Setter.
$('.selector').editable('option', 'autosaveInterval', 2500);

beautifyCode

Type: Boolean
Default: true

Format the source code in HTML view for a better reading.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the beautifyCode option specified:

$('.selector').editable({
  beautifyCode: false
});

Get or set the beautifyCode option, after initialization:

// Getter.
var beautifyCode = $('.selector').editable('option', 'beautifyCode');

// Setter.
$('.selector').editable('option', 'beautifyCode', false);

blockStyles

Type: Object
Default: {}

Set custom styles for the selected block. This option is an Object where the key is the name of the block ('n', 'p', 'pre', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6') and the value is an Object like the one passed to the defaultBlockStyle option.
Note: This option requires the block_styles.min.js plugin.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the blockStyles option specified:

$('.selector').editable({
  blockStyles: {
    'p': {
      'class1': 'Class 1',
      'class2': 'Class 2'
    },
    'h1': {
      'class3': 'Class 3',
      'class4': 'Class 4'
    }
  }
});

Get or set the blockStyles option, after initialization:

// Getter.
var blockStyles = $('.selector').editable('option', 'blockStyles');

// Setter.
$('.selector').editable('option', 'blockStyles', {
    'p': {
      'class1': 'Class 1',
      'class2': 'Class 2'
    },
    'h1': {
      'class3': 'Class 3',
      'class4': 'Class 4'
    }
  });

blockStylesToggle

Type: Boolean
Default: true

Setting this option true allows only one block style to be selected at a time.
Note: This option requires the block_styles.min.js plugin.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the blockStylesToggle option specified:

$('.selector').editable({
  blockStylesToggle: false
});

Get or set the blockStylesToggle option, after initialization:

// Getter.
var blockStylesToggle = $('.selector').editable('option', 'blockStylesToggle');

// Setter.
$('.selector').editable('option', 'blockStylesToggle', false);

blockTags

Type: Object
Default: *

An Object with the options that will appear in the Format Block option from the toolbar.
Note: 'n' tag will be treated as a paragraph tag when paragraphy option is enabled.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the blockTags option specified:

$('.selector').editable({
  blockTags: {
    n: 'Normal',
    h1: 'Heading 1',
    h2: 'Heading 2',
    h3: 'Heading 3'
  }
});

Get or set the blockTags option, after initialization:

// Getter.
var blockTags = $('.selector').editable('option', 'blockTags');

// Setter cannot be used after initialization.

buttons

Type: Array
Default: *

The list of buttons that appear in the editor toolbar. The complete list of available buttons is: 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'color', 'formatBlock', 'blockStyle', 'inlineStyle', 'align', 'insertOrderedList', 'insertUnorderedList', 'outdent', 'indent', 'selectAll', 'createLink', 'insertImage', 'insertVideo', 'table', 'undo', 'redo', 'html', 'save', 'insertHorizontalRule', 'uploadFile', 'removeFormat', 'fullscreen'.
Note: 'sep' will insert a horizontal line when inlineMode is true and a vertical one otherwise.

Some of the buttons above require a specific plugin (read more):
blockStyle button requires block_styles.min.js plugin;
color button requires colors.min.js plugin;
fontFamily button requires font_family.min.js plugin;
fontSize button requires font_size.min.js plugin;
fullscreen button requires fullscreen.min.js plugin;
inlineStyle button requires inline_styles.min.js plugin;
insertVideo button requires video.min.js plugin;
insertOrderedList and insertUnorderedList buttons require lists.min.js plugin;
table button requires table.min.js plugin;
uploadFile button requires file_upload.min.js plugin;

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the buttons option specified:

$('.selector').editable({
  buttons: ['bold', 'italic', 'underline']
});

Get or set the buttons option, after initialization:

// Getter.
var buttons = $('.selector').editable('option', 'buttons');

// Setter cannot be used after initialization.

colorGroups

Type: Object
Default: *

An array with the color groups available in the colors plugin.
Note: This option requires the colors.min.js plugin.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the colorGroups option specified:

$('.selector').editable({
  colorGroups: [
    {
      text: 'Text',
      cmd: 'foreColor',
      // If it is not specified, the default colors array is used.
      colors: ['#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE']
    },
    {
      text: 'Background',
      cmd: 'backColor',
      // If it is not specified, the default colors array is used.
      colors: ['#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE']
    }
  ]
});

Get or set the colorGroups option, after initialization:

// Getter.
var colorGroups = $('.selector').editable('option', 'colorGroups');

// Setter.
$('.selector').editable('option', 'colorGroups', [
    {
      text: 'Text',
      cmd: 'foreColor',
      // If it is not specified, the default colors array is used.
      colors: ['#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE']
    },
    {
      text: 'Background',
      cmd: 'backColor',
      // If it is not specified, the default colors array is used.
      colors: ['#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE']
    }
  ]);

colors

Type: Array
Default: *

An array of colors used in the colors dropdown. Passing REMOVE as a value in the array will display the remove button for colors.
Note: This option requires the colors.min.js plugin.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the colors option specified:

$('.selector').editable({
  colors: ['#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE']
});

Get or set the colors option, after initialization:

// Getter.
var colors = $('.selector').editable('option', 'colors');

// Setter.
$('.selector').editable('option', 'colors', ['#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE']);

colorsStep

Type: Number
Default: 7

The number of colors displayed on a line in the colors dropdown.
Note: This option requires the colors.min.js plugin.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the colorsStep option specified:

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

Get or set the colorsStep option, after initialization:

// Getter.
var colorsStep = $('.selector').editable('option', 'colorsStep');

// Setter.
$('.selector').editable('option', 'colorsStep', 14);

convertMailAddresses

Type: Boolean
Default: true

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

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the convertMailAddresses option specified:

$('.selector').editable({
  convertMailAddresses: false
});

Get or set the convertMailAddresses option, after initialization:

// Getter.
var convertMailAddresses = $('.selector').editable('option', 'convertMailAddresses');

// Setter.
$('.selector').editable('option', 'convertMailAddresses', false);

countCharacters

Type: Boolean
Default: true

Display the character counter.
Note: This option requires the char_counter.min.js plugin.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the countCharacters option specified:

$('.selector').editable({
  countCharacters: false
});

Get or set the countCharacters option, after initialization:

// Getter.
var countCharacters = $('.selector').editable('option', 'countCharacters');

// Setter.
$('.selector').editable('option', 'countCharacters', false);

crossDomain

Type: Boolean
Default: true

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

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the crossDomain option specified:

$('.selector').editable({
  crossDomain: false
});

Get or set the crossDomain option, after initialization:

// Getter.
var crossDomain = $('.selector').editable('option', 'crossDomain');

// Setter.
$('.selector').editable('option', 'crossDomain', false);

customButtons

Type: Object
Default: {}

Define your own buttons to be used in the toolbar. See Custom buttons example for more details.
Note: The buttons defined should be included in the buttons option list in order to appear in the toolbar.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the customButtons option specified:

$('.selector').editable({
  customButtons: {
    alert: {
      title: 'Alert',
      icon: {
        type: 'font',
        value: 'fa fa-info'
      },
      callback: function () {
        alert ('Hello!')
      },
      refresh: function () {
        // This method is called when the state of the button might have been changed.
      }
    },

    clear: {
      title: 'Remove HTML',
      icon: {
        type: 'txt',
        value: 'x'
      },
      callback: function () {
        this.setHTML('');
      },
      refresh: function () {
        // This method is called when the state of the button might have been changed.
      }
    },

    image: {
      title: 'Save',
      icon: {
        type: 'img', // Recommended size: 40 x 35
        value: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjZWVlIi8+PHRleHQgdGV4dC1hbmNob3I9Im1pZGRsZSIgeD0iMzIiIHk9IjMyIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9zdmc+'
      },
      callback: function () {
        alert('This is an image button');
      },
      refresh: function () {
        // This method is called when the state of the button might have been changed.
      }
    }
  }
});

Get or set the customButtons option, after initialization:

// Getter.
var customButtons = $('.selector').editable('option', 'customButtons');

// Setter cannot be used after initialization.

customDropdowns

Type: Object
Default: {}

Define your own dropdowns to be used in the toolbar.
Note: The dropdowns defined should be included in the buttons option list in order to appear in the toolbar.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the customDropdowns option specified:

$('.selector').editable({
  customDropdowns: {
    my_dropdown: {
      title: 'Taxi Dropdown',
      icon: {
        type: 'font',
        value: 'fa fa-taxi'
      },
      options: {
        'Call taxi': function () {
          alert ('Call a taxi!');
        },
        'Find taxi': function () {
          alert ('Find me a taxi!');
        }
      },
      refresh: function () {
        // This method is called when the state of the button might have been changed.
      },
      refreshOnShow: function () {
        // This method is called when the dropdown context menu is shown.
      }
    }
  }
});

Get or set the customDropdowns option, after initialization:

// Getter.
var customDropdowns = $('.selector').editable('option', 'customDropdowns');

// Setter cannot be used after initialization.

customImageButtons

Type: Object
Default: {}

Define your own buttons to be used in the image toolbar.
Note: The buttons defined should be included in the imageButtons option list in order to appear in the image toolbar.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the customImageButtons option specified:

$('.selector').editable({
  customImageButtons: {
    alert: {
      title: 'Alert',
      icon: {
        type: 'font',
        value: 'fa fa-info'
      },
      callback: function ($img) {
        alert ($img.attr('src'));
      },
      refresh: function () {
        // This method is called when the state of the button might have been changed.
      }
    }
  }
});

Get or set the customImageButtons option, after initialization:

// Getter.
var customImageButtons = $('.selector').editable('option', 'customImageButtons');

// Setter.
$('.selector').editable('option', 'customImageButtons', {
    alert: {
      title: 'Alert',
      icon: {
        type: 'font',
        value: 'fa fa-info'
      },
      callback: function ($img) {
        alert ($img.attr('src'));
      },
      refresh: function () {
        // This method is called when the state of the button might have been changed.
      }
    }
  });

customText

Type: Object
Default: {}

Set custom text for tooltips and messages that appear in the editor interface.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the customText option specified:

$('.selector').editable({
  customText: {
    'OK': 'GO',
    'Bold': 'Make text bold.'
  }
});

Get or set the customText option, after initialization:

// Getter.
var customText = $('.selector').editable('option', 'customText');

// Setter.
$('.selector').editable('option', 'customText', {
    'OK': 'GO',
    'Bold': 'Make text bold.'
  });

defaultBlockStyle

Type: Object
Default: {'f-italic': 'Italic', 'f-typewriter': 'Typewriter', 'f-spaced': 'Spaced', 'f-uppercase': 'Uppercase'}

The default block styles are used when no blockStyles are specified. This options is an Object where the key is the name of the class and the value is the text from the block style dropdown.
Note: This option requires the block_styles.min.js plugin.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the defaultBlockStyle option specified:

$('.selector').editable({
  defaultBlockStyle: {
    'class1': 'Class 1',
    'class2': 'Class 2'
  }
});

Get or set the defaultBlockStyle option, after initialization:

// Getter.
var defaultBlockStyle = $('.selector').editable('option', 'defaultBlockStyle');

// Setter.
$('.selector').editable('option', 'defaultBlockStyle', {
    'class1': 'Class 1',
    'class2': 'Class 2'
  });

defaultColorGroup

Type: String
Default: 'foreColor'

Set the default color type from the colors dropdown.
Note: This option requires the colors.min.js plugin.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the defaultColorGroup option specified:

$('.selector').editable({
  defaultColorGroup: 'backColor'
});

Get or set the defaultColorGroup option, after initialization:

// Getter.
var defaultColorGroup = $('.selector').editable('option', 'defaultColorGroup');

// Setter.
$('.selector').editable('option', 'defaultColorGroup', 'backColor');

defaultImageAlignment

Type: String
Default: 'center'

Set the default image alignment when it is inserted in the editor. Possible values are left, center and right.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the defaultImageAlignment option specified:

$('.selector').editable({
  defaultImageAlignment: 'left'
});

Get or set the defaultImageAlignment option, after initialization:

// Getter.
var defaultImageAlignment = $('.selector').editable('option', 'defaultImageAlignment');

// Setter.
$('.selector').editable('option', 'defaultImageAlignment', 'left');

defaultImageDisplay

Type: String
Default: 'block'

The default display for images when they are added. Possible options are: "inline" and "block".

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the defaultImageDisplay option specified:

$('.selector').editable({
  defaultImageDisplay: 'inline'
});

Get or set the defaultImageDisplay option, after initialization:

// Getter.
var defaultImageDisplay = $('.selector').editable('option', 'defaultImageDisplay');

// Setter.
$('.selector').editable('option', 'defaultImageDisplay', 'inline');

defaultImageTitle

Type: String
Default: 'Image title'

The default title that is set for an image when it is inserted.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the defaultImageTitle option specified:

$('.selector').editable({
  defaultImageTitle: 'My Image'
});

Get or set the defaultImageTitle option, after initialization:

// Getter.
var defaultImageTitle = $('.selector').editable('option', 'defaultImageTitle');

// Setter.
$('.selector').editable('option', 'defaultImageTitle', 'My Image');

defaultImageWidth

Type: Number
Default: 300

The width of the image when it is inserted in the editor. Setting it to 0 will not set any width.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the defaultImageWidth option specified:

$('.selector').editable({
  defaultImageWidth: 200
});

Get or set the defaultImageWidth option, after initialization:

// Getter.
var defaultImageWidth = $('.selector').editable('option', 'defaultImageWidth');

// Setter.
$('.selector').editable('option', 'defaultImageWidth', 200);

defaultTag

Type: String
Default: 'P'

Set the default tag to be used when ENTER key is hit. Possible values are P and DIV.
Please notice that this option is experimental for the moment.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the defaultTag option specified:

$('.selector').editable({
  defaultTag: 'DIV'
});

Get or set the defaultTag option, after initialization:

// Getter.
var defaultTag = $('.selector').editable('option', 'defaultTag');

// Setter.
$('.selector').editable('option', 'defaultTag', 'DIV');

defaultVideoAlignment

Type: String
Default: 'center'

Set the default video alignment when it is inserted in the editor. Possible values are left, center and right.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the defaultVideoAlignment option specified:

$('.selector').editable({
  defaultVideoAlignment: 'left'
});

Get or set the defaultVideoAlignment option, after initialization:

// Getter.
var defaultVideoAlignment = $('.selector').editable('option', 'defaultVideoAlignment');

// Setter.
$('.selector').editable('option', 'defaultVideoAlignment', 'left');

direction

Type: String
Default: 'ltr'

Sets the direction of the text.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the direction option specified:

$('.selector').editable({
  direction: 'rtl'
});

Get or set the direction option, after initialization:

// Getter.
var direction = $('.selector').editable('option', 'direction');

// Setter.
$('.selector').editable('option', 'direction', 'rtl');

disableRightClick

Type: Boolean
Default: false

Disables the default browser context menu. It's recommended to be used if alwaysVisible option is enabled.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the disableRightClick option specified:

$('.selector').editable({
  disableRightClick: true
});

Get or set the disableRightClick option, after initialization:

// Getter.
var disableRightClick = $('.selector').editable('option', 'disableRightClick');

// Setter.
$('.selector').editable('option', 'disableRightClick', true);

doNotJoinTags

Type: Array
Default: ["a"]

An array with tags that should not be joined during the cleaning algorithm.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the doNotJoinTags option specified:

$('.selector').editable({
  doNotJoinTags: ["a", "textarea"]
});

Get or set the doNotJoinTags option, after initialization:

// Getter.
var doNotJoinTags = $('.selector').editable('option', 'doNotJoinTags');

// Setter.
$('.selector').editable('option', 'doNotJoinTags', ["a", "textarea"]);

editInPopup

Type: Boolean
Default: false

Edit the text inside the HTML element on which the editor is initialized on in a popup.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the editInPopup option specified:

$('.selector').editable({
  editInPopup: true
});

Get or set the editInPopup option, after initialization:

// Getter.
var editInPopup = $('.selector').editable('option', 'editInPopup');

// Setter.
$('.selector').editable('option', 'editInPopup', true);

editorClass

Type: String
Default: ''

Set a custom class for the editor editing box.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the editorClass option specified:

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

Get or set the editorClass option, after initialization:

// Getter.
var editorClass = $('.selector').editable('option', 'editorClass');

// Setter.
$('.selector').editable('option', 'editorClass', 'custom-class');

fileUploadParam

Type: String
Default: 'file'

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

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the fileUploadParam option specified:

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

Get or set the fileUploadParam option, after initialization:

// Getter.
var fileUploadParam = $('.selector').editable('option', 'fileUploadParam');

// Setter.
$('.selector').editable('option', 'fileUploadParam', 'file_name');

fileUploadParams

Type: Object
Default: {}

Additional params passed to the file upload request.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the fileUploadParams option specified:

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

Get or set the fileUploadParams option, after initialization:

// Getter.
var fileUploadParams = $('.selector').editable('option', 'fileUploadParams');

// Setter.
$('.selector').editable('option', 'fileUploadParams', {
    id: 'my_editor'
  });

fileUploadURL

Type: String
Default: 'http://i.froala.com/upload'

The URL where the files uploaded by the user are saved. When a file is uploaded, the editor sends the file to the server through a HTTP request. The server should process the data from the file parameter of the request and return a JSON object containing a link field with the link to the uploaded file. More details can be found in the File Upload concept article.
E.g. {link: 'path/to/file.pdf'}.

Note 1: By default, the files are stored on our servers, but if you want to have full control over them, you should consider implementing the upload on your server. The files stored on our servers, may be deleted at any time without any notice.
Note 2: If the domain where the file is saved is not the same with the one where the editor is running, you may need to enable crossDomain option and make specific customizations on the server. For more information please refer to Cross-origin resource sharing.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the fileUploadURL option specified:

$('.selector').editable({
  fileUploadURL: '/upload_file'
});

Get or set the fileUploadURL option, after initialization:

// Getter.
var fileUploadURL = $('.selector').editable('option', 'fileUploadURL');

// Setter.
$('.selector').editable('option', 'fileUploadURL', '/upload_file');

fontList

Type: Object
Default: *

Defines the fonts that appear under the Font Family button from the toolbar.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the fontList option specified:

$('.selector').editable({
  fontList: {
    'Arial,Helvetica': 'Font 1',
    'Impact,Charcoal': 'Font 2',
    'Tahoma,Geneva', 'Font 3'
  }
});

Get or set the fontList option, after initialization:

// Getter.
var fontList = $('.selector').editable('option', 'fontList');

// Setter cannot be used after initialization.

formatTags

Type: Array
Default: *

The list of tags that should be formatted in HTML view. By default the following tags are formatted: p, pre, blockquote, h1, h2, h3, h4, h5, h6, div, ul, ol, li, table, tbody, thead, tfoot, tr, th, td.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the formatTags option specified:

$('.selector').editable({
  formatTags: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']
});

Get or set the formatTags option, after initialization:

// Getter.
var formatTags = $('.selector').editable('option', 'formatTags');

// Setter.
$('.selector').editable('option', 'formatTags', ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']);

fullPage

Type: Boolean
Default: false

Allow to use HTML, HEAD, BODY tags and DOCTYPE declaration..

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the fullPage option specified:

$('.selector').editable({
  fullPage: true
});

Get or set the fullPage option, after initialization:

// Getter.
var fullPage = $('.selector').editable('option', 'fullPage');

// Setter.
$('.selector').editable('option', 'fullPage', true);

headers

Type: Object
Default: {}

An object of additional header key/value pairs to send along with requests using the XMLHttpRequest transport.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the headers option specified:

$('.selector').editable({
  headers: {
    custom_header: 'My custom header data.'
  }
});

Get or set the headers option, after initialization:

// Getter.
var headers = $('.selector').editable('option', 'headers');

// Setter.
$('.selector').editable('option', 'headers', {
    custom_header: 'My custom header data.'
  });

height

Type: String
Default: 'auto'

Set a height for the editor editing box.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the height option specified:

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

Get or set the height option, after initialization:

// Getter.
var height = $('.selector').editable('option', 'height');

// Setter.
$('.selector').editable('option', 'height', '300');

iconClasses

Type: Array
Default: ['fa-']

An array with classes that are used for icons inside the editor, for example Font Awesome. The classes are built into a RegExp and they are used for not converting i tags to em tags.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the iconClasses option specified:

$('.selector').editable({
  iconClasses: ['fa-', 'glyphicons-']
});

Get or set the iconClasses option, after initialization:

// Getter.
var iconClasses = $('.selector').editable('option', 'iconClasses');

// Setter.
$('.selector').editable('option', 'iconClasses', ['fa-', 'glyphicons-']);

icons

Type: Object
Default: {}

Customize the button icons from the editor toolbar. The option is an Object containing the button command as key and an Object describing the icon as value.
E.g.: {command1: {type: '', value: ''}, command2: {type: '', value: ''}}.
type can be one of the following options: font (Font Awesome Icon), txt (Simple text) or img (Image);
value has to be a Font Awesome class fa fa-*, a character for txt or an URL to for img.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the icons option specified:

$('.selector').editable({
  icons: {
    bold: {
      type: 'font',
      value: 'fa fa-bold'
    }
  }
});

Get or set the icons option, after initialization:

// Getter.
var icons = $('.selector').editable('option', 'icons');

// Setter cannot be used after initialization.

imageButtons

Type: Array
Default: *

The list of buttons that appear in the image editor popup. The default list is: ['display', 'align', 'linkImage', 'replaceImage', 'removeImage'].

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the imageButtons option specified:

$('.selector').editable({
  imageButtons: ['linkImage', 'replaceImage', 'removeImage']
});

Get or set the imageButtons option, after initialization:

// Getter.
var imageButtons = $('.selector').editable('option', 'imageButtons');

// Setter cannot be used after initialization.

imageDeleteConfirmation

Type: Boolean
Default: true

Ask for confirmation before removing the image from the editor.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the imageDeleteConfirmation option specified:

$('.selector').editable({
  imageDeleteConfirmation: false
});

Get or set the imageDeleteConfirmation option, after initialization:

// Getter.
var imageDeleteConfirmation = $('.selector').editable('option', 'imageDeleteConfirmation');

// Setter.
$('.selector').editable('option', 'imageDeleteConfirmation', false);

imageDeleteParams

Type: Object
Default: {}

Additional params passed to the image delete request.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the imageDeleteParams option specified:

$('.selector').editable({
  imageDeleteParams: {user_id: 4219762}
});

Get or set the imageDeleteParams option, after initialization:

// Getter.
var imageDeleteParams = $('.selector').editable('option', 'imageDeleteParams');

// Setter.
$('.selector').editable('option', 'imageDeleteParams', {user_id: 4219762});

imageDeleteURL

Type: String
Default: ''

The URL where the POST request is done to delete the image. The request will contain the image source as src parameter.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the imageDeleteURL option specified:

$('.selector').editable({
  imageDeleteURL: 'http://example.com/delete_image'
});

Get or set the imageDeleteURL option, after initialization:

// Getter.
var imageDeleteURL = $('.selector').editable('option', 'imageDeleteURL');

// Setter.
$('.selector').editable('option', 'imageDeleteURL', 'http://example.com/delete_image');

Type: Boolean
Default: true

Allows images to be upload using an URL when set to true.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the imageLink option specified:

$('.selector').editable({
  imageLink: false
});

Get or set the imageLink option, after initialization:

// Getter.
var imageLink = $('.selector').editable('option', 'imageLink');

// Setter cannot be used after initialization.

imageMove

Type: Boolean
Default: true

Allows changing the position of the images by dragging them.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the imageMove option specified:

$('.selector').editable({
  imageMove: false
});

Get or set the imageMove option, after initialization:

// Getter.
var imageMove = $('.selector').editable('option', 'imageMove');

// Setter.
$('.selector').editable('option', 'imageMove', false);

imageTitle

Type: Boolean
Default: true

Enables editing the image title.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the imageTitle option specified:

$('.selector').editable({
  imageTitle: false
});

Get or set the imageTitle option, after initialization:

// Getter.
var imageTitle = $('.selector').editable('option', 'imageTitle');

// Setter.
$('.selector').editable('option', 'imageTitle', false);

imageResize

Type: Boolean
Default: false

Type: Boolean
Default: false

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the imageResize option specified:

$('.selector').editable({
  imageResize: true
});

Get or set the imageResize option, after initialization:

// Getter.
var imageResize = $('.selector').editable('option', 'imageResize');

// Setter cannot be used after initialization.

imageUpload

Type: Boolean
Default: true

Enables or disables image upload.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the imageUpload option specified:

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

Get or set the imageUpload option, after initialization:

// Getter.
var imageUpload = $('.selector').editable('option', 'imageUpload');

// Setter.
$('.selector').editable('option', 'imageUpload', false);

imageUploadParam

Type: String
Default: 'file'

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

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the imageUploadParam option specified:

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

Get or set the imageUploadParam option, after initialization:

// Getter.
var imageUploadParam = $('.selector').editable('option', 'imageUploadParam');

// Setter.
$('.selector').editable('option', 'imageUploadParam', 'file_name');

imageUploadParams

Type: Object
Default: {}

Additional params passed to the upload request.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the imageUploadParams option specified:

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

Get or set the imageUploadParams option, after initialization:

// Getter.
var imageUploadParams = $('.selector').editable('option', 'imageUploadParams');

// Setter.
$('.selector').editable('option', 'imageUploadParams', {
    id: 'my_editor'
  });

imageUploadToS3

Type: Object
Default: {}

Set the options for image upload to S3.
Please notice that all the fields from the example below are required. Also make sure that you have enabled CORS on Amazon.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the imageUploadToS3 option specified:

$('.selector').editable({
  imageUploadToS3: {
    bucket: 'editor',
    region: 's3',
    keyStart: 'uploads/',
    callback: function (url, key) {
      // The URL and Key returned from Amazon.
      console.log (url);
      console.log (key);
    },
    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.
    }
  }
});

Get or set the imageUploadToS3 option, after initialization:

// Getter.
var imageUploadToS3 = $('.selector').editable('option', 'imageUploadToS3');

// Setter cannot be used after initialization.

imageUploadURL

Type: String
Default: 'http://i.froala.com/upload'

The URL where the images uploaded by the user are saved. When an image is uploaded, the editor sends the file to the server through a HTTP request. The server should process the data from the file parameter of the request and return a JSON object containing a link field with the link to the uploaded image. More details can be found in the Image Upload concept article.
E.g. {link: 'path/to/image.jpg'}.

Note 1: By default, the images are stored on our servers, but if you want to have full control over them, you should consider implementing the upload on your server. The images stored on our servers, may be deleted at any time without any notice.
Note 2: If the domain where the image is saved is not the same with the one where the editor is running, you may need to enable crossDomain option and make specific customizations on the server. For more information please refer to Cross-origin resource sharing.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the imageUploadURL option specified:

$('.selector').editable({
  imageUploadURL: '/upload_image'
});

Get or set the imageUploadURL option, after initialization:

// Getter.
var imageUploadURL = $('.selector').editable('option', 'imageUploadURL');

// Setter.
$('.selector').editable('option', 'imageUploadURL', '/upload_image');

imagesLoadParams

Type: Object
Default: {}

Additional params passed to the images load request from the media manager.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the imagesLoadParams option specified:

$('.selector').editable({
  imagesLoadParams: {user_id: 4219762}
});

Get or set the imagesLoadParams option, after initialization:

// Getter.
var imagesLoadParams = $('.selector').editable('option', 'imagesLoadParams');

// Setter.
$('.selector').editable('option', 'imagesLoadParams', {user_id: 4219762});

imagesLoadURL

Type: String
Default: 'http://i.froala.com/images'

The URL where the GET request is done in order to load the images that appear in the media manager. The response should be an array with the image urls similar to ['http://example.com/image1.png', 'http://example.com/path/my_image.jpg'].

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the imagesLoadURL option specified:

$('.selector').editable({
  imagesLoadURL: 'http://example.com/load_images'
});

Get or set the imagesLoadURL option, after initialization:

// Getter.
var imagesLoadURL = $('.selector').editable('option', 'imagesLoadURL');

// Setter.
$('.selector').editable('option', 'imagesLoadURL', 'http://example.com/load_images');

inlineMode

Type: Boolean
Default: true

Enable or disable inline mode.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the inlineMode option specified:

$('.selector').editable({
  inlineMode: true
});

Get or set the inlineMode option, after initialization:

// Getter.
var inlineMode = $('.selector').editable('option', 'inlineMode');

// Setter cannot be used after initialization.

inlineStyles

Type: Object
Default: {}

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.
Note: This option requires the inline_styles.min.js plugin.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the inlineStyles option specified:

$('.selector').editable({
  inlineStyles: {
    'Big Red': 'font-size: 20px; color: red;',
    'Small Blue': 'font-size: 14px; color: blue;'
  }
});

Get or set the inlineStyles option, after initialization:

// Getter.
var inlineStyles = $('.selector').editable('option', 'inlineStyles');

// Setter.
$('.selector').editable('option', 'inlineStyles', {
    'Big Red': 'font-size: 20px; color: red;',
    'Small Blue': 'font-size: 14px; color: blue;'
  });

initOnClick

Type: Boolean
Default: false

Initializes only the minimum required events at beginning and the rest of them when the user clicks inside the editable area. This is very useful when there are many editors on the same page because it reduces the page load time.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the initOnClick option specified:

$('.selector').editable({
  initOnClick: true
});

Get or set the initOnClick option, after initialization:

// Getter.
var initOnClick = $('.selector').editable('option', 'initOnClick');

// Setter cannot be used after initialization.

language

Type: String
Default: 'en_us'

Select the language to be used in the editor interface.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the language option specified:

$('.selector').editable({
  language: 'es'
});

Get or set the language option, after initialization:

// Getter.
var language = $('.selector').editable('option', 'language');

// Setter.
$('.selector').editable('option', 'language', 'es');

linkAttributes

Type: Object
Default: {}

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

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the linkAttributes option specified:

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

Get or set the linkAttributes option, after initialization:

// Getter.
var linkAttributes = $('.selector').editable('option', 'linkAttributes');

// Setter.
$('.selector').editable('option', 'linkAttributes', {
  title: 'Title'
});

linkAutoPrefix

Type: String
Default: ''

Set the default URL prefix when no one is set.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the linkAutoPrefix option specified:

$('.selector').editable({
  linkAutoPrefix: 'http://'
});

Get or set the linkAutoPrefix option, after initialization:

// Getter.
var linkAutoPrefix = $('.selector').editable('option', 'linkAutoPrefix');

// Setter.
$('.selector').editable('option', 'linkAutoPrefix', 'http://');

linkClasses

Type: Object
Default: {}

Set a custom class for the selected link. The classes should be defined in CSS, otherwise no effect changes be visible on the link appearance.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the linkClasses option specified:

$('.selector').editable({
  linkClasses: {
    class1: 'My Class',
    class2: 'Other Class'
  }
});

Get or set the linkClasses option, after initialization:

// Getter.
var linkClasses = $('.selector').editable('option', 'linkClasses');

// Setter.
$('.selector').editable('option', 'linkClasses', {
    class1: 'My Class',
    class2: 'Other Class'
  });

Type: Array
Default: []

Set a predefined list of links to select from when inserting a link.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the linkList option specified:

$('.selector').editable({
  linkList: [
    {
      body: 'Google',
      title: 'An awesome search engine',
      href: 'http://google.com',
      nofollow: true,
      blank: true
    },
    {
      body: 'Froala',
      title: 'A website builder for everyone',
      href: 'https://froala.com',
      nofollow: false,
      blank: false
    }
  ]
});

Get or set the linkList option, after initialization:

// Getter.
var linkList = $('.selector').editable('option', 'linkList');

// Setter cannot be used after initialization.

linkText

Type: Boolean
Default: false

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

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the linkText option specified:

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

Get or set the linkText option, after initialization:

// Getter.
var linkText = $('.selector').editable('option', 'linkText');

// Setter cannot be used after initialization.

maxCharacters

Type: Number
Default: -1

The maximum number of characters allowed to be inserted into the editor.
Note: This option requires the char_counter.min.js plugin.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the maxCharacters option specified:

$('.selector').editable({
  maxCharacters: 140
});

Get or set the maxCharacters option, after initialization:

// Getter.
var maxCharacters = $('.selector').editable('option', 'maxCharacters');

// Setter.
$('.selector').editable('option', 'maxCharacters', 140);

maxFileSize

Type: Number
Default: 1024 * 1024 * 10

The maximum file size allowed on upload in bytes. The default value is 10MB.
Note: Although this makes an additional check before uploading the file, it is highly recommended to check file size on your server too.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the maxFileSize option specified:

$('.selector').editable({
  maxFileSize: 1024 * 1024 * 3
});

Get or set the maxFileSize option, after initialization:

// Getter.
var maxFileSize = $('.selector').editable('option', 'maxFileSize');

// Setter.
$('.selector').editable('option', 'maxFileSize', 1024 * 1024 * 3);

maxHeight

Type: String
Default: 'auto'

Set a maximum height for the editor editing box.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the maxHeight option specified:

$('.selector').editable({
  maxHeight: '500'
});

Get or set the maxHeight option, after initialization:

// Getter.
var maxHeight = $('.selector').editable('option', 'maxHeight');

// Setter.
$('.selector').editable('option', 'maxHeight', '500');

maxImageSize

Type: Number
Default: 1024 * 1024 * 10

The maximum image size allowed on upload in bytes. The default value is 10MB.
Note: Although this makes an additional check before uploading the image, it is highly recommended to check image size on your server too.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the maxImageSize option specified:

$('.selector').editable({
  maxImageSize: 1024 * 1024 * 3
});

Get or set the maxImageSize option, after initialization:

// Getter.
var maxImageSize = $('.selector').editable('option', 'maxImageSize');

// Setter.
$('.selector').editable('option', 'maxImageSize', 1024 * 1024 * 3);

mediaManager

Type: Boolean
Default: true

Enables or disables the media manager for images.
Note: By default, the media manager is showing a list of images hosted on our server and it just simulates the delete behavior. In order to show your custom images and actually remove them on delete, the imagesLoadURL and imageDeleteURL have to be specified and you have to deal with the server side coding.
Note: This option requires the media_manager.min.js plugin.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the mediaManager option specified:

$('.selector').editable({
  mediaManager: false
});

Get or set the mediaManager option, after initialization:

// Getter.
var mediaManager = $('.selector').editable('option', 'mediaManager');

// Setter.
$('.selector').editable('option', 'mediaManager', false);

minHeight

Type: String
Default: 'auto'

Set a minimum height for the editor editing box.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the minHeight option specified:

$('.selector').editable({
  minHeight: '200'
});

Get or set the minHeight option, after initialization:

// Getter.
var minHeight = $('.selector').editable('option', 'minHeight');

// Setter.
$('.selector').editable('option', 'minHeight', '200');

multiLine

Type: Boolean
Default: true

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

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the multiLine option specified:

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

Get or set the multiLine option, after initialization:

// Getter.
var multiLine = $('.selector').editable('option', 'multiLine');

// Setter.
$('.selector').editable('option', 'multiLine', false);

noFollow

Type: Boolean
Default: true

Enables or disables adding the rel="nofollow" attribute on all links.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the noFollow option specified:

$('.selector').editable({
  noFollow: false
});

Get or set the noFollow option, after initialization:

// Getter.
var noFollow = $('.selector').editable('option', 'noFollow');

// Setter.
$('.selector').editable('option', 'noFollow', false);

paragraphy

Type: Boolean
Default: true

Use paragraphs for new line.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the paragraphy option specified:

$('.selector').editable({
  paragraphy: false
});

Get or set the paragraphy option, after initialization:

// Getter.
var paragraphy = $('.selector').editable('option', 'paragraphy');

// Setter.
$('.selector').editable('option', 'paragraphy', false);

pasteImage

Type: Boolean
Default: true

Enables pasting image from clipboard.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the pasteImage option specified:

$('.selector').editable({
  pasteImage: false
});

Get or set the pasteImage option, after initialization:

// Getter.
var pasteImage = $('.selector').editable('option', 'pasteImage');

// Setter.
$('.selector').editable('option', 'pasteImage', false);

pastedImagesUploadRequestType

Type: String
Default: 'POST'

The HTTP request type for the pastedImagesUploadURL option.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the pastedImagesUploadRequestType option specified:

$('.selector').editable({
  pastedImagesUploadRequestType: 'PUT'
});

Get or set the pastedImagesUploadRequestType option, after initialization:

// Getter.
var pastedImagesUploadRequestType = $('.selector').editable('option', 'pastedImagesUploadRequestType');

// Setter.
$('.selector').editable('option', 'pastedImagesUploadRequestType', 'PUT');

pastedImagesUploadURL

Type: String
Default: 'http://i.froala.com/upload_base64'

Images that are pasted from clipboard are inserted in BASE64 format. This option allows to send the BASE64 data to the specified URL in order to save it to the database and return the new image URL. When such an image is inserted, the data is sent through a HTTP request to the server. The server should process the data from the image parameter of the request and return a JSON object containing a link field with the link to the uploaded image.
E.g. {link: 'path/to/image.jpg'}.
Note: 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.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the pastedImagesUploadURL option specified:

$('.selector').editable({
  pastedImagesUploadURL: '/upload_pasted_image'
});

Get or set the pastedImagesUploadURL option, after initialization:

// Getter.
var pastedImagesUploadURL = $('.selector').editable('option', 'pastedImagesUploadURL');

// Setter.
$('.selector').editable('option', 'pastedImagesUploadURL', '/upload_pasted_image');

placeholder

Type: String
Default: 'Type Something'

The placeholder used when the editor body is empty.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the placeholder option specified:

$('.selector').editable({
  placeholder: 'Placeholder'
});

Get or set the placeholder option, after initialization:

// Getter.
var placeholder = $('.selector').editable('option', 'placeholder');

// Setter.
$('.selector').editable('option', 'placeholder', 'Placeholder');

plainPaste

Type: Boolean
Default: false

Removes text formatting when pasting content into the editor.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the plainPaste option specified:

$('.selector').editable({
  plainPaste: true
});

Get or set the plainPaste option, after initialization:

// Getter.
var plainPaste = $('.selector').editable('option', 'plainPaste');

// Setter.
$('.selector').editable('option', 'plainPaste', true);

preloaderSrc

Type: String
Default: ''

The path to a gif image to be displayed while loading the images from the server in the media manager. If no option is specified there will appear "Loading..." text.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the preloaderSrc option specified:

$('.selector').editable({
  preloaderSrc: '/images/loader.gif'
});

Get or set the preloaderSrc option, after initialization:

// Getter.
var preloaderSrc = $('.selector').editable('option', 'preloaderSrc');

// Setter.
$('.selector').editable('option', 'preloaderSrc', '/images/loader.gif');

saveParam

Type: String
Default: 'body'

The name of the param which contains the editor content on the save request.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the saveParam option specified:

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

Get or set the saveParam option, after initialization:

// Getter.
var saveParam = $('.selector').editable('option', 'saveParam');

// Setter.
$('.selector').editable('option', 'saveParam', 'content');

saveParams

Type: Object
Default: {}

Additional params passed to the save request.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the saveParams option specified:

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

Get or set the saveParams option, after initialization:

// Getter.
var saveParams = $('.selector').editable('option', 'saveParams');

// Setter.
$('.selector').editable('option', 'saveParams', {
  id: 'my_editor'
});

saveRequestType

Type: String
Default: 'POST'

The HTTP save request type.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the saveRequestType option specified:

$('.selector').editable({
  saveRequestType: 'PUT'
});

Get or set the saveRequestType option, after initialization:

// Getter.
var saveRequestType = $('.selector').editable('option', 'saveRequestType');

// Setter.
$('.selector').editable('option', 'saveRequestType', 'PUT');

saveURL

Type: String
Default: ''

The URL where the save request is being made. The editor will initialize a POST request to the specified URL passing the editor content in the body parameter of the HTTP request. To pass additional parameters in the request, the saveParams option can be used.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the saveURL option specified:

$('.selector').editable({
  saveURL: 'http://example.com/save'
});

Get or set the saveURL option, after initialization:

// Getter.
var saveURL = $('.selector').editable('option', 'saveURL');

// Setter.
$('.selector').editable('option', 'saveURL', 'http://example.com/save');

scrollableContainer

Type: String
Default: 'body'

Sets the container in which the editor popups are added.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the scrollableContainer option specified:

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

Get or set the scrollableContainer option, after initialization:

// Getter.
var scrollableContainer = $('.selector').editable('option', 'scrollableContainer');

// Setter.
$('.selector').editable('option', 'scrollableContainer', '#my_scrollable_container');

selfClosingTags

Type: Array
Default: *

A list of tags that are self closing and do not require a separate tag to close them.
The default value is: ['br', 'input', 'img', 'hr', 'param', '!--', 'source', 'embed'].

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the selfClosingTags option specified:

$('.selector').editable({
  selfClosingTags: ['br', 'button', 'input', 'img']
});

Get or set the selfClosingTags option, after initialization:

// Getter.
var selfClosingTags = $('.selector').editable('option', 'selfClosingTags');

// Setter.
$('.selector').editable('option', 'selfClosingTags', ['br', 'button', 'input', 'img']);

shortcuts

Type: Boolean
Default: true

Enable or disable shortcuts.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the shortcuts option specified:

$('.selector').editable({
  shortcuts: false
});

Get or set the shortcuts option, after initialization:

// Getter.
var shortcuts = $('.selector').editable('option', 'shortcuts');

// Setter.
$('.selector').editable('option', 'shortcuts', false);

shortcutsAvailable

Type: Array
Default: *

Granular control for enabling or disabling specific shortcuts.
Default: ['show', 'bold', 'italic', 'underline', 'createLink', 'insertImage', 'selectAll', 'indent', 'outdent', 'html', 'formatBlock n', 'formatBlock h1', 'formatBlock h2', 'formatBlock h3', 'formatBlock h4', 'formatBlock h5', 'formatBlock h6', 'formatBlock blockquote', 'formatBlock pre', 'strikeThrough']

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the shortcutsAvailable option specified:

$('.selector').editable({
  shortcutsAvailable: ['bold', 'italic']
});

Get or set the shortcutsAvailable option, after initialization:

// Getter.
var shortcutsAvailable = $('.selector').editable('option', 'shortcutsAvailable');

// Setter.
$('.selector').editable('option', 'shortcutsAvailable', ['bold', 'italic']);

showNextToCursor

Type: Boolean
Default: false

Shows the inline popup right next to cursor in inlineMode when text is selected.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the showNextToCursor option specified:

$('.selector').editable({
  showNextToCursor: true
});

Get or set the showNextToCursor option, after initialization:

// Getter.
var showNextToCursor = $('.selector').editable('option', 'showNextToCursor');

// Setter.
$('.selector').editable('option', 'showNextToCursor', true);

simpleAmpersand

Type: Boolean
Default: false

Allows using simple ampersands (&) instead of the relative HTML entity (&). This is not recommended by the W3C XHTML specifications, so this option should remain disabled whenever possible.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the simpleAmpersand option specified:

$('.selector').editable({
  simpleAmpersand: true
});

Get or set the simpleAmpersand option, after initialization:

// Getter.
var simpleAmpersand = $('.selector').editable('option', 'simpleAmpersand');

// Setter.
$('.selector').editable('option', 'simpleAmpersand', true);

spellcheck

Type: Boolean
Default: false

Enables browser spellcheck for the text inside the editing box.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the spellcheck option specified:

$('.selector').editable({
  spellcheck: true
});

Get or set the spellcheck option, after initialization:

// Getter.
var spellcheck = $('.selector').editable('option', 'spellcheck');

// Setter.
$('.selector').editable('option', 'spellcheck', true);

tabSpaces

Type: Boolean
Default: true

When TAB key is hit, the editor will add 4 spaces.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the tabSpaces option specified:

$('.selector').editable({
  tabSpaces: false
});

Get or set the tabSpaces option, after initialization:

// Getter.
var tabSpaces = $('.selector').editable('option', 'tabSpaces');

// Setter.
$('.selector').editable('option', 'tabSpaces', false);

textNearImage

Type: Boolean
Default: true

Allows or not having text near a 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 EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the textNearImage option specified:

$('.selector').editable({
  textNearImage: false
});

Get or set the textNearImage option, after initialization:

// Getter.
var textNearImage = $('.selector').editable('option', 'textNearImage');

// Setter.
$('.selector').editable('option', 'textNearImage', false);

textNearVideo

Type: Boolean
Default: true

Allows or not having text near a video when it is aligned to the left or to the right.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the textNearVideo option specified:

$('.selector').editable({
  textNearVideo: false
});

Get or set the textNearVideo option, after initialization:

// Getter.
var textNearVideo = $('.selector').editable('option', 'textNearVideo');

// Setter.
$('.selector').editable('option', 'textNearVideo', false);

theme

Type: String
Default: ''

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 EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the theme option specified:

$('.selector').editable({
  theme: 'dark'
});

Get or set the theme option, after initialization:

// Getter.
var theme = $('.selector').editable('option', 'theme');

// Setter.
$('.selector').editable('option', 'theme', 'dark');

toolbarFixed

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 EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the toolbarFixed option specified:

$('.selector').editable({
  toolbarFixed: false
});

Get or set the toolbarFixed option, after initialization:

// Getter.
var toolbarFixed = $('.selector').editable('option', 'toolbarFixed');

// Setter.
$('.selector').editable('option', 'toolbarFixed', false);

trackScroll

Type: Boolean
Default: false

When enabled, the inline editor is not hidden when the page is scrolled using the scrollbar.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the trackScroll option specified:

$('.selector').editable({
  trackScroll: true
});

Get or set the trackScroll option, after initialization:

// Getter.
var trackScroll = $('.selector').editable('option', 'trackScroll');

// Setter.
$('.selector').editable('option', 'trackScroll', true);

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 EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the typingTimer option specified:

$('.selector').editable({
  typingTimer: 750
});

Get or set the typingTimer option, after initialization:

// Getter.
var typingTimer = $('.selector').editable('option', 'typingTimer');

// Setter.
$('.selector').editable('option', 'typingTimer', 750);

unlinkButton

Type: Boolean
Default: true

Shows "Unlink" button in the link edit popup when the option is set to true

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the unlinkButton option specified:

$('.selector').editable({
  unlinkButton: false
});

Initialize the Froala WYSIWYG HTML Editor with the unlinkButton option specified:

Get or set the unlinkButton option, after initialization:

// Getter.
var unlinkButton = $('.selector').editable('option', 'unlinkButton');

// Setter.
$('.selector').editable('option', 'unlinkButton', false);

unsupportedAgents

Type: RegEx
Default: /Opera Mini/i

A list of user agents that the editor is not initialized on.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the unsupportedAgents option specified:

$('.selector').editable({
  unsupportedAgents: /Mozilla|Opera Mini/i
});

Get or set the unsupportedAgents option, after initialization:

// Getter.
var unsupportedAgents = $('.selector').editable('option', 'unsupportedAgents');

// Setter.
$('.selector').editable('option', 'unsupportedAgents', /Mozilla|Opera Mini/i);

useClasses

Type: Boolean
Default: true

When this options is disabled the editor output for images does not have classes anymore, and the style is added inline.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the useClasses option specified:

$('.selector').editable({
  useClasses: false
});

Get or set the useClasses option, after initialization:

// Getter.
var useClasses = $('.selector').editable('option', 'useClasses');

// Setter.
$('.selector').editable('option', 'useClasses', false);

useFileName

Type: Boolean
Default: true

Enables using the filename instead of the selected text when a link is inserted.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the useFileName option specified:

$('.selector').editable({
  useFileName: false
});

Get or set the useFileName option, after initialization:

// Getter.
var useFileName = $('.selector').editable('option', 'useFileName');

// Setter.
$('.selector').editable('option', 'useFileName', false);

useFrTag

Type: Boolean
Default: false

Adds fr-tag to the block tags from the edited HTML. This option is useful when displaying the edited content: Display Edited Content.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the useFrTag option specified:

$('.selector').editable({
  useFrTag: true
});

Get or set the useFrTag option, after initialization:

// Getter.
var useFrTag = $('.selector').editable('option', 'useFrTag');

// Setter.
$('.selector').editable('option', 'useFrTag', true);

videoAllowedAttrs

Type: Array
Default: *

A list of attributes allowed for tags when inserting videos as embedded code.
Default: ['src', 'width', 'height', 'frameborder', 'allowfullscreen', 'webkitallowfullscreen', 'mozallowfullscreen', 'href', 'target', 'id', 'controls', 'value', 'name']

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the videoAllowedAttrs option specified:

$('.selector').editable({
  videoAllowedAttrs: ['src', 'width', 'height']
});

Get or set the videoAllowedAttrs option, after initialization:

// Getter.
var videoAllowedAttrs = $('.selector').editable('option', 'videoAllowedAttrs');

// Setter.
$('.selector').editable('option', 'videoAllowedAttrs', ['src', 'width', 'height']);

videoAllowedTags

Type: Array
Default: *

A list of tags allowed to be used when inserting videos as embedded code.
Default: ['iframe', 'object', 'param', 'video', 'source', 'embed']

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the videoAllowedTags option specified:

$('.selector').editable({
  videoAllowedTags: ['iframe', 'video']
});

Get or set the videoAllowedTags option, after initialization:

// Getter.
var videoAllowedTags = $('.selector').editable('option', 'videoAllowedTags');

// Setter.
$('.selector').editable('option', 'videoAllowedTags', ['iframe', 'video']);

videoButtons

Type: Boolean
Default: *

The video buttons that appear when a video is selected. The default value is ['floatVideoLeft', 'floatVideoNone', 'floatVideoRight', 'removeVideo'].

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the videoButtons option specified:

$('.selector').editable({
  videoButtons: ['floatVideoLeft', 'floatVideoNone', 'floatVideoRight']
});

Get or set the videoButtons option, after initialization:

// Getter.
var videoButtons = $('.selector').editable('option', 'videoButtons');

// Setter.
$('.selector').editable('option', 'videoButtons', ['floatVideoLeft', 'floatVideoNone', 'floatVideoRight']);

width

Type: String
Default: 'auto'

Sets the width of the editing box.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the width option specified:

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

Get or set the width option, after initialization:

// Getter.
var width = $('.selector').editable('option', 'width');

// Setter.
$('.selector').editable('option', 'width', '800');

withCredentials

Type: Boolean
Default: false

Enables invocation with Cookies in the XMLHttpRequest.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the withCredentials option specified:

$('.selector').editable({
  withCredentials: true
});

Get or set the withCredentials option, after initialization:

// Getter.
var withCredentials = $('.selector').editable('option', 'withCredentials');

// Setter.
$('.selector').editable('option', 'withCredentials', true);

zIndex

Type: Number
Default: 2000

The zIndex to set on the editor toolbars and popups.

CODE EXAMPLES

Initialize the Froala WYSIWYG HTML Editor with the zIndex option specified:

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

Get or set the zIndex option, after initialization:

// Getter.
var zIndex = $('.selector').editable('option', 'zIndex');

// Setter.
$('.selector').editable('option', 'zIndex', 2501);