For instructions on setting up SCEditor, see here. Custom command support requires SCEditor version 1.2.4+.

Adding Custom Command

SCEditor has a function called setCommand which updates a command if it already exists or adds it if it doesn’t. setCommand must be called before the editor is initialised otherwise the command may not show in the editors toolbar.

setCommand parameters:
Name (string): The name of the command, should be lower-case and not contain any spaces.
Exec (string or function): Should be a function which will be called when the command is clicked or a string which will be passed to the browsers built-in execCommand function.
Tooltip (string): The commands tooltip text
Keypress: Unless the command needs to handle keypress events, omit this parameter. For an example of keypress handler see the emoticon command.

Adding a command:

$.sceditor.setCommand(
	"test", /* commands name */
	function () {
		/* commands function, inserts the words "Hello World" */
		this.wysiwygEditorInsertHtml('<span>Hello World</span>');
 	},
	"Test commands tooltip" /* commands tooltip */
);

Add the command to the editors toolbar:

$("textarea").sceditor({
	toolbar: "test,bold,italic,underline"
});

Add an icon for the command:

<style type="text/css">
/* the commands button class is .sceditor-button-[name] so in
in this case it's .sceditor-button-test. div is the button so set
the background image of that to the icon for the command test */
.sceditor-button-test div { background: url('icons/test.png'); }
</style>

That’s it, the command test should now be added to the editor.

To update a command, simply do:

$.sceditor.setCommand(
	"test", /* name of the command to update */
	function () {
		this.wysiwygEditorInsertHtml('<span>Updated Command</span>');
	}
);

The above will make the command test insert the string “Updated Command” instead of “Hello World”. It will update the command for all previous and future instances of the editor so any editor with the command test will now insert the string “Updated Command”.

Adding a Custom BBCode

If you are using SCEditor as a BBCode editor and you want the custom command to support BBCode, you will need to add a BBCode to the BBCode parser.

Like sceditor, sceditorBBCodePlugin has a function called setCommand which will add a BBCode to the parser.

setCommand parameters:
Name (string): The name of the BBCode. e.g. for [b] it should be “b”.
Tags (object):  Should be an object with the tags which this BBCode applies to. The format should be tagname: { arttributename: [valid, attribute, values] }. Anything after the tagname: can be null to apply to all. e.g.

{
	tagname: { /* name of tag this BBCode applies to */
		"attribute": /* this can be null if the bbcode applies to all tags with the specified name or the name of an attribute the element must have */
			["attribute1", "attributevalue2"] /* this can be null or a value the attribute must have */
	}
}

Styles (object): Should be an object with all the style attributes which this BBCode applies to. The format should attribute: [valid, attribute, values]. The values array can be null if the BBCode applies to all elements with the specified style attribute. e.g.:

{
	"font-weight": /* CSS attribute name */
		["bold", "bolder"] /* array of valid values. This can be null if all values are valid. */
}

Format (string or function): String with “{0}” which will be replaced with the elements content or a function with the parameters (element, content) which returns a string. Element will be the HTML element being converted and content will be a string containing the elements converted contents.
Html (string or function): String with “{0}” which will be replaced with the content within the BBCode tags, or a function with the parameters (element, attrs, content) which returns a string. Element will be a string with the BBCodes name. Attrs will be an object with the BBCodes attributes, if the BBCode has a default attribute e.g. [bbcode=default attribute value] it will be set as attrs.defaultAttr. Content will be the BBCodes content parsed into HTML tags.

Adding a BBCode:

$.sceditorBBCodePlugin.setCommand(
	"b",
	null,
	{
		"font-weight": ["bold", "bolder"]
	},
	"[b]{0}[/b]",
	"<strong>{0}</strong>"
);

Another example:

$.sceditorBBCodePlugin.setCommand(
	"url",
	{
		a: {
			href: null
		}
	},
	null,
	function(element, content) {
		if(element.attr('href').substr(0, 7) == 'mailto:')
			return '[email=' + element.attr('href').substr(7) + ']' + content + '[/email]';
		return '[url=' + encodeURI(element.attr('href')) + ']' + content + '[/url]';
	},
	function(element, attrs, content) {
		if(typeof attrs.defaultAttr === "undefined")
			attrs.defaultAttr = content;
		return '<a href="' + attrs.defaultAttr + '">' + content + '</a>';
	}
);

If the BBCode already exists, it will be updated.

You can download the above SCEditor Custom Commands Example. If you have any problems just leave a comment or contact me here.