とてもシンプルなWYSIWYGエディタですよ！ Web上でテキストを入力する際に何らかのWYSIWYGエディタを備えているケースは多いです。しかし難点はそういったエディタの機能が多く、使いこなせないということです。その際にサイズが大きいので動作が重くなります。 そこで使ってみたいのがwysiwygetizeです。ぱっと見は単なるテキストエリアに見えますが、シンプルなWYSIWYG機能を提供します。

使い方

使う際のコードは以下のようになります。

$('textarea').wysiwygetize({
    buttons: {
        // values = the menu buttons labels. You can also specify which buttons you want by calling only some of them
        bold: 'B',
        italic: 'I',
        underline: 'U',
        link: 'Link',
        h1: 'H1',
        h2: 'H2',
        h3: 'H3'
    },
    viewsource: {
        display: true, // allow the viewsource feature?
        label: 'View source', // viewsource button label
        class: 'viewsource-style', // viewsource button class
        activeClass: 'active-btn' // viewsource active button class
    },
    fullscreen: {
        display: true, // allow the fullscreen feature?
        label: 'Fullscreen', // fullscreen button label
        exitLabel: 'Quit fullscreen', // quit fullscreen button label
        class: 'fullscreen-style' // fullscreen button class
    },
    style: 'dark' // change the menu appearance (dark or light)
});

ボタンの設定、ソースの表示、フルスクリーン表示そしてスタイルの4つの設定だけで使えます。

デモ

では実際に試してみます。

wysiwygetizeはとてもシンプルなWYSIWYGエディタなのでカスタマイズして使ったりするのも容易そうです。これくらい軽量で最低限の装飾で十分というケースは多いのではないでしょうか。対応ブラウザはIE8以上となっています。 wysiwygetizeはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 wysiwygetize demo Spharian/wysiwygetize