シンプルなWYSIWYGエディタを簡単に設置できるjQueryプラグインCLEditorです。
各種ボタンのカスタマイズができる他、フルブラウザ対応（リサイズ）や幅固定バージョンも用意されていますのでサイトに合わせて利用できます。
※注意点としては、jQuery1.4系で動いている点です。jQueryのバージョンを1.7などにすると上手く動きませんでした。
CLEditor のダウンロード
以下のぺージよりCLEditorのファイルをダウンロードします。CLEditor
CLEditor の設置
ダウンロードしたCLEditorファイル一式をjQueryファイルと一緒に<head>内に設置します。ボタン画像なども含まれるので、cleditor/のようなフォルダにまとめて置いた方が良いです。|
1 2 3 4 5 6 7 8 |
<link rel="stylesheet" href="./cleditor/jquery.cleditor.css"> <script src="./jquery.min.js"></script> <script src="./cleditor/jquery.cleditor.js"></script> <script> $(document).ready(function() { $("#input").cleditor()[0].focus(); }); </script> |
WYSIWYGエディタ を実装
textarea に id="input"を指定してあげます。
|
1 2 3 |
<form> <textarea id="input" name="input">This is the fixed size demo.</textarea> </form> |
WYSIWYGエディタ のイメージとサンプル
イメージはこんな感じです。そのままでも使えそうですが、ボタン画像お好みで変更できます。
![[JS]WYSIWYGエディタを実装できるシンプルで軽量なjQueryプラグイン「CLEditor」](https://webantena.net/wp-content/uploads/2013/01/cleditor01.png)
また、幅固定版とオートリサイズ版の2種類のデモを以下に用意しています。
CLEditor のデモ
コメント