How to add custom commands

Custom command demo

[h1]Header 1[/h1][h2]Sub header[/h2]Normal text

Code behind it

To add the toolbar command, use the $.sceditor.command.set function:

$.sceditor.command.set("headers", {
    exec: function(caller) {
        // Store the editor instance so it can be used
        // in the click handler
        var editor   = this,
            $content = $("<div />");

        // Create the 1-6 header options
        for (var i=1; i<= 6; i++) {
            $(
                '<a class="sceditor-header-option" href="#">' +
                    '<h' + i + '>Heading ' + i + '</h' + i + '>' +
                '</a>'
            )
            .data('headersize', i)
            .click(function (e) {
                // When the option is clicked call the native contenteditable
                // formatblock to format this block to the header
                // 
                // It's nearly always better to use the editors methods like
                // insert() over the browsers native execCommand as 
                // execCommand has many browser incompatibilites.
                editor.execCommand("formatblock", "<h" + $(this).data('headersize') + ">");
                editor.closeDropDown(true);

                e.preventDefault();
            })
            .appendTo($content);
        }

        editor.createDropDown(caller, "header-picker", $content.get(0));
    },
    tooltip: "Format Headers"
});

Add the commands CSS:

.sceditor-button-headers div { background: url('/images/headers-button.png'); }
.sceditor-header-option {
    display: block;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    color: #222;
}
.sceditor-header-option:hover { background: #eee; }

Then, if using the BBCode plugin, add the BBCode commands using the $.formats.bbcode.set function:

$.sceditor.formats.bbcode
    .set("h1", { tags: { h1: null }, format: "[h1]{0}[/h1]", html: "<h1>{0}</h1>", isInline: false })
    .set("h2", { tags: { h2: null }, format: "[h2]{0}[/h2]", html: "<h2>{0}</h2>", isInline: false })
    .set("h3", { tags: { h3: null }, format: "[h3]{0}[/h3]", html: "<h3>{0}</h3>", isInline: false })
    .set("h4", { tags: { h4: null }, format: "[h4]{0}[/h4]", html: "<h4>{0}</h4>", isInline: false })
    .set("h5", { tags: { h5: null }, format: "[h5]{0}[/h5]", html: "<h5>{0}</h5>", isInline: false })
    .set("h6", { tags: { h6: null }, format: "[h6]{0}[/h6]", html: "<h6>{0}</h6>", isInline: false });

Finally add the command to the toolbar of the editor:

$("#demo-cust-cmd").sceditor({
    format: 'bbcode',
    toolbar: "headers|source",
});

See the documentation for more details on the above functions and CSS.