CKEditorのスマイリー画像を追加する方法。

2011.03.20 / Notes

CMS
Drupal

ブログやCMSなどでWYSIWYGエディタはよく利用されていますが、オープンソースのCMSであるdrupalでも、モジュールとしてCKEditorを利用することができます。drupalにはいくつかのWYSIWYGエディタをモジュールとして利用できますが、自分的にはCKEditorが一番でしっくりきます。

CKEditorには機能の一部として、スマイリーアイコン画像を本文中に使うことができますが、標準のアイコンは種類が少なく、絵柄も日本向けではないので、あまり実用性はないように思います。

このスマイリーアイコンをカスタムで追加するには、下記のようにアイコン画像ファイルを指定のフォルダに追加し、ソースコードに画像のファイル名を記述することで、アイコン画像を追加することができます。

追加するアイコンの画像ファイルは、下記のフォルダに格納します。
ckeditor/plugins/smiley/images

追加した画像ファイルをCKEditorに登録するために、次の2カ所に記述をします。いずれも配列として続けて追加します。
ckeditor/_source/plugins/smiley/plugin.js

CKEDITOR.config.smiley_images = [
	'regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif',
	'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif',
	'devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif',
	'broken_heart.gif','kiss.gif','envelope.gif'];

CKEDITOR.config.smiley_images = [

'regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif',

'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif',

'devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif',

'broken_heart.gif','kiss.gif','envelope.gif'];

ckeditor/ckeditor.js

i.smiley_images=['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif','embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif','test.gif'];

i.smiley_images=['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif','embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif','test.gif'];

以上でCKEditorのスマイリーアイコンに、カスタムの画像を追加することができます。

また必須ではないですが、画像のalt属性、title属性として利用するための、説明文も追加することもできます。
ckeditor/_source/plugins/smiley/plugin.js

CKEDITOR.config.smiley_descriptions =
	[
		'smiley', 'sad', 'wink', 'laugh', 'frown', 'cheeky', 'blush', 'surprise',
		'indecision', 'angry', 'angle', 'cool', 'devil', 'crying', 'enlightened', 'no',
		'yes', 'heart', 'broken heart', 'kiss', 'mail'
	];

CKEDITOR.config.smiley_descriptions =

[

'smiley', 'sad', 'wink', 'laugh', 'frown', 'cheeky', 'blush', 'surprise',

'indecision', 'angry', 'angle', 'cool', 'devil', 'crying', 'enlightened', 'no',

'yes', 'heart', 'broken heart', 'kiss', 'mail'

];

ckeditor/ckeditor.js

i.smiley_descriptions=['smiley','sad','wink','laugh','frown','cheeky','blush','surprise','indecision','angry','angle','cool','devil','crying','enlightened','no','yes','heart','broken heart','kiss','mail']

1	i.smiley_descriptions=['smiley','sad','wink','laugh','frown','cheeky','blush','surprise','indecision','angry','angle','cool','devil','crying','enlightened','no','yes','heart','broken heart','kiss','mail']

先に追加した画像ファイル名の配列と同じ順番で、説明文を追加します。

CKEditor