Skip to content

Methods

checkPlaceholder

Returns: Object

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

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('checkPlaceholder');

clearSelection

Returns: Object

Clear current selection.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('clearSelection');

deleteImage

Returns: Object

A POST request is being made to the delete URL specified in imageDeleteURL. Additional parameters can be sent using the imageDeleteParams option. The data-info attribute of the image will also be sent to the server as info parameter in the request.
Note: The request does not delete the image from the server but it notices the server to do that. You would have to handle the deletion on the server.

  • img

    Type: jQuery object

    A jQuery object with the image to be deleted.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('deleteImage', $('#my_image'));

destroy

Returns: Object

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

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

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

disable

Returns: Object

Disable editor.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('disable');

enable

Returns: Object

Enable editor.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('enable');

exec (cmd, val)

Returns: Object

Executes a command by formatting the selection accordingly.

  • cmd

    Type: String

    Command name. Values from the buttons option array.

  • val

    Type: String

    [Optional] The value to set.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('exec', 'formatBlock', 'h1');

focus

Returns: Object

Editor gets focus.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('focus');

getHTML (keep_markers, add_fr_tag)

Returns: String

Returns the HTML inside the element.

  • keep_markers

    Type: Boolean

    [Optional] Keep the selection markers. The default value is false.

  • add_fr_tag

    Type: Boolean

    [Optional] Add fr-tag class to the elements inside the editable area, so that all the styles will be kept outside the Froala WYSIWYG HTML Editor. The default values is false.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('getHTML', true, true);

getRange()

Returns: Range object

Returns the range of the current selection.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('getRange');

getSelection()

Returns: Object

Returns the current selection.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('getSelection');

getSelectionElement()

Returns: DOM element

Returns the element where the current selection starts.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('getSelectionElement');

getSelectionElements()

Returns: Array

Returns an array with DOM elements of the current selection.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('getSelectionElements');

Returns: String

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

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('getSelectionLink');

Returns: Array

An array of DOM elements of A type from the current selection.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('getSelectionLinks');

getSelectionParent()

Returns: DOM element

Returns the parent element of the current selection.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('getSelectionParent');

getText()

Returns: String

Returns the plain text inside the editing box.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('getText');

hide()

Returns: Object

Hide editor.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('hide');

hideMediaManager()

Returns: Object

Hides the media manager.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('hideMediaManager');

hidePopups()

Returns: Object

Hides the active popups.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('hidePopups');

insertHTML (html, do_focus)

Returns: Object

Insert HTML at the cursor position.

  • html

    Type: String

    A text containing the new HTML to be inserted.

  • do_focus

    Type: Boolean

    Try to focus before inserting the HTML.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('insertHTML', 'foo bar', true);

isEnabled (cmd)

Returns: Boolean

Determines if the command passed as argument is available as a command in the Froala WYSIWYG HTML Editor's toolbar.

  • cmd

    Type: String

    Command name. Values from the buttons option array.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('isEnabled', 'bold');

option()

Returns: Object

Gets an object containing key/value pairs representing the current editable options hash.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('option');

option (optionName)

Returns: Object

Gets the value currently associated with the specified optionName.

  • optionName

    Type: String

    The name of the option to get.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('option', 'borderColor');

option (optionName, value)

Returns: Object

Sets the value to the option associated with the specified optionName.

  • optionName

    Type: String

    The name of the option to get.

  • value

    Type: Object

    A value to set for the option.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('option', 'borderColor', '#BD0000');

option (options)

Returns: Object

Sets one or more options.

  • options

    Type: Object

    A map of option-value pairs to set.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('option', {borderColor: '#BD0000'});

placeMarker (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 to set marker at the beginning or the end of the range.

  • id

    Type: String

    The marker id.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('placeMarker', range, true, '1');

redo()

Returns: Object

Execs the redo action.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('redo');

refreshButtons()

Returns: Object

Refreshes the state of the buttons in the toolbar.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('refreshButtons');

removeFormat()

Returns: Object

Clean any formatting on the selected text.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('removeFormat');

removeMarkers()

Returns: Object

Clears the selection markers from HTML.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('removeMarkers');

repositionEditor()

Returns: Object

Repositions the Froala WYSIWYG HTML Editor based on the current selection.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('repositionEditor');

restoreSelection()

Returns: Object

Restores the selection saved with saveSelection.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('restoreSelection');

restoreSelectionByMarkers()

Returns: Object

Restores the current selection by using the HTML markers.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('restoreSelectionByMarkers');

save()

Returns: Object

Initializes a save request to the URL specified by saveURL.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

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

saveSelection()

Returns: Object

Saves the current selection.
Note: it can be restored correctly only if the text inside the Froala WYSIWYG HTML Editor did not change. If there are changes, use saveSelectionByMarkers.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('saveSelection');

saveSelectionByMarkers()

Returns: Object

Saves the current selection by adding HTML markers.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('saveSelectionByMarkers');

saveUndoStep()

Returns: Object

Saves the current HTML in the undo stack.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('saveUndoStep');

selectionInEditor()

Returns: Boolean

Returns true if the selection is inside the Froala WYSIWYG HTML Editor.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('selectionInEditor');

setDirty (dirty)

Returns: Object

Mark current state as dirty so that on the next autosave interval a save request is made.

  • dirty

    Type: Boolean

    A flag indicating if the content is dirty or not.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('setDirty', true);

setHTML (html, sync)

Returns: Object

Sets the HTML inside the element.

  • html

    Type: String

    A text containing the new HTML to be set.

  • sync

    Type: Boolean

    [Optional] Do a sync after the event is triggered. Default is true.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('setHTML', '<p>My custom paragraph.</p>', false);

setSelection (sn, so, fn, fo)

Returns: Object

Sets selection by using DOM elements.

  • sn

    Type: DOM element

    Start node.

  • so

    Type: Number

    Start node offset.

  • fn

    Type: DOM element

    Final node.

  • fo

    Type: Number

    Final node offset.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('setSelection', $('#sn').get(0), 5, $('#fn').get(0), 10);

show (e)

Returns: Object

Shows the editor and repositions it based on the current selection.

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

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('show', null);

showByCoordinates (x, y)

Returns: Object

Sets and then shows the Froala WYSIWYG HTML Editor at the specified position.

  • x

    Type: Number

    X axis position.

  • y

    Type: Number

    Y axis position.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('showByCoordinates', 400, 1300);

showInsertImage()

Returns: Object

Shows the insert image popup.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('showInsertImage');

Returns: Object

Shows the insert link popup.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('showInsertLink');

showInsertVideo()

Returns: Object

Shows the insert video popup.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('showInsertVideo');

showMediaManager()

Returns: Object

Shows the media manager.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('showMediaManager');

sync()

Returns: Object

Syncs the content of the element with the text from the associated TEXTAREA.
Note: this method is available only when the element on which the plugin was initialized is TEXTAREA.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('sync');

text()

Returns: String

Returns the selected text.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('text');

triggerEvent (event, data, sync)

Returns: Object

Triggers an event.

  • event

    Type: String

    The name of the event.

  • data

    Type: Hash

    A hash with custom data to pass over to the event handler.

  • sync

    Type: Boolean

    [Optional] Do a sync after the event is triggered. Default is true.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('triggerEvent', 'save', {}, false);

undo()

Returns: Object

Execs the undo action.

  • This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('undo');

writeImage (image_link, sanitize)

Returns: Object

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

  • image_link

    Type: String

    URL to the image.

  • sanitize

    Type: Boolean

    Sanitize or not the image link.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('writeImage', '/uploads/13451.jpg', true);

Returns: Object

Makes the current selection a link to the specified URL. If the URL is empty, it will remove the link from the current selection.

  • url

    Type: String

    URL string.

  • text

    Type: String

    Text for the inserted link.

  • cls

    Type: String

    A string of classes to be added on the inserted link.

  • blank

    Type: Boolean

    Specifies if the link opens in a new tab or not.

  • nofollow

    Type: Boolean

    Specifies if the link should have the rel="nofollow" attribute.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('writeLink', 'http://www.example.com/contact', 'contact us', 'f-link r-link', true, true);

writeVideo (video_obj, embedded)

Returns: Object

Inserts the video passed as argument at the cursor position. If there is any selected text, it will be replaced with the inserted video.

  • video_obj

    Type: String

    Embeded code for the video or a link to the video.

  • embedded

    Type: String

    [Optional] If true, video_obj argument is treated as embedded code. The default value is false.

CODE EXAMPLES

Invoke the method inside the rich text editor:

$('.selector').editable('writeVideo', 'embeded_string', true);