ITエンジニア/デザイナ向けにオープンソースを毎日紹介

とてもシンプルな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つの設定だけで使えます。

デモ

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

例えばこんな感じに文字を書きます。
例えばこんな感じに文字を書きます。

文字列を選択するとツールバーがフローティング表示されます。
文字列を選択するとツールバーがフローティング表示されます。

フルスクリーン表示にするとウィンドウ枠いっぱいにテキストエリアが広がります。
フルスクリーン表示にするとウィンドウ枠いっぱいにテキストエリアが広がります。

ソース表示。divタグがちょっと多いかもしれませんがシンプルなコードです。
ソース表示。divタグがちょっと多いかもしれませんがシンプルなコードです。

wysiwygetizeはとてもシンプルなWYSIWYGエディタなのでカスタマイズして使ったりするのも容易そうです。これくらい軽量で最低限の装飾で十分というケースは多いのではないでしょうか。対応ブラウザはIE8以上となっています。

wysiwygetizeはjQuery/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

wysiwygetize demo

Spharian/wysiwygetize

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2