WordPress + CKEditor + TypePad 絵文字 の導入


この記事の所要時間: 957
TinyMCE 版の奴は TinyMCE 自体に IE に対する深刻な不具合があるにも関わらず再現せずとしてチケットをクローズさせる始末なので WYSIWIG エディタとして有名な CKEditor (FCKEditor) と TypePad 絵文字画像を WordPress に導入することを検討する。

注意! CKEditor と FCKEditor には全く互換性がありません。

Internet Explorer 7/8 w/TinyMCE, insert position bug | drupal.org

CKEditor For WordPress の導入

普通に plugins フォルダに上げればいいだけ。有効化するのを忘れずに。

WordPress › CKEditor For WordPress « WordPress Plugins

CKEditor に TypePad 絵文字画像を導入する

画像のダウンロードおよび置き換え

絵文字画像は有名な TypePad が利用可能です。クリエイティブ・コモンズと GPL のデュアルライセンスだから GPL クレジット埋めこんであれば OK なのかな?

TypePadの絵文字アイコン画像と、携帯表示モジュールをフリー(自由)ライセンスで公開

次のところから絵文字データまるごとダウンロードしてください。 (Smily_TypePad_Kit1.zip)

今日のMovable Type 4: FCKeditorでTypePadの絵文字アイコンを使えるキットを出したよ: 世界中の1%の人々へ

の中身を全部以下のフォルダに入っている画像で置き換えてください。

ckeditor-for-wordpress/ckeditor.config.js の編集

/*
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
<h2 id="hs_bcaf3e3713f70dfbbe671e467a836e9a_header_0">/</h2>

/**
 * Documentation:
 * http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html
 */

CKEDITOR.editorConfig = function(config) {
	// The minimum editor width, in pixels, when resizing it with the resize handle.
	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 ;

  // ...

	// mediaembed plugin
	// config.extraPlugins += (config.extraPlugins ? ',mediaembed' : 'mediaembed' );
	// CKEDITOR.plugins.addExternal('mediaembed', ckeditorSettings.pluginPath + 'plugins/mediaembed/');
};

これで OK のはず。

参考

CKEDITOR.config – CKEditor 3 JavaScript API Documentation

投稿者紹介

株式会社ユニキャスト
私たちは、テクノロジに魅せられた個性あふれるメンバーによって構成された茨城県日立市に本社を構えるベンチャー企業です。
”テクノロジを通して「驚き」と「感動」を創造し、人々の「夢」と「笑顔」を支えます。” の経営理念をモットーに明るい未来を描き、ワクワクする企画提案を続けて参ります。

人気の記事

コメント

  1. [...] WordPress + CKEditor + TypePad 絵文字 の導入 [...]

  2. HARU より:

    はじめまして。

    CKEditorのsmileyの絵文字をTypePadの絵文字アイコン変更したく
    探していたらこちらのサイトをみつけました。

    もしよければ、MTの 絵文字教えていただけないでしょうか

    お手数おかけしますが、
    お返事お待ちしております。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

PAGE TOP