• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

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

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エディタ を実装

textareaid="input" を指定してあげます。
<form>
<textarea id="input" name="input">This is the fixed size demo.</textarea>
</form>


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

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

そのままでも使えそうですが、ボタン画像お好みで変更できます。
[JS]WYSIWYGエディタを実装できるシンプルで軽量なjQueryプラグイン「CLEditor」

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



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください