WordPress + CKEditor + TypePad 絵文字 の導入

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の絵文字アイコンを使えるキットを出したよ: 世界中の１％の人々へ

ckeditor-for-wordpress/ckeditor/plugins/smiley/images

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

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

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
*/

/**
 * 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

投稿者紹介

株式会社ユニキャスト

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

最近のエントリ

• レポート2019.10.28ユニキャストレストランを開催しました🍳
• レポート2019.08.29社内研修ワークショップ～マシュマロ・チャレンジ～
• レポート2019.08.06Computex/InnoVEX　出展者・通訳として参加してきました。
• レポート2018.06.12Computex 2018 レポート