Methods (original) (raw)

Align

align.apply (value)

Returns: Object

Set the alignment of the selected paragraphs.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

foo

bar

'); })

clean.tables ()

Returns:

Cleans the tables.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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("😀", "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.

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.

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.

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.

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.

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.

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.

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.

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.

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

file.insert (link, , [response])

Returns: Object

Insert the link to a file at the cursor position.

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.

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([]); })

Find and Replace

findReplace.findMatches (searchText)

Returns:

Finds all matches of searchText in the editor content and highlights them.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () { // Call the method inside the initialized event. editor.findReplace.findMatches('search'); })

findReplace.findNextMatch (index)

Returns:

Navigates to the match with the given index and highlights it as the current match in focus.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () { // Call the method inside the initialized event. editor.findReplace.findNextMatch(2); })

findReplace.findPreviousMatch (index)

Returns:

Navigates to the match at the specified index in a circular backward manner and highlights it as the current match in focus.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () { // Call the method inside the initialized event. editor.findReplace.findPreviousMatch(2); })

findReplace.replaceMatch (replaceText)

Returns:

Replaces the current highlighted match with the given replaceText

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () { // Call the method inside the initialized event. editor.findReplace.replaceMatch('New text'); })

findReplace.replaceMatches (replaceText)

Returns:

Replaces all matches with the given replaceText

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () { // Call the method inside the initialized event. editor.findReplace.replaceMatches('New text'); })

findReplace.getMatchesCount ()

Returns: Integer

Returns the total number of matches found

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () { // Call the method inside the initialized event. editor.findReplace.getMatchesCount(); })

findReplace.getCurrentMatch ()

Returns: string/null

Returns the text content of the current match

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () { // Call the method inside the initialized event. editor.findReplace.getCurrentMatch(); })

findReplace.getCurrentMatchIndex ()

Returns: Integer

Returns the index of the current match in focus or -1 if no match is selected.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () { // Call the method inside the initialized event. editor.findReplace.getCurrentMatchIndex(); })

findReplace.showPopup ()

Returns:

Show Find and Replace 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.findReplace.showPopup(); })

findReplace.hidePopup ()

Returns:

Hide Find and Replace 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.findReplace.hidePopup(); })

Font Family

fontFamily.apply (value)

Returns: Object

Set the font family of the selected text.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

My custom paragraph.

'); })

Image

image.align (value)

Returns: Object

Align the selected image.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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); })

link.allSelected ()

Returns: Array

An array of DOM elements of A type from the current 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.link.allSelected(); })

link.applyStyle (value)

Returns: Object

Style the current link using a CSS class.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () { // Call the method inside the initialized event. editor.link.applyStyle('small'); })

link.get ()

Returns: DOM Object

Get the link DOM object of the current selection. If there is more than one link in the selection, only the first one will be returned.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () { // Call the method inside the initialized event. editor.link.get(); })

link.insert (href, , [attrs])

Returns: Object

Inserts new link in the editor or makes the current selection a link to the specified URL.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () { // Call the method inside the initialized event. editor.link.insert('http://www.example.com/contact', 'contact us', {'target': '_blank', 'rel': 'nofollow'}); })

link.remove ()

Returns: Object

Removes the current selected link.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('.selector', {}, function () { // Call the method inside the initialized event. editor.link.remove(); })

Lists

lists.format (tag_name)

Returns: Object

Format the selected paragraphs as list.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

Hello Modal

', '
Body goes here
'); })

modals.get (id)

Returns: DOM Object

Get the DOM element object that represents 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.modals.get('froala.modal'); })

modals.isVisible (id)

Returns: Boolean

Checks if given modal id is visible or not.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.hideTableProperties ()

Returns: Object

method to hide the table properties popup.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('#example', {}, function () { // Call the method inside the initialized event. editor.table.hideTableProperties(); })

table.insert (rows, cols)

Returns: Object

Insert a table at the cursor position.

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); })

table.showCellPropertiesPopup ()

Returns: Object

method to show cell properties popup.

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('#example', {}, function () { // Call the method inside the initialized event. editor.table.showCellPropertiesPopup(); })

table.showTableProperties ()

Returns: Object

method to open the table properties popup

CODE EXAMPLES

Invoke the method inside the rich text editor:

var editor = new FroalaEditor('#example', {}, function () { // Call the method inside the initialized event. editor.table.showTableProperties(); })

Toolbar

toolbar.enable ()

Returns: Object

Enable toolbar 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.toolbar.enable(); })

toolbar.disable ()

Returns: Object

Disable toolbar 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.toolbar.disable(); })

toolbar.hide ()

Returns: Object

Hides the editor's toolbar.

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.

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.

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.

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.

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.

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

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.

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

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

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

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

Word Counter

wordCounter.wordCount ()

Returns: Integer

Returns the number of words 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.wordCounter.wordCount(); })

Ready to dive in? Explore our plans