20% Off All Froala Plans
Days
Hours
Minutes
Seconds
x

Froala Editor v4.3 is hereLEARN MORE

Pricing
Get Started
Skip to content
Star

Methods

align.apply button.buildList button.bulkRefresh charCounter.count clean.html codeView.get codeView.isActive codeView.toggle colors.background colors.text commands.bold commands.clearFormatting commands.indent commands.insertHR commands.italic commands.outdent commands.redo commands.show commands.strikeThrough commands.subscript commands.superscript commands.underline commands.undo core.getXHR core.injectStyle core.isEmpty cursor.backspace cursor.del cursor.enter destroy edit.off edit.on emoticons.insert events.blurActive events.chainTrigger events.disableBlur events.enableBlur events.focus events.on events.trigger file.insert file.upload fontFamily.apply fontSize.apply format.apply format.applyStyle format.is format.remove format.removeStyle format.toggle fullscreen.isActive fullscreen.toggle helpers.isMobile helpers.sanitizeURL html.cleanEmptyTags html.get html.getSelected html.insert html.set html.unwrap html.wrap image.align image.applyStyle image.display image.get image.insert image.remove image.setAlt image.setSize image.upload imageManager.hide imageManager.show inlineStyle.apply keys.ctrlKey keys.isCharacter language.translate link.allSelected link.applyStyle link.get link.insert link.remove lists.format markers.insert markers.insertAtPoint markers.place markers.remove node.blockParent node.contents node.deepestParent node.isBlock node.isElement node.isEmpty node.isList node.isVoid paragraphFormat.apply paragraphStyle.apply placeholder.hide placeholder.isVisible placeholder.refresh placeholder.show popups.areVisible popups.create popups.get popups.hide popups.hideAll popups.isVisible popups.onHide popups.onRefresh popups.refresh popups.setContainer popups.show position.getBoundingRect position.refresh quote.apply save.force save.save selection.blocks selection.clear selection.element selection.endElement selection.get selection.inEditor selection.info selection.isCollapsed selection.isFull selection.ranges selection.restore selection.save selection.setAfter selection.setAtEnd selection.setAtStart selection.setBefore selection.text size.refresh size.syncIframe snapshot.equal snapshot.get snapshot.restore table.insert toolbar.disable toolbar.enable toolbar.hide toolbar.show toolbar.showInline tooltip.bind tooltip.hide tooltip.to undo.canDo undo.canRedo undo.reset undo.saveStep video.align video.display video.get video.insert video.remove video.setSize

Align

align.apply

align.apply (value)

Returns: Object

Set the alignment of the selected paragraphs.

  • value

    Type: String

    The alignment value: left, right, center or justify.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('align.apply', 'left');

Button

button.bulkRefresh button.buildList

button.bulkRefresh ()

Returns: Object

Refreshes the state of the buttons in the toolbar.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('button.bulkRefresh');

button.buildList (buttons)

Returns: String

Builds a list of commands to a button list represented as a HTML string.

  • buttons

    Type: Array

    An array of commands to build into buttons..

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('button.buildList', ['bold', 'italic', 'insertImage', '|', 'undo', 'redo']);

Char Counter

charCounter.count

charCounter.count ()

Returns: Integer

Returns the number of characters in the editor.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('charCounter.count');

Clean

clean.html

clean.html (dirty_html, [denied_tags], [denied_attrs], [full_page])

Returns: String

Cleans dirty HTML to clean HTML ready to be inserted into the editor.

  • dirty_html

    Type: String

    The HTML to be cleaned.

  • denied_tags

    Type: Array

    An array with tags to be removed. It has priority over htmlAllowedTags.

  • denied_attrs

    Type: Array

    An array with attributes to be removed. It has priority over htmlAllowedAttrs.

  • full_page

    Type: Boolean

    Allow or disallow tags outside of the body element.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('clean.html', '<p dummy="test">foo</p><p>bar</p>', ['h1', 'h2', 'h3'], ['width', 'height', 'style'], false);

Code View

codeView.isActive codeView.get codeView.toggle

codeView.isActive ()

Returns: Boolean

Find if code view mode is active.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('codeView.isActive');

codeView.get ()

Returns: String

Get the HTML edited inside the code view mode.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('codeView.get');

codeView.toggle ()

Returns: Object

Toggle between the code and text view.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('codeView.toggle');

Colors

colors.background colors.text

colors.background (value)

Returns: Object

Set the background color of the selected text.

  • value

    Type: String

    The color to be set.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('colors.background', '#001122');

colors.text (value)

Returns: Object

Set the text color of the selected text.

  • value

    Type: String

    The color to be set.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('colors.text', '#001122');

Commands

commands.bold commands.clearFormatting commands.indent commands.insertHR commands.italic commands.outdent commands.redo commands.show commands.strikeThrough commands.subscript commands.superscript commands.underline commands.undo

commands.bold ()

Returns: Object

Format the selected text as bold.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('commands.bold');

commands.clearFormatting ()

Returns: Object

Clean any formatting on the selected text.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('commands.clearFormatting');

commands.indent ()

Returns: Object

Indent more the selected paragraphs.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('commands.indent');

commands.insertHR ()

Returns: Object

Insert a horizontal line at the cursor position.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('commands.insertHR');

commands.italic ()

Returns: Object

Format the selected text as italic.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('commands.italic');

commands.outdent ()

Returns: Object

Indent less the selected paragraphs.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('commands.outdent');

commands.redo ()

Returns: Object

Executes the redo action.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('commands.redo');

commands.show ()

Returns: Object

Show the inline toolbar at the cursor position.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('commands.show');

commands.strikeThrough ()

Returns: Object

Format the selected text as strike through.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('commands.strikeThrough');

commands.subscript ()

Returns: Object

Format the selected text as subscript.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('commands.subscript');

commands.superscript ()

Returns: Object

Format the selected text as superscript.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('commands.superscript');

commands.underline ()

Returns: Object

Format the selected text as underline.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('commands.underline');

commands.undo ()

Returns: Object

Executes the undo action.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('commands.undo');

Core

core.getXHR core.injectStyle core.isEmpty

core.getXHR (url, method)

Returns: XMLHttpRequest

Creates a XHR object with the specified parameters.

  • url

    Type: String

    A URL endpoint for an asynchronous request.

  • method

    Type: String

    The request method for the request.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('core.getXHR', 'http://google.com', 'GET');

core.injectStyle (style)

Returns: Object

CSS style to be injected inside the iframe of the editor when the iframe option is used.

  • style

    Type: String

    CSS style.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('core.injectStyle', body{background:red});

core.isEmpty ()

Returns: Boolean

Check if the editor is empty.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('core.isEmpty');

Cursor

cursor.backspace cursor.enter cursor.del

cursor.backspace ()

Returns: Object

Trigger backspace action at the cursor position.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('cursor.backspace');

cursor.enter (shift)

Returns: Object

Trigger enter action at the cursor position.

  • shift

    Type: Boolean

    The state of the SHIFT key.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('cursor.enter', true);

cursor.del ()

Returns: Object

Trigger delete action at the cursor position.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('cursor.del');

Edit

edit.off edit.on

edit.off ()

Returns: Object

Disable editor by removing the contenteditable attribute.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('edit.off');

edit.on ()

Returns: Object

Enable editor by adding the contenteditable attribute.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('edit.on');

Emoticons

emoticons.insert

emoticons.insert (emoticon, image)

Returns: Object

Insert an emoticon at the cursor position.

  • emoticon

    Type: String

    HTML for the emoticon to be inserted in the editor.

  • image

    Type: String

    Image to be inserted when the emoticonsUseImage option is enabled.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('emoticons.insert', "&#x1f600;", "https://cdnjs.cloudflare.com/ajax/libs/emojione/2.0.1/assets/svg/1f601.svg");

Events

events.blurActive events.chainTrigger events.disableBlur events.enableBlur events.focus events.on events.trigger

events.blurActive ()

Returns: Boolean

Check if blur events are active.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('events.blurActive');

events.chainTrigger (name, param, [force])

Returns: Object

Trigger events and chain the pass the returned value between the assigned events.

  • name

    Type: String

    Event name.

  • param

    Type: Object

    An object with data to pass to the event.

  • force

    Type: Boolean

    Trigger the event when the editor is disabled.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('events.chainTrigger', html.get, 'foo html', false);

events.disableBlur ()

Returns: Object

Disables the blur and focus events.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('events.disableBlur');

events.enableBlur ()

Returns: Object

Enables the blur and focus events.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('events.enableBlur');

events.focus ()

Returns: Object

Focus into the editor.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('events.focus');

events.on (name, callback, [first])

Returns: Object

Register an event.

  • name

    Type: String

    The name of the event.

  • callback

    Type: Function

    The callback for the event.

  • first

    Type: Boolean

    Trigger the callback before already registered callbacks.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('events.on', 'keydown', function (e) { console.log (e.which); }, false);

events.trigger (name, [args], [force])

Returns: Object

Triggers an event.

  • name

    Type: String

    The name of the event.

  • args

    Type: Array

    An array with arguments to pass over to the event handler.

  • force

    Type: Boolean

    Force the event to trigger even if the editor is disabled.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('events.trigger', 'keydown', [], true);

File

file.insert file.upload

Returns: Object

Insert the link to a file at the cursor position.

  • link

    Type: String

    The link the file.

  • text

    Type: String

    The text for the file.

  • response

    Type: Object

    The response from the server.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('file.insert', 'http://example.com/file.pdf', 'file.pdf', {link: 'http://example.com/file.pdf'});

file.upload (files)

Returns: Object

Upload the passed file to the server.

  • files

    Type: Array

    An array with the files to be uploaded to the server. It is usually the value of a file input.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('file.upload', []);

Font Family

fontFamily.apply

fontFamily.apply (value)

Returns: Object

Set the font family of the selected text.

  • value

    Type: String

    The value of the font family.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('fontFamily.apply', 'Arial,Helvetica');

Font Size

fontSize.apply

fontSize.apply (value)

Returns: Object

Set the font size of the selected text.

  • value

    Type: String

    The value of the font size.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('fontSize.apply', '12px');

Format

format.apply format.applyStyle format.is format.remove format.removeStyle format.toggle

format.apply (tagName, attrs)

Returns: Object

Apply format for the selection or at the insertion point.

  • tagName

    Type: String

    A string with the name of a DOM element.

  • attrs

    Type: Object

    A hash with attributes for tagName.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('format.apply', 'strong', { class: 'foo' });

format.applyStyle (prop, attrs)

Returns: Object

Apply style for the selection or at the insertion point.

  • prop

    Type: String

    A CSS property name.

  • attrs

    Type: Object

    CSS property value for prop parameter.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('format.applyStyle', 'font-size', '16px;');

format.is (tagName, attrs)

Returns: Boolean

Check format for the selection or at the insertion point.

  • tagName

    Type: String

    A string with the name of a DOM element.

  • attrs

    Type: Object

    A hash with attributes for tagName.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('format.is', 'strong', { class: 'foo' });

format.remove (tagName, attrs)

Returns: Object

Remove format for the selection or at the insertion point.

  • tagName

    Type: String

    A string with the name of a DOM element.

  • attrs

    Type: Object

    A hash with attributes for tagName.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('format.remove', 'strong', { class: 'foo' });

format.removeStyle (prop)

Returns: Object

Remove style for the selection or at the insertion point.

  • prop

    Type: String

    A CSS property name.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('format.removeStyle', 'font-size');

format.toggle (tagName, attrs)

Returns: Object

Toggle format for the selection or at the insertion point.

  • tagName

    Type: String

    A string with the name of a DOM element.

  • attrs

    Type: Object

    A hash with attributes for tagName.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('format.toggle', 'strong', { class: 'foo' });

Fullscreen

fullscreen.isActive fullscreen.toggle

fullscreen.isActive ()

Returns: Boolean

Check the fullscreen state.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('fullscreen.isActive');

fullscreen.toggle ()

Returns: Object

Toggle fullscreen mode.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('fullscreen.toggle');

General

destroy

destroy ()

Returns: Object

Removes the editable functionality completely. This will return the element back to its pre-init state.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('destroy');

Helpers

helpers.isMobile helpers.sanitizeURL

helpers.isMobile ()

Returns:

Check if the user is using a mobile device.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('helpers.isMobile');

helpers.sanitizeURL (url)

Returns: String

Sanitize the passed URL to make it safe to use.

  • url

    Type: String

    A URL string.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('helpers.sanitizeURL', 'https://froala.com');

HTML

html.cleanEmptyTags html.get html.getSelected html.unwrap html.wrap html.insert html.set

html.cleanEmptyTags ()

Returns: Object

Clean the empty tags inside the editor.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('html.cleanEmptyTags');

html.get ([keep_markers])

Returns: String

Returns the HTML inside the editor.

  • keep_markers

    Type: Boolean

    Keep the selection markers. The default value is false.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('html.get', true);

html.getSelected ()

Returns: String

Get the selected HTML.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('html.getSelected');

html.unwrap ()

Returns:

Unwrap text into paragraphs.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('html.unwrap');

html.wrap ([temp], [tables], [blockquote])

Returns:

Wrap text into paragraphs.

  • temp

    Type: Boolean

    Use a div with the class fr-temp to wrap text.

  • tables

    Type: Boolean

    Wrap text inside tables.

  • blockquote

    Type: Boolean

    Wrap text inside quotes.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('html.wrap', false, false, false);

html.insert (html, [clean])

Returns: Object

Insert HTML in the WYSIWYG editor at the cursor position or replaces the current selection with the passed HTML.

  • html

    Type: String

    A text containing the HTML to be inserted.

  • clean

    Type: Boolean

    Specifies if the HTML should be cleaned prior to insertion

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('html.insert', 'foo bar', true);

html.set (html)

Returns: Object

Sets the HTML inside the WYSIWYG editor.

  • html

    Type: String

    A text containing the new HTML to be set.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('html.set', '<p>My custom paragraph.</p>');

Image

image.align image.applyStyle image.display image.get image.insert image.remove image.setAlt image.setSize image.upload

image.align (value)

Returns: Object

Align the selected image.

  • value

    Type: String

    The alignment value. Possible values are: left, right, center and justify.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('image.align', 'left');

image.applyStyle (value)

Returns: Object

Style the selected image by adding a class to it.

  • value

    Type: String

    The class to be applied.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('image.applyStyle', 'rounded');

image.display (value)

Returns: jQuery object

Set the display type of the selected image.

  • value

    Type: String

    The display value. Possible values are: block and inline.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('image.display', 'inline');

image.get ()

Returns: Object

Get the current selected image.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('image.get');

Returns: Object

Inserts an image at the cursor position or replaces existing_image. By default, the inserted image will be aligned center. If there is any selected text, it will be replaced with the inserted image.

  • link

    Type: String

    URL to the image.

  • sanitize

    Type: Boolean

    Sanitize the image link.

  • data

    Type: Hash

    A hash containing the data attributes to be set for the image

  • $existing_image

    Type: jQuery object

    A jQuery object with the image to be replaced.

  • response

    Type: Object

    The response from the server.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('image.insert', '/uploads/13451.jpg', true, {'name': 'image_name', 'id': 'image_1'}, $('#my_image'), {link: 'http://example.com/file.pdf'});

image.remove ([$img])

Returns: Object

Removes the image from the editor.

  • $img

    Type: jQuery object

    The selected image or a jQuery object with the image to be deleted.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('image.remove', $('#my_image'));

image.setAlt (alt)

Returns: Object

Set the alternative text of the selected image.

  • alt

    Type: String

    The alternative text value.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('image.setAlt', 'My Image');

image.setSize (width, height)

Returns: Object

Set the width and height of the selected image.

  • width

    Type: String

    The width value.

  • height

    Type: String

    The height value

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('image.setSize', '300px', '300px');

image.upload (images)

Returns: Object

Upload the passed image to the server.

  • images

    Type: Array

    An array with the images to be uploaded to the server. It is usually the value of a file input.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('image.upload', []);

Image Manager

imageManager.hide imageManager.show

imageManager.hide ()

Returns: Object

Hides the image manager modal.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('imageManager.hide');

imageManager.show ()

Returns: Object

Shows the image manager modal.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('imageManager.show');

Inline Style

inlineStyle.apply

inlineStyle.apply (value)

Returns: Object

Apply the passed style to the current selected text or start typing the in the passed style if no text is selected.

  • value

    Type: String

    The value of the style to apply.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('inlineStyle.apply', 'Big Red');

Keys

keys.ctrlKey keys.isCharacter

keys.ctrlKey (e)

Returns: Boolean

Check if the CTRL key is pressed when the key event was triggered.

  • e

    Type: jQuery Event

    A jQuery event.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('keys.ctrlKey', e);

keys.isCharacter (key_code)

Returns: Boolean

Check if the passed key code will produce a character.

  • key_code

    Type: Integer

    Key code.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('keys.isCharacter', 40);

Language

language.translate

language.translate (str)

Returns: String

Translates the passed string using the language file passed to the editor. If no translation is found, the original string is returned.

  • str

    Type: String

    A string to be translated.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('language.translate', 'Bold');

Lists

lists.format

lists.format (tag_name)

Returns: Object

Format the selected paragraphs as list.

  • tag_name

    Type: String

    The type of the list to format. Possible values are: OL and UL.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('lists.format', 'OL');

Markers

markers.insert markers.insertAtPoint markers.place markers.remove

markers.insert ()

Returns: Object

Insert a marker at the cursor position.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('markers.insert');

markers.insertAtPoint (e)

Returns:

Place markers at the mouse position pointed by the jQuery event passed as parameter.

  • e

    Type: jQuery Event

    A jQuery Event that contains mouse position information.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('markers.insertAtPoint', e);

markers.place (range, [marker], [id])

Returns: Object

Inserts HTML marker at the beginning or at the end of the range.

  • range

    Type: Range object

    The range where to place markers.

  • marker

    Type: Boolean

    A boolean indicating if the marker has to be set at the beginning or the end of the range.

  • id

    Type: String

    The marker id.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('markers.place', range, true, '1');

markers.remove ()

Returns: Object

Clears the selection markers from HTML.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('markers.remove');

Node

node.blockParent node.contents node.deepestParent node.isBlock node.isElement node.isEmpty node.isList node.isVoid

node.blockParent (node)

Returns: DOM Object

Get the paragraph parent of the node passed as argument.

  • node

    Type: DOM Object

    A DOM object element.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('node.blockParent', node);

node.contents (node)

Returns: Array

Get the contents of the node passed as argument.

  • node

    Type: DOM Object

    A DOM object element.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('node.contents', node);

node.deepestParent (node, [until], [simple_enter])

Returns: DOM Object

Get the deepest parent until the editor element object or the node passed as parameter.

  • node

    Type: DOM Object

    A DOM object element.

  • until

    Type: DOM Object

    A DOM object element representing the node where to stop search.

  • simple_enter

    Type: Boolean

    A flag indicating if we should stop search at table cell / list item level instead of going all the way up to the editable element.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('node.deepestParent', node, until_node, false);

node.isBlock (node)

Returns: Boolean

Check if the node is a paragraph node.

  • node

    Type: DOM Object

    A DOM object element.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('node.isBlock', node);

node.isElement (node)

Returns: Boolean

Check if the node is the editable element of the editor.

  • node

    Type: DOM Object

    A DOM object element.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('node.isElement', node);

node.isEmpty (el, [ignore_markers])

Returns: Boolean

Check if the node is empty.

  • el

    Type: DOM Object

    A DOM object element.

  • ignore_markers

    Type: Boolean

    A flag indicating if to ignore markers.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('node.isEmpty', node, true);

node.isList (node)

Returns: Boolean

Check if the node is a list object.

  • node

    Type: DOM Object

    A DOM object element.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('node.isList', node);

node.isVoid (node)

Returns: Boolean

Check if the node is a self closing tag. The list of void elements can be found on W3C - HTML Syntax.

  • node

    Type: DOM Object

    A DOM object element.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('node.isVoid', node);

Paragraph Format

paragraphFormat.apply

paragraphFormat.apply (value)

Returns: Object

Change the format of the selected paragraphs.

  • value

    Type: String

    The format value to apply.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('paragraphFormat.apply', 'H2');

Paragraph Style

paragraphStyle.apply

paragraphStyle.apply (value)

Returns: Object

Style the selected paragraphs using CSS classes.

  • value

    Type: String

    The class to apply.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('paragraphStyle.apply', 'light');

Placeholder

placeholder.hide placeholder.isVisible placeholder.refresh placeholder.show

placeholder.hide ()

Returns:

Hide the placeholder.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('placeholder.hide');

placeholder.isVisible ()

Returns:

Check if placeholder is visible.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('placeholder.isVisible');

placeholder.refresh ()

Returns: Object

Checks if the placeholder should be visible and display or hide it.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('placeholder.refresh');

placeholder.show ()

Returns:

Show the placeholder.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('placeholder.show');

Popups

popups.areVisible popups.create popups.get popups.hide popups.hideAll popups.isVisible popups.onHide popups.onRefresh popups.refresh popups.setContainer popups.show

popups.areVisible ()

Returns:

Check if any popups are visible.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('popups.areVisible');

popups.create (id, template_vars)

Returns: jQuery Object

Create a popup for the editor.

  • id

    Type: String

    The ID of the popup.

  • template_vars

    Type: Object

    The values to use for the popup template.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('popups.create', 'froala.hello', {content: 'Hello world!'});

popups.get (id)

Returns: jQuery Object

Get the jQuery object that represents the popup.

  • id

    Type: String

    The ID of the popup.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('popups.get', 'froala.hello');

popups.hide (id)

Returns: Boolean

Hides the popup.

  • id

    Type: String

    The ID of the popup.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('popups.hide', 'froala.hello');

popups.hideAll ([except])

Returns: Object

Hides the active popups except the specified ones.

  • except

    Type: Array

    An array of popup ids that should not be hidden.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('popups.hideAll', ['froala.hello', 'image.insert']);

popups.isVisible (id)

Returns: Boolean

Check if the popup is visible.

  • id

    Type: String

    The ID of the popup.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('popups.isVisible', 'froala.hello');

popups.onHide (id, callback)

Returns: Object

Assign a handler to be triggered when the popup is hidden.

  • id

    Type: String

    The ID of the popup.

  • callback

    Type: Function

    A handler to be executed when the popup is hidden.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('popups.onHide', 'froala.hello', function () { console.log ('hide me'); });

popups.onRefresh (id, callback)

Returns: Object

Assign a handler to be triggered when the popup is refeshed.

  • id

    Type: String

    The ID of the popup.

  • callback

    Type: Function

    A handler to be executed when the popup is refreshed.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('popups.onRefresh', 'froala.hello', function () { console.log ('refresh me'); });

popups.refresh (id)

Returns: Object

Refresh the popup passed as parameter.

  • id

    Type: String

    The ID of the popup.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('popups.refresh', 'froala.hello');

popups.setContainer (id, container)

Returns:

Set the parent container of the popup.

  • id

    Type: String

    The ID of the popup.

  • container

    Type: jQuery Object

    A jQuery object to which the popup should be appended.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('popups.setContainer', 'froala.hello', $('body'));

popups.show (id, left, top, obj_height)

Returns: Object

Show the popup at the specified coordinates.

  • id

    Type: String

    The ID of the popup.

  • left

    Type: Integer

    The left offset of the popup.

  • top

    Type: Integer

    The top offset of the popup.

  • obj_height

    Type: Integer

    The height of the object under which the popup should be displayed. This will be used to display the popup above instead of below if there is not enough space.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('popups.show', 'froala.hello', 300, 600, 200);

Position

position.getBoundingRect position.refresh

position.getBoundingRect ()

Returns: DOMRect

Get the bounding of the current selection. See Element.getBoundingClientRect() for more details.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('position.getBoundingRect');

position.refresh ()

Returns: Object

Refresh the toolbar position when the toolbarSticky option is enabled.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('position.refresh');

Quote

quote.apply

quote.apply (value)

Returns: Object

Increase or decrease the quote level of the current selection.

  • value

    Type: String

    The quote value: increase or decrease.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('quote.apply', 'increase');

Save

save.force save.save

save.force ()

Returns: Object

Force a save request at the end of the current autosave interval.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('save.force');

save.save ()

Returns: Object

Initializes a save request to the URL specified by the saveURL option.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('save.save');

Selection

selection.blocks selection.clear selection.element selection.endElement selection.get selection.inEditor selection.info selection.isCollapsed selection.isFull selection.ranges selection.restore selection.save selection.setAfter selection.setAtEnd selection.setAtStart selection.setBefore selection.text

selection.blocks ()

Returns: Array

Returns an array with DOM elements of the current selection.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('selection.blocks');

selection.clear ()

Returns: Object

Clear current selection.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('selection.clear');

selection.element ()

Returns: DOM element

Returns the element where the current selection starts.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('selection.element');

selection.endElement ()

Returns: DOM element

Returns the element where the current selection ends.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('selection.endElement');

selection.get ()

Returns: Object

Returns the current selection.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('selection.get');

selection.inEditor ()

Returns: Boolean

Check if the selection is inside the editor.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('selection.inEditor');

selection.info (el)

Returns: Object

Get the info about the selection and the current node. The returned object will contain two boolean properties (atStart and atEnd) with the selection position relative to the node passed as parameter.

  • el

    Type: DOM object

    DOM object element.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('selection.info', node);

selection.isCollapsed ()

Returns: Boolean

Check if selection is collapsed.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('selection.isCollapsed');

selection.isFull ()

Returns: Boolean

Check if all the content of the editor is selected.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('selection.isFull');

selection.ranges ([index])

Returns: Range object

Get the selection ranges or a single range at a specified index.

  • index

    Type: Number

    Specify the range index

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('selection.ranges', 0);

selection.restore ()

Returns: Object

Restores the current selection by using the HTML markers.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('selection.restore');

selection.save ()

Returns: Object

Saves the current selection by adding HTML markers.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('selection.save');

selection.setAfter (node)

Returns: Object

Places selection markers after the node passed as argument. In order to restore selection the selection.restore method should be called after it.

  • node

    Type: DOM object

    DOM object element.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('selection.setAfter', node);

selection.setAtEnd (node)

Returns: Object

Places selection markers at the end of the node passed as argument. In order to restore selection the selection.restore method should be called after it.

  • node

    Type: DOM object

    DOM object element.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('selection.setAtEnd', node);

selection.setAtStart (node)

Returns: Object

Places the HTML selection markers at the start of the node passed as argument. In order to restore selection the selection.restore method should be called after it.

  • node

    Type: DOM object

    DOM object element.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('selection.setAtStart', node);

selection.setBefore (node)

Returns: Object

Places selection markers before the node passed as argument. In order to restore selection the selection.restore method should be called after it.

  • node

    Type: DOM object

    DOM object element.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('selection.setBefore', node);

selection.text ()

Returns: String

Returns the selected text.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('selection.text');

Size

size.refresh size.syncIframe

size.refresh ()

Returns: Object

Refresh the editor size based on the size options.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('size.refresh');

size.syncIframe ()

Returns: Object

Sync the iframe height to the height of the content.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('size.syncIframe');

Snapshot

snapshot.equal snapshot.get snapshot.restore

snapshot.equal (s1, s2)

Returns: Boolean

Check if two editor snapshots are equal.

  • s1

    Type: FroalaEditor Snapshot

    A snapshot of the editor.

  • s2

    Type: FroalaEditor Snapshot

    A snapshot of the editor.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('snapshot.equal', snapshot1, snapshot2);

snapshot.get ()

Returns: FroalaEditor Snapshot

Get a snapshot of the current editor HTML and selection inside it.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('snapshot.get');

snapshot.restore (snapshot)

Returns: Object

Restore the editor content using a snapshot.

  • snapshot

    Type: FroalaEditor Snapshot

    A snapshot of the editor.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('snapshot.restore', snap);

Table

table.insert

table.insert (rows, cols)

Returns: Object

Insert a table at the cursor position.

  • rows

    Type: Integer

    Number of rows.

  • cols

    Type: Integer

    Number of columns.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('table.insert', 2, 5);

Toolbar

toolbar.enable toolbar.disable toolbar.hide toolbar.show toolbar.showInline

toolbar.enable ()

Returns: Object

Enable toolbar buttons.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('toolbar.enable');

toolbar.disable ()

Returns: Object

Disable toolbar buttons.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('toolbar.disable');

toolbar.hide ()

Returns: Object

Hides the editor's toolbar.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('toolbar.hide');

toolbar.show ()

Returns: Object

Shows the editor's toolbar.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('toolbar.show');

toolbar.showInline (e, [force])

Returns: Object

Show the inline WYSIWYG editor.

  • e

    Type: Event

    The jQuery Event object. If null is passed instead of an Event object, the Froala WYSIWYG HTML Editor is shown and repositioned based on the current selection.

  • force

    Type: Boolean

    Show the editor even if there is not selection in the WYSIWYG HTML editor.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('toolbar.showInline', null, true);

Tooltip

tooltip.bind tooltip.hide tooltip.to

tooltip.bind ($el, selector, [above])

Returns: Object

Bind tooltip to the editor's interface.

  • $el

    Type: jQuery Object

    A jQuery object.

  • selector

    Type: String

    A jQuery string selector.

  • above

    Type: Boolean

    A flag indicating if to display tooltip above.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('tooltip.bind', $('body'), '.fr-button', false);

tooltip.hide ()

Returns: Object

Hide tooltips.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('tooltip.hide');

tooltip.to ($el, [above])

Returns: Object

Show tooltip above for the element passed as argument.

  • $el

    Type: jQuery Object

    A jQuery object.

  • above

    Type: Boolean

    A flag indicating if to display tooltip above.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('tooltip.to', $button, false);

Undo

undo.canDo undo.canRedo undo.reset undo.saveStep

undo.canDo ()

Returns: Boolean

Check if can undo.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('undo.canDo');

undo.canRedo ()

Returns: Boolean

Check if can redo.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('undo.canRedo');

undo.reset ()

Returns: Object

Reset undo stack.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('undo.reset');

undo.saveStep ()

Returns: Object

Saves the current HTML in the undo stack.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('undo.saveStep');

Video

video.align video.display video.get video.insert video.remove video.setSize

video.align (value)

Returns: Object.

Align the current selected video.

  • value

    Type: String

    The alignment value: left, right, center or justify.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('video.align', 'left');

video.display (value)

Returns: Object

Set the display type of the selected video.

  • value

    Type: String

    The display value. Possible values are: block and inline.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('video.display', 'inline');

video.get ()

Returns: jQuery Object

Get the current selected video.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('video.get');

video.insert (embedded_code)

Returns: Object

Inserts video by embedded code at the cursor position. If there is any selected text, it will be replaced with the inserted video.

  • embedded_code

    Type: String

    The embedded code for the video.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('video.insert', true);

video.remove ()

Returns: Object

Remove the current selected video.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('video.remove');

video.setSize (width, height)

Returns: Object

Set the width and height of the selected video.

  • width

    Type: String

    The width value.

  • height

    Type: String

    The height value

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').froalaEditor('video.setSize', '300px', '300px');