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

スポンサードリンク

ECサイトで商品の説明文などを登録する方たちが

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

要望が上がってきたので、簡単に設置できる

jQUeryプラグインのWYSIWYGエディタ『CLEditor』を導入しました。

CLEditor

スポンサードリンク

入れたいものの条件

要望があったものでは、以下のものです。

• フォントサイズが変えられるもの
• フォントカラーが変えられるもの

この２つの条件を満たすもので

尚且つ、使う人が簡単に操作できるものを探していたら、

『CLEditor』というものを見つけて、

内容を確認したら使い勝手がよさそうなものがだったので導入しました。

CLEditorのサイトへ行って「CLEditor Version 1.3.0」をダウンロード

CLEditorのサイトへいって

赤枠部分から『CLEditor』をダウンロードします。

スポンサードリンク

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

今回は、【CLEditor】というフォルダ名で

下記の使うファイルを作成した【CLEditor】フォルダに入れます。

• imagesフォルダ
• jquery.cleditor.js（またはjquery.cleditor.min.js）
• jquery.cleditor.css

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は今回書いたjavascriptより先に書いて読み込んでおいてください。

スポンサードリンク

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

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

先ほど指定したクラスを使用するテキストエリアに記述します。

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

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

これだけです。

めっちゃ簡単ですね。

こんなに簡単に設置できるなら便利ですよね。

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

スポンサードリンク

『CLEditor』導入のまとめ

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

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

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

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

エディター自体は他にも色々ありましたが

色々ありすぎてここでは全部載せきれませんw

別の時に使ってみようかと思います。

スポンサードリンク