Custom Toolbar - Wysiwyg/Preview Modes

<script>
window.onload = function() {
    var div = document.getElementById('example1');
    var config = {
        doubleClickToEdit: false,
        imagesLocation: '../../images/',
        toolbarLayout: [
            '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,
        imagesLocation: '../../images/',
        toolbarLayout: [
            'cancel', '|',
            'bold', 'italic', 'strike', '|',
            'ordered', 'unordered', '|',
            'foo', 'bar'
        ],
        modeClasses: [
            'Wikiwyg.Wikitext.Custom',
        ],
        toolbarLabels: {
            foo: 'Foo Fighting',
            bar: 'Bar Hopping'
        }
    };
    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');
proto.fromHtml = function() {
    this.textarea.value = '\
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.\n\
\n\
This demo uses a subclass of Wikiwyg.Wikitext called \
Wikiwyg.Wikitext.Custom.\n\
\n\
Other things to note:\n\
* Doubleclick to edit is on.\n\
* Strikethrough markup was changed from -this- to ---that---.\n\
'

}
</script>

To get this:

Edit

Note that the clientside HTML to Wikitext converter is not finished, so this text will become something else when you edit it. This will be remedied very soon.

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.