jQueryプラグインのWYSIWYGエディタ 「CLEditor」を導入しました。

jQuery

jQuery

仕事で商品の説明文などを登録する方たちが

自分たちで文字を装飾できるようにと

WYSIWYGエディタを導入しました。

jQueryプラグイン「CLEditor

スポンサードリンク

入れたいものの条件

・フォントサイズが変えられるもの

・フォントカラーが変えられるもの

この2つの条件を満たすものをさがしていたら、

「CLEditor」がよさそうなものがあったので導入しました。

1.CLEditorのサイトへ行って「CLEditor Version 1.3.0」をダウンロードします。

CKEditer-ダウンロード

CKEditer-ダウンロード

2.ダウンロードしたフォルダを解凍してアップロードする

今回は、「CLEditor」という名前で

下記の使うファイルをフォルダごと入れています。

※解凍したフォルダの中身の
・imagesディレクトリ
・jquery.cleditor.js(またはjquery.cleditor.min.js)
・jquery.cleditor.css

ファイル構成

ファイル構成


※こんな感じです。

それぞれを任意の場所に置く場合はcssファイルを調整しなければなりません。

3.head内でファイルを読み込む

<link rel="stylesheet" type="text/css" href="CLEditor/jquery.cleditor.css" />
<script type="text/javascript" src="CLEditor/jquery.cleditor.min.js"></script>
<script type="text/javascript">
$(function() {
	$(".editor").cleditor();
});
</script>

※クラス名editorは使用環境によって変更してください。
 今回は複数の場所で使いたかったのでクラス名で設定しています。
※もちろん、jQueryは先に読み込んでおいてください。

4.テキストエリアに設定したクラス名を記述する

<textarea class="editor" name="comment" cols="60" rows="8"></textarea>

5.ブラウザで使えるか確認する

CKEditer

CKEditer


※EC CUBEに使ったので画像はEC CUBEの管理画面です。

以上です。

これで、いろいろ作業をしやすくできると思います。

jQueryを使ったエディタはほかにも以下のようなものがあります。

CKEditor
→こちらは、フォントに色を付けられなかったので断念しました。

jHtmlArea
→こちらは、どうも有料?みたいなので断念

wysihtml5
→こちらは、HTML5だったので断念(EC CUBE2.11.4はXHTMLなので)

まだまだ、ありましたが別の時に使ってみようかと思います。

スポンサードリンク

コメントを残す

サブコンテンツ

このページの先頭へ