WYSIWYGエディタの本命NicEdit

WYSIWYGエディタの本命NicEdit

 WYSIWYGとは、What You See Is What You Getの頭文字を並べた略語です。WYSIWYGエディタとは文字の装飾や写真の配置などをユーザー側が視覚的にイメージした通りに記事をアップロードできるWEBページエディタです。CKEditor、TciyMCEなどが有名ですがいずれも有償です。無償のWYSIWYGエディタとしてはNicEditが非常に使いやすく導入も簡単です。有償エディタはWordレベルの機能が実装されていますが、NicEditではここまで機能は完全に揃ってはいません。しかし、必要な機能はほぼ揃っています。


NicEdit

 NicEditは以下のサイトからダウンロードできます。OSSのMITライセンスで運用されています。


NicEdit(http://nicedit.com/)


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」フォルダ内のサンプルファイルに詳しく記述されていますので、これを参考にしてコードを書きます。

 


 Copyright IT SKILL MAP. All rights reserved.