Methods

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

Clear current selection.

• This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

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

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

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

• This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

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

Enable editor.

• This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

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

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

Editor gets focus.

• This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

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

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

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

Returns the current selection.

• This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

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

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

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

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

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

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

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

• This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

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

Hides the media manager.

• This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

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

Hides the active popups.

• This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

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

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

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

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

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

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

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

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

Execs the redo action.

• This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Shows the media manager.

• This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

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

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

Returns the selected text.

• This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

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

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

Execs the undo action.

• This method does not accept any arguments.

CODE EXAMPLES

Invoke the method inside the rich text editor:

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

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

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

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