WYSIWYG“Lite Editor”のカスタマイズ

WYSIWYG“Lite Editor”のカスタマイズ

もしもドロップシッピング用システムを開発してますが、管理ページの本文入力(商品紹介)にWYSIWYGエディタがあった方がいいだろうと言うことでメモついでにご紹介。

WYSIWYGとは

WYSIWYGアクロニム: ウィジウィグ)とは、コンピュータユーザインタフェースに関する用語で、ディスプレイに現れるものと処理内容(特に印刷結果)が一致するように表現する技術。What You See IWhat You Get(見たままが得られる)の頭文字をとったものであり、「is」を外したWYSWYG(ウィズウィグ)と呼ばれることもある。

近年では、コンテンツ管理システムでも使われるようになり、この場合は、入力画面と出力画面が一致するよう表現する技術を指す。

ウィキペディア

と言うことでこの記事ではブラウザを使うシステムの入力・編集部分で「文字を少しいじれると便利だな」と言うことで、WEBサイトのフォーム用のものを説明しています。

Lite Editor とは

で、色々とググって見つけたのがLite Editorというもの。今まで全く知らなかったのですがa-blog cmsというcmsを提供されているappleple社さんという会社が開発されたエディタとのこと。

純国産なので解んないことがあったら日本語で質問して日本語で答えをもらえると楽だなという適当な気持ちで選んでみました。

へんなhtmlタグを挿入しないよう開発されたそうで、確かにとってもシンプルで好感が持てます。それに、この手の複雑なものを組み込むとお客さん(クライアント)側で凝った入力をさせてしまうことも考えながら制作しないとイケナイので大変なんですが、これはデフォルトがすごくシンプルで必要な機能を足していく様な感じ。好き。

カスタマイズ例

ただこのまま使うより打ち消し線とか、見出しタグ(<h2>とか<h3>)なんかを入力出来た方がいいと思ったので少しカスタマイズしました。

Lite Editorのページからダウンロードして「examples」内に新規htmlを作成して以下のコードを貼り付けてみて下さい。

これだけです。こういうのを設置したいと思う人は私より遙かにJavaScriptやhtmlに精通しているので説明は不要ですね。じゃあなんでこんな記事を書くんだと言われれば、私が解らなくなるから。

まとめ

とっても使える素敵なWYSIWYGエディタですが心配も。ここまでガッツリcssでデザインされていると制作中のシステムに組み込んだときどうなるのか…。ダークモードとか余計なことしてしまってるし。少しテンション下がり気味の私でした。