mani-lab WEB制作のメモ

PHPを中心にWEB制作での備忘録や、自分で作ったプラグインなど公開しています。
 

2013/08/10

[baserCMS]エディタで絵文字を使う。

Posted by: goichi


絵文字といっても画像です。CKeditorで絵文字を使う方法が、色々なところに転がっていたので、baserCMSで出来るかどうかのメモにして残しておきます。(テンプレート等で、ガラケー時代からある携帯キャリア別の絵文字を使う場合は、他の方のブログにKtai-Libralyを使った情報があります。)

emoji_image...

 

参考サイト

FCKeditor Japan 絵文字画像のセット(Smily_TypePad_Kit1.zip)をダウンロードできます。

ユニキャストラボ WordPress向けの記事です。参考になりました。

 

1.CKeditorをappフォルダ側へコピーする

もともとbaserフォルダ側にあるCKeditorのファイル群を、appフォルダ側に移します。baserフォルダ側で操作しても反映しますが、今後のアップデートを考えると、app側で処理したほうが問題が少なさそうです。

/baser/vendors/js/ckeditor/

上の中に入っているすべてのファイルを、以下にコピーします。(必要最低限のものだけでもイケるかも?)

/app/vendors/js/ckeditor/

(デフォルト状態だと、/app/vendors/フォルダは空だと思いますので、/js/フォルダを作って、その中にckeditorフォルダをコピーしてください。)

 

2.デフォルトの画像を差し替える

コピーし終わったら、FCKeditor JapanでダウンロードしたSmily_TypePad_Kit1.zipを解凍します。この中で必要になるのは、絵文字の画像だけですので、解凍して出てくるフォルダを開いて、以下のフォルダを見つけてください。

/Smily_TypePad_Kit1/mt-static/plugins/FCKeditor/fckeditor/editor/images/smiley/typepad/

上の「typepad」フォルダに絵文字の画像データが入っていますので、この絵文字データを全て以下の場所にアップロードします(画像データのみアップします。フォルダごとではないので注意。)。(一部同名のファイルは上書きしてOKです)

/app/vendors/js/ckeditor/plugins/smiley/images/

 

3.設定ファイルを書き換える

画像の差替えまで終わったら、あとはCKeditorが読み込む設定ファイルを変更します。設定ファイルは以下の場所にあります。

/app/vendors/js/ckeditor/config.js

ユニキャストラボを参考にして以下のように書き換えます。

/*
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	
    config.resize_minWidth = 450;
  
    config.smiley_images = [
    'sun.gif','cloud.gif','rain.gif','snow.gif','thunder.gif','typhoon.gif','mist.gif','sprinkle.gif','aries.gif','taurus.gif',
    'gemini.gif','cancer.gif','leo.gif','virgo.gif','libra.gif','scorpius.gif','sagittarius.gif','capricornus.gif','aquarius.gif','pisces.gif',
    'sports.gif','baseball.gif','golf.gif','tennis.gif','soccer.gif','ski.gif','basketball.gif','motorsports.gif','pocketbell.gif','train.gif',
    'subway.gif','bullettrain.gif','car.gif','rvcar.gif','bus.gif','ship.gif','airplane.gif','house.gif','building.gif','postoffice.gif',
    'hospital.gif','bank.gif','atm.gif','hotel.gif','24hours.gif','gasstation.gif','parking.gif','signaler.gif','toilet.gif','restaurant.gif',
    'cafe.gif','bar.gif','beer.gif','fastfood.gif','boutique.gif','hairsalon.gif','karaoke.gif','movie.gif','upwardright.gif','carouselpony.gif',
    'music.gif','art.gif','drama.gif','event.gif','ticket.gif','smoking.gif','nosmoking.gif','camera.gif','bag.gif','book.gif',
    'ribbon.gif','present.gif','birthday.gif','telephone.gif','mobilephone.gif','memo.gif','tv.gif','game.gif','cd.gif','heart.gif',
    'spade.gif','diamond.gif','club.gif','eye.gif','ear.gif','rock.gif','scissors.gif','paper.gif','downwardright.gif','upwardleft.gif',
    'foot.gif','shoe.gif','eyeglass.gif','wheelchair.gif','newmoon.gif','moon1.gif','moon2.gif','moon3.gif','fullmoon.gif','dog.gif',
    'cat.gif','yacht.gif','xmas.gif','downwardleft.gif','phoneto.gif','mailto.gif','faxto.gif','info01.gif','info02.gif','mail.gif',
    'by-d.gif','d-point.gif','yen.gif','free.gif','id.gif','key.gif','enter.gif','clear.gif','search.gif','new.gif',
    'flag.gif','freedial.gif','sharp.gif','mobaq.gif','one.gif','two.gif','three.gif','four.gif','five.gif','six.gif',
    'seven.gif','eight.gif','nine.gif','zero.gif','ok.gif','heart01.gif','heart02.gif','heart03.gif','heart04.gif','happy01.gif',
    'angry.gif','despair.gif','sad.gif','wobbly.gif','up.gif','note.gif','spa.gif','cute.gif','kissmark.gif','shine.gif',
    'flair.gif','annoy.gif','punch.gif','bomb.gif','notes.gif','down.gif','sleepy.gif','sign01.gif','sign02.gif','sign03.gif',
    'impact.gif','sweat01.gif','sweat02.gif','dash.gif','sign04.gif','sign05.gif','slate.gif','pouch.gif','pen.gif','shadow.gif',
    'chair.gif','night.gif','soon.gif','on.gif','end.gif','clock.gif','appli01.gif','appli02.gif','t-shirt.gif','moneybag.gif',
    'rouge.gif','denim.gif','snowboard.gif','bell.gif','door.gif','dollar.gif','pc.gif','loveletter.gif','wrench.gif','pencil.gif',
    'crown.gif','ring.gif','sandclock.gif','bicycle.gif','japanesetea.gif','watch.gif','think.gif','confident.gif','coldsweats01.gif','coldsweats02.gif',
    'pout.gif','gawk.gif','lovely.gif','good.gif','bleah.gif','wink.gif','happy02.gif','bearing.gif','catface.gif','crying.gif',
    'weep.gif','ng.gif','clip.gif','copyright.gif','tm.gif','run.gif','secret.gif','recycle.gif','r-mark.gif','danger.gif',
    'ban.gif','empty.gif','pass.gif','full.gif','leftright.gif','updown.gif','school.gif','wave.gif','fuji.gif','clover.gif',
    'cherry.gif','tulip.gif','banana.gif','apple.gif','bud.gif','maple.gif','cherryblossom.gif','riceball.gif','cake.gif','bottle.gif',
    'noodle.gif','bread.gif','snail.gif','chick.gif','penguin.gif','fish.gif','delicious.gif','smile.gif','horse.gif','pig.gif',
    'wine.gif','shock.gif'
  ] ;
  config.smiley_columns = 23 ;


};

以上で作業は完了です。ブラウザで確認してみてください。ただし、ブラウザキャッシュが残っていると、設定前の情報が読み込まれるので、ブラウザキャッシュを消し去ってからお試しください。

 

 

 

カテゴリ:


Tags: カスタマイズ Ckditor BaserCMS

 

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

サイト内検索