Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

Methods

align.apply align.refresh button.addButtons button.bindCommands button.buildGroup button.buildList button.bulkRefresh button.hideActiveDropdowns button.refresh charCounter.count clean.html clean.invisibleSpaces clean.lists clean.tables codeView.get codeView.isActive codeView.toggle colors.back colors.background colors.text commands.bold commands.clearFormatting commands.indent commands.insertHR commands.italic commands.moreMisc commands.moreParagraph commands.moreRich commands.moreText commands.outdent commands.redo commands.selectAll commands.show commands.strikeThrough commands.subscript commands.superscript commands.moreTrackChanges commands.underline commands.undo core.getXHR core.injectStyle core.isEmpty core.sameInstance cursor.backspace cursor.del cursor.enter cursor.isAtEnd cursor.isAtStart destroy edit.disableDesign edit.isDisabled edit.off edit.on editInPopup.update embedly.add embedly.back embedly.get embedly.insert embedly.remove embedly.showInsertPopup emoticons.insert emoticons.setEmoticonCategory events.bindClick 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 forms.applyStyle fullscreen.isActive fullscreen.toggle helpers.isAndroid helpers.isBlackberry helpers.isIOS helpers.isMac helpers.isMobile helpers.isTouch helpers.isWindowsPhone helpers.sanitizeURL helpers.scrollLeft helpers.scrollTop 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 inlineClass.apply inlineStyle.apply keys.ctrlKey keys.isArrow keys.isCharacter language.translate lineHeight.apply link.allSelected link.applyStyle link.get link.insert link.remove lists.format markdown.isEnabled markdown.refresh markdown.toggle markers.insert markers.insertAtPoint markers.place markers.remove markers.split modals.areVisible modals.create modals.get modals.hide modals.isVisible modals.show node.blockParent node.clearAttributes node.contents node.deepestParent node.hasClass node.hasFocus node.isBlock node.isDeletable node.isEditable node.isElement node.isEmpty node.isFirstSibling node.isLastSibling 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.reset 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 spellChecker.toggle table.insert toolbar.disable toolbar.enable toolbar.hide toolbar.show toolbar.showInline tooltip.bind tooltip.hide tooltip.to track_changes.toggleTracking track_changes.getPendingChanges track_changes.showChanges track_changes.acceptAllChanges track_changes.rejectAllChanges track_changes.acceptSingleChange track_changes.rejectSingleChange undo.canDo undo.canRedo undo.reset undo.saveStep video.align video.display video.get video.insert video.remove video.setSize

Align

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.align.apply('left');

})

align.refresh ($btn)

Returns: Object

Refresh the alignment of the selected paragraphs.

  • $btn

    Type: DOM Object

    An button element of command.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.align.refresh();

})

Button

button.addButtons ($btns)

Returns:

Adds buttons into existing toolbar.

  • $btns

    Type: Array

    An array of commands to add into buttons.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.button.addButtons();

})

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.button.bulkRefresh();

})

button.buildList (buttons)

Returns: Object

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.button.buildList();

})

button.buildGroup ()

Returns:

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

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.button.buildGroup();

})

button.bindCommands ($el)

Returns:

Attaches the event callbacks.

  • $el

    Type: DOM Object

    An element object.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.button.bindCommands();

})

button.refresh ($btn)

Returns:

Refreshes the state of active command/button.

  • $btn

    Type: DOM Object

    An button element of command.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.button.refresh();

})

button.hideActiveDropdowns ($el)

Returns:

Hides all the active dropdowns.

  • $el

    Type: DOM Object

    A wrapper element object.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.button.hideActiveDropdowns();

})

Char Counter

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.charCounter.count();

})

Clean

clean.html (dirty_html)

Returns: String

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

  • dirty_html

    Type: String

    The HTML to be cleaned.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.clean.html('<p dummy="test">foo</p><p>bar</p>');

})

clean.tables ()

Returns:

Cleans the tables.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.clean.tables();

})

clean.lists ()

Returns:

Cleans the lists.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.clean.lists();

})

clean.invisibleSpaces (dirty_html)

Returns:

Cleans the invisible spaces.

  • dirty_html

    Type: String

    Current HTML in the editor

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.clean.invisibleSpaces();

})

Code View

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.codeView.toggle();

})

Colors

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.colors.text('#001122');

})

colors.back ()

Returns:

Hides the color picker popup.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.colors.back();

})

Commands

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.commands.undo();

})

commands.selectAll ()

Returns: Object

Executes the selectAll action.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.commands.selectAll();

})

commands.moreText ()

Returns: Object

Show more text actions toolbar.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.commands.moreText();

})

commands.moreParagraph ()

Returns: Object

Show more paragraph actions toolbar.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.commands.moreParagraph();

})

commands.moreRich ()

Returns: Object

Show more rich text actions toolbar.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.commands.moreRich();

})

commands.moreMisc ()

Returns: Object

Show more miscellaneous actions toolbar.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.commands.moreMisc();

})

commands.moreRich ()

Returns: Object

Show more paragraph actions toolbar.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.commands.moreRich();

})

commands.moreTrackChanges ()

Returns: Object

Show more track changes actions toolbar.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.commands.moreTrackChanges();

})

Core

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.core.isEmpty();

})

core.sameInstance ($obj)

Returns: Boolean

Check if the both editor instances are same..

  • $obj

    Type: DOM Object

    Editor object

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.core.sameInstance();

})

Cursor

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.cursor.del();

})

cursor.isAtEnd ()

Returns: Boolean

Find if the cursor is at the end.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.cursor.isAtEnd();

})

cursor.isAtStart ()

Returns: Boolean

Find if the cursor is at the start.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.cursor.isAtStart();

})

Edit

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.edit.on();

})

edit.isDisabled ()

Returns: Boolean

Find if the edit is disabled.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.edit.isDisabled();

})

edit.disableDesign ()

Returns:

Disables the edit functionality.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.edit.disableDesign();

})

Edit In Popup

editInPopup.update ()

Returns:

Update the texts in popup.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.editInPopup.update();

})

Embedly

embedly.add (url)

Returns:

Add the embedly to editor.

  • url

    Type: String

    URL for the embedly.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.embedly.add('http://video.example.com/video/pFhkluiEW');

})

embedly.back ()

Returns:

Hides the insert popup and shows inline menu for currently selected embedly.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.embedly.back();

})

embedly.get ()

Returns:

Gets the currently embedly instance.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.embedly.get();

})

embedly.insert ()

Returns:

Inserts the embedly into editor from popup.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.embedly.insert();

})

embedly.remove ()

Returns:

Removes the currently selected embedly instance.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.embedly.remove();

})

embedly.showInsertPopup ()

Returns:

Shows insert popup.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.embedly.showInsertPopup();

})

Emoticons

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

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

})

emoticons.setEmoticonCategory (categoryId)

Returns:

Insert an emoticon at the cursor position.

  • categoryId

    Type: String

    Category Id for the emoticons.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.emoticons.setEmoticonCategory();

})

Events

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.events.blurActive();

})

events.bindClick ($element, selector, handler)

Returns:

Binds the click event for given element.

  • $element

    Type: DOM Object

    Element to bind event on

  • selector

    Type: String

    DOM selector expression.

  • handler

    Type: Function

    Handler function for the event.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.events.bindClick(node, '.selector', function() { // event handler goes here. } );

})

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.events.trigger('keydown', [], true);

})

File

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.file.upload([]);

})

Font Family

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.fontFamily.apply('Arial,Helvetica');

})

Font Size

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.fontSize.apply('12px');

})

Format

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.format.toggle('strong', { class: 'foo' });

})

Fullscreen

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.fullscreen.toggle();

})

Forms

forms.applyStyle (val, formStyles, formMultipleStyles)

Returns:

Update input style in a form.

  • val

    Type: String

    Class name to be applied.

  • formStyles

    Type: Object

    Key value pair for class name and description.

  • formMultipleStyles

    Type: Boolean

    Enables the multiple classes to be applied on input.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.forms.applyStyle(, , true);

})

General

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.destroy();

})

Helpers

helpers.isMobile ()

Returns: Boolean

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.helpers.isMobile();

})

helpers.isAndroid ()

Returns: Boolean

Check if the user is using a android mobile device.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.helpers.isAndroid();

})

helpers.isBlackberry ()

Returns: Boolean

Check if the user is using a blackberry mobile device.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.helpers.isBlackberry();

})

helpers.isIOS ()

Returns: Boolean

Check if the user is using a iOS mobile device.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.helpers.isIOS();

})

helpers.isMac ()

Returns: Boolean

Check if the user is using a iMac machine.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.helpers.isMac();

})

helpers.isTouch ()

Returns: Boolean

Check if the user is using a touch enabled device.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.helpers.isTouch();

})

helpers.isWindowsPhone ()

Returns: Boolean

Check if the user is using a windows mobile device.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.helpers.isWindowsPhone();

})

helpers.scrollLeft ()

Returns: Number

Gets the current scroll position from left.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.helpers.scrollLeft();

})

helpers.scrollTop ()

Returns: Number

Gets the current scroll position from top.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.helpers.scrollTop();

})

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.helpers.sanitizeURL('https://froala.com');

})

HTML

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.html.set('<p>My custom paragraph.</p>');

})

Image

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.image.upload([]);

})

Image Manager

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.imageManager.show();

})

Inline Class

inlineClass.apply (value)

Returns: Object

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

  • value

    Type: String

    The value of the css class to apply.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.inlineClass.apply('fr-highlight');

})

Inline Style

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.inlineStyle.apply('Big Red');

})

Keys

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.keys.ctrlKey(e);

})

keys.isArrow (key_code)

Returns: Boolean

Check if the passed key code is an arrow key.

  • key_code

    Type: Integer

    Key code.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.keys.isArrow(40);

})

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.keys.isCharacter(40);

})

Language

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.language.translate('Bold');

})

Line Height

lineHeight.apply (val)

Returns:

Apply the given line height to selected text.

  • val

    Type: String

    Line height to apply.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.lineHeight.apply(24);

})

Lists

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.lists.format('OL');

})

Markdown

markdown.isEnabled ()

Returns: Boolean

Find if markdown mode is active.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.markdown.isEnabled();

})

markdown.refresh($btn)

Returns:

Set a button to be active if the markdown is enabled or deactivate it otherwise.

  • $btn

    Type: DOM Object

    A button element.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.markdown.refresh();

})

markdown.toggle ()

Returns:

Toggle between the markdown and text view.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.markdown.toggle();

})

Markers

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.markers.remove();

})

markers.split ()

Returns: Object

Split the HTML at the marker position.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.markers.split();

})

Modals

modals.areVisible (new_instance)

Returns: Boolean

Check for the given modal instance is visible or not.

  • new_instance

    Type: DOM Object

    Instance for a modal.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.modals.areVisible(node);

})

modals.create (id, head, body)

Returns: DOM Object

Create a modal for the editor.

  • id

    Type: String

    The ID of the modal.

  • head

    Type: String

    The header modal template.

  • body

    Type: String

    The body modal template.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.modals.create('froala.modal', '<h3>Hello Modal</h3>', '<div>Body goes here</div>');

})

modals.get (id)

Returns: DOM Object

Get the DOM element object that represents the popup.

  • id

    Type: String

    The ID of the modal.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.modals.get('froala.modal');

})

modals.isVisible (id)

Returns: Boolean

Checks if given modal id is visible or not.

  • id

    Type: String

    Modal instance id.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.modals.isVisible('instanceId');

})

modals.show (id)

Returns:

Shows the given modal instance id.

  • id

    Type: String

    Modal instance id.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.modals.show('instanceId');

})

modals.hide (id, init)

Returns:

Hides the given modal instance id.

  • id

    Type: String

    Modal instance id.

  • init

    Type: Boolean

    Flag to restore the selection

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.modals.hide('instanceId', true);

})

Node

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.node.blockParent(node);

})

node.clearAttributes (node)

Returns: DOM Object

Clears the attributes of the node passed as argument.

  • node

    Type: DOM Object

    A DOM object element.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.node.clearAttributes(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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.node.deepestParent(node, until_node, false);

})

node.hasClass (el, cls)

Returns: Boolean

Check if the node has class name passed as argument.

  • el

    Type: DOM Object

    A DOM object element.

  • cls

    Type: String

    CSS Class name

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.node.hasClass(node, 'fr-focus');

})

node.hasFocus (node)

Returns: Boolean

Check if the node has focus.

  • node

    Type: DOM Object

    A DOM object element.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.node.hasFocus(node);

})

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.node.isBlock(node);

})

node.isElement (node)

Returns: Boolean

Check if the node is the editor element.

  • node

    Type: DOM Object

    A DOM object element.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.node.isElement(node);

})

node.isDeletable (node)

Returns: Boolean

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

  • node

    Type: DOM Object

    A DOM object element.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.node.isDeletable(node);

})

node.isEditable (node)

Returns: Boolean

Check if the node is the editor element.

  • node

    Type: DOM Object

    A DOM object element.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.node.isEditable(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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.node.isEmpty(node, true);

})

node.isFirstSibling (el, [ignore_markers])

Returns: Boolean

Check if the node is very first sibling in editor.

  • 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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.node.isFirstSibling(node, true);

})

node.isLastSibling (el, [ignore_markers])

Returns: Boolean

Check if the node is very last sibling in editor.

  • 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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.node.isLastSibling(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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.node.isVoid(node);

})

Paragraph Format

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.paragraphFormat.apply('H2');

})

Paragraph Style

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.paragraphStyle.apply('light');

})

Placeholder

placeholder.hide ()

Returns:

Hide the placeholder.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.placeholder.show();

})

Popups

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.popups.show('froala.hello', 300, 600, 200);

})

Position

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.position.refresh();

})

Quote

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.quote.apply('increase');

})

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.save.save();

})

save.reset ()

Returns: Object

Restore the force 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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.save.reset();

})

Selection

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.selection.text();

})

Size

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.size.syncIframe();

})

Snapshot

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.snapshot.restore(snap);

})

Spell Checker

spellChecker.toggle ()

Returns:

Toggles the spellchecker plugin.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.spellChecker.toggle();

})

Table

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.table.insert(2, 5);

})

Toolbar

toolbar.enable ()

Returns: Object

Enable toolbar buttons.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.toolbar.showInline(null, true);

})

Tooltip

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.tooltip.to($button, false);

})

Track Changes

track_changes.toggleTracking()

Returns:

Enable/Disable track changes

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.trackChanges.toggleTracking();

})

track_changes.getPendingChanges ()

Returns: Array

Return all tracked changes.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.trackChanges.getPendingChanges();

})

track_changes.showChanges ()

Returns:

show/hide tracked changes

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.trackChanges.showChanges ();

})

track_changes.acceptAllChanges ()

Returns:

Accept all changes that are made on the editor

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

track_changes.acceptAllChanges ();

})

track_changes.rejectAllChanges ()

Returns:

Reject all changes that are made on the editor

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

track_changes.rejectAllChanges ();

})

track_changes.acceptSingleChange ()

Returns:

Accept the last change that are made on the editor

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

track_changes.acceptSingleChange ();

})

track_changes.rejectSingleChange ()

Returns:

Reject the last change that are made on the editor

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

track_changes.rejectSingleChange ();

})

Undo

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.undo.saveStep();

})

Video

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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.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:

var editor = new FroalaEditor('.selector', {}, function () {

// Call the method inside the initialized event.

editor.video.setSize('300px', '300px');

})

Do you think we can improve this article? Let us know.

Ready to dive in? Explore our plans

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_471548016" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_482293381" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1360962608" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>