WYSIWYGエディタの本命NicEdit
WYSIWYGとは、What You See Is What You Getの頭文字を並べた略語です。WYSIWYGエディタとは文字の装飾や写真の配置などをユーザー側が視覚的にイメージした通りに記事をアップロードできるWEBページエディタです。CKEditor、TciyMCEなどが有名ですがいずれも有償です。無償のWYSIWYGエディタとしてはNicEditが非常に使いやすく導入も簡単です。有償エディタはWordレベルの機能が実装されていますが、NicEditではここまで機能は完全に揃ってはいません。しかし、必要な機能はほぼ揃っています。
NicEdit
NicEdit 日本語版
NicEditは日本語対応していません。日本語対応させるため株式会社CMONOSがNicEditをMITライセンスで再配布しています。以下のサイトよりダウンロードできます。
株式会社CMONOS(https://cmonos.jp/blog/2010010800/1.shtml)
NicEditの配置方法
NicEdit 日本語版の場合、上記サイトよりnicEdit_ja.zipをダウンロードします。
解凍して必要なファイル
・nicEdit.js
・nicEditorIcons.gif
以上2ファイルを任意の場所に配置します。つまりnicEditプラグインの本体はこの2ファイルだけのシンプルなものです。
サンプル
HTML
<!-- 1.NicEditライブラリ呼び出し -->
<script type="text/javascript" src="./js/nicEdit.js"></script>
<!-- 2.NicEdit呼び出し -->
<script type="text/javascript">
bkLib.onDomLoaded(function() {
new nicEditor().panelInstance('area1');
});
</script>
<!-- 3.テキストエリアタグの設置 -->
<textarea cols="50" id="area1"></textarea>
ダウンロードしたZIPファイルに含まれる「demos」フォルダ内のサンプルファイルに詳しく記述されていますので、これを参考にしてコードを書きます。