[JS]WYSIWYGエディタを実装できるシンプルで軽量なjQueryプラグイン「CLEditor」｜jQueryプラグイン・ライブラリ

[JS]WYSIWYGエディタを実装できるシンプルで軽量なjQueryプラグイン「CLEditor」

スポンサード

シンプルなWYSIWYGエディタを簡単に設置できるjQueryプラグイン CLEditor です。

各種ボタンのカスタマイズができる他、フルブラウザ対応（リサイズ）や幅固定バージョンも用意されていますのでサイトに合わせて利用できます。

※注意点としては、jQuery1.4 系で動いている点です。
jQuery のバージョンを1.7 などにすると上手く動きませんでした。

1 CLEditor のダウンロード
2 CLEditor の設置
3 WYSIWYGエディタを実装
4 WYSIWYGエディタのイメージとサンプル

CLEditor のダウンロード

以下のぺージより CLEditor のファイルをダウンロードします。

CLEditor

CLEditor の設置

ダウンロードした CLEditor ファイル一式を jQuery ファイルと一緒に<head> 内に設置します。ボタン画像なども含まれるので、cleditor/ のようなフォルダにまとめて置いた方が良いです。

<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" を指定してあげます。

<form>
<textarea id="input" name="input">This is the fixed size demo.</textarea>
</form>

WYSIWYGエディタのイメージとサンプル

イメージはこんな感じです。

そのままでも使えそうですが、ボタン画像お好みで変更できます。

[JS]WYSIWYGエディタを実装できるシンプルで軽量なjQueryプラグイン「CLEditor」

また、幅固定版とオートリサイズ版の2種類のデモを以下に用意しています。
CLEditor のデモ

スポンサード