Public API

$.markedit(options)

Causes all elements within the jQuery wrapped set to be initialized as a MarkEdit editor. See Configuration Options below for description of what options may be. This method must be called on a <textarea> tag.

// Initialize MarkEdit using all defaults...
$('#editor').markedit();

// Initialize MarkEdit with a custom toolbar layout and preview below the editor...
$('#editor').markedit({
    'preview' : 'bottom',
    'toolbar' : {
        'layout' : 'bold italic | numberlist bulletlist'
    }
});

$.markeditGetState()

Returns a state object describing the current state of the MarkEdit. Note that this method does not return the jQuery object, and must be called on either the <textarea> representing MarkEdit or one of it’s parents.

var state = $('#markedit').markeditGetState();
alert("Selected text is '" + state.select + "'.");

State Object:

{
  'beforeSelect': String,         -- All text that appears before the selection
  'select': String,               -- Text which is selected
  'afterSelect': String,          -- All text that appears after the selection, excluding the link list
  'links': [ ]                    -- An array of link urls 
}

$.markeditSetState (state)

Set the state of MarkEdit. Note that this method must be called on either the <textarea> representing MarkEdit or one of it’s parents.

Parameters:

• state – A state object. (See $.markeditGetState for state object definition)

var state = $('#markedit').markeditGetState();

// Make selection bold
state.select = '**' + state.select + '**';

$('#markedit').markeditSetState(state);

$.markeditBindAutoPreview (element)

Binds the given element as an auto-preview pane for MarkEdit. Binding an element means that whenever MarkEdit is updated, this element’s innerHtml will be updated with a live preview (rendering). Note that this method must be called on either the <textarea> representing MarkEdit or one of it’s parents.

Note that this method does not need to be invoked if the ‘preview’ option was used at initialization.

// Move the live-preview to a custom <div> above MarkEdit

<div id="preview"></div>
<textarea></textarea>

var markedit = $('textarea').markedit();
$(markedit).markeditBindAutoPreview($('#preview'));

$.markeditGetHtml ()

Returns the rendered HTML for the current MarkEdit’s contents. Note that this method does not return the jQuery object, and must be called on either the <textarea> representing MarkEdit or one of it’s parents.

$.markeditUndo ()

Undoes the previous action. Note that this method must be called on either the <textarea> representing MarkEdit or one of it’s parents.

$.markeditRedo ()

Re-does the last un-did action. Note that this method must be called on either the <textarea> representing MarkEdit or one of it’s parents.

$.markeditSetBold ()

Sets the currently marked selection as bold. Note that this method must be called on either the <textarea> representing MarkEdit or one of it’s parents.

$.markeditSetItalic ()

Sets the currently marked selection as italic. Note that this method must be called on either the <textarea> representing MarkEdit or one of it’s parents.

$.markeditSetLinkOrImage (image, url, text, overwriteSelection)

Sets the currently marked selection as either an image (alt text) or hyperlink. If no text is selected, hyperlink or image will be inserted at the end of the exiting content. If no url is given when called, the built-in dialog box will be shown to request the URL from the user. The selected text may be overwritten (see arguments) Note that this method must be called on either the <textarea> representing MarkEdit or one of it’s parents.

Parameters:

• image – (Boolean) Toggle if the link is a text hyperlink or an image
• url – (String) The actual string url to be linked to
• text – (String) In the case of a link, text is the link text. In the case of an image, text is the alternate text. By default, text is only used if a selection is not present.
• overwriteSelection – (Boolean) Will force the current selection to become the value of the text. Be careful with this one.

// Insert a new image
$('#markedit').markeditSetLinkOrImage(true, '/image/whatever.jpg', 'My Special Image', false);

// This results in:
![My Special Image][1]

  [1]: /image/whatever.jpg

$.markeditSetCode ()

Sets the currently marked selection to a code region. Toggles the code region off if the selection is already marked as a code region. This method works for both block-style and inline-style code regions. Note that this method must be called on either the <textarea> representing MarkEdit or one of it’s parents.

$.markeditSetQuote ()

Sets the currently marked selection to an indented quote block. Toggles the quoteblock off if the selection is already indented. Note that this method must be called on either the <textarea> representing MarkEdit or one of it’s parents.

$.markeditSetList (type)

Sets the currently marked selection to an enumerated list. Note that this method must be called on either the <textarea> representing MarkEdit or one of it’s parents.

Parameters:

• type – (String) The type of list. Possible Values: bullet, number

// Create a numbered list from the current selection
$('#markedit').markeditSetList('number');

// Clear the state and create a new bullet list
var state = {
    'beforeSelect': '',
    'select': 'Item 1\nItem2',
    'afterSelect': '',
    'links': []
};

$('#markedit').markeditSetState(state);
$('#markedit').markeditSetList('bullet');

// This results in:
 - Item 1
 - Item 2

$.markeditInsertLine ()

Inserts a horizontal line at the cursor. Note that this method must be called on either the <textarea> representing MarkEdit or one of it’s parents.

$.markeditSetHeading ()

Sets the currently marked selection to a header. If a header is already set, this function will increment the header value or toggle off if at max value. Note that this method must be called on either the <textarea> representing MarkEdit or one of it’s parents.

$.markeditTogglePreview ()

If MarkEdit is in ‘toolbar’ preview mode, this method will toggle between preview and edit mode. Preview modes other than ‘toolbar’ will not do anything. Note that this method must be called on either the <textarea> representing MarkEdit or one of it’s parents.

$.markeditDisableToolbar (exclude)

Disables MarkEdit’s toolbar buttons. Note that this method must be called on either the <textarea> representing MarkEdit or one of it’s parents.

Parameters:

• exclude – A jQuery selector of children elements to exclude from disabling (if applicable)

 // Disable the toolbar, except for the preview buttons
$('#markedit').markeditDisableToolbar('.preview');

$.markeditEnableToolbar (exclude)

Enables MarkEdit’s toolbar buttons. Note that this method must be called on either the <textarea> representing MarkEdit or one of it’s parents.

Parameters:

• exclude – A jQuery selector of children elements to exclude from enabling (if applicable)

$.markeditToolbar(options)

Initialize a standalone instance of the markedit Toolbar. Options passed are the same as MarkEdit options.toolbar. See Configuration Options below for description of what options may be.

$('#toolbar').markeditToolbar();

$.markeditAddButton (button)

Will create a toolbar style button on the given element.

Parameters:

• button – A button definition.

Button Definition Format:

{
    'id' : String,              -- Used to identify the button
    'css' : String,             -- CSS class(es) to add to the button
    'tip' : String,             -- Mouse-over tool tip to be shown (html Title)
    'click' : function,         -- Function to be executed on Click event
    'mouseover' : function,     -- Function to be executed on Click event
    'mouseout' : function       -- Function to be executed on Click event
}

$('toolbar #group-1').markeditAddButton({
    'id' : 'custom',
    'text' : 'Hover or Click',
    'mouseover' : function() {
        alert('Mouse Over!');
    },
    'click' : function() {
        alert('Clicked!');
    }
});

$.markeditAddGroup (toggleGroup, cssClass)

Adds a toolbar group to the called element. The “break” in toolbar buttons is caused by a break in groups. To create the break, first create a group for each grouping of buttons. The break will be automatic via CSS.

Parameters:

• toggleGroup – (Boolean) A value that represents if the button group is a toggle group (explanation below) or not.
• cssClass – (String) Additional css classes to be added to the group’s <div> tag.

Toggle Group:

A toggle group is a special button group that only allows 1 button to be “set” or depressed at a time. Clicking any other button in the group will unset or undepressed the previously set button and set the clicked button. Note that unlike a regular group, the click event will not fire if a button that is already set is clicked. This functionality is useful for allowing options (like edit/preview) to be toggled from the toolbar.

$('#toolbar').markeditAddGroup(false, 'extra-css');