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