Custom Toolbar - Wysiwyg/Preview Modes

<script>
window.onload = function() {
    var div = document.getElementById('example1');
    var config = {
        doubleClickToEdit: false,
        wysiwyg: {
            iframeId: 'example1-iframe'
        },
        toolbar: {
            imagesLocation: '../../images/',
            controlLayout: [
                'cancel', 'mode_selector', '/',
                'bold', 'italic', '|', 'indent', 'outdent'
            ],
        }, 
        modeClasses: [
            'Wikiwyg.Wysiwyg',
            'Wikiwyg.Preview'
        ]
    };
    wikiwyg1 = new Wikiwyg();
    wikiwyg1.createWikiwygArea(div, config);
    if (wikiwyg1.enabled)
        Wikiwyg.changeLinksMatching(
            'href', /edit/, function() { wikiwyg1.editMode(); return false }
        );
}
</script>

To get this:

Edit

Click the 'Edit' link above to edit this area.

Note that the toolbar is different than the default one:

Only the buttons specified show up now
A '|' adds a separator image
A '/' forces a line break in toolbar
There is no 'Wikitext' mode
Doubleclick to edit is disabled

Custom Toolbar and Custom Wikitext Markup

<script>
window.onload = function() {
    var div2 = document.getElementById('example2');
    var config2 = {
        doubleClickToEdit: true,
        toolbar: {
            imagesLocation: '../../images/',
            controlLayout: [
                'cancel', '|',
                'bold', 'italic', 'strike', '|',
                'ordered', 'unordered', '|',
                'foo', 'bar'
            ],
            controlLabels: {
                foo: 'Foo Fighting',
                bar: 'Bar Hopping'
            }
        },
        modeClasses: [
            'Wikiwyg.Wikitext.Custom'
        ]
    };
    wikiwyg2 = new Wikiwyg();
    wikiwyg2.createWikiwygArea(div2, config2);
    if (wikiwyg2.enabled)
        Wikiwyg.changeLinksMatching(
            'href', /edit2/, function() { wikiwyg2.editMode(); return false }
        );
}

proto = new Subclass('Wikiwyg.Wikitext.Custom', 'Wikiwyg.Wikitext');

proto.config = Wikiwyg.Wikitext.prototype.config;
proto.config.markupRules.strike = ['bound_phrase', '---', '---'];
proto.config.markupRules.foo = ['bound_phrase', '```', '```'];
proto.config.markupRules.bar = ['bound_phrase', 'XXX', 'YYY'];

proto.do_foo = Wikiwyg.Wikitext.make_do('foo');
proto.do_bar = Wikiwyg.Wikitext.make_do('bar');
</script>

To get this:

Edit

This section uses Javascript to translate this HTML into Wikitext when you click edit. Very fast.

So first of all note that we have added a Foo and Bar button to the toolbar. There are no images for them, but you can just make your own 20x20 foo.gif and bar.gif.

This demo uses a subclass of Wikiwyg.Wikitext called Wikiwyg.Wikitext.Custom.

Other things to note:

Doubleclick to edit is on.
Strikethrough markup was changed from -this- to ---that---.

Note that instead of doing a client side translation, you could override 'Wikiwyg.Wikitext.prototype.fromHtml to simply insert wikitext that you embedded in the page yourself.