カテゴリー
ckeditor

ckeditorのボタンを増やしてみよう(ckeditorカスタマイズ)

おはようございます!rmascoです。

さて!好評の(?)ckeditorカスタマイズ第3弾です!

過去の記事はこちらからどうぞ!

ckeditorカスタマイズ方法(その1)
ckeditorをカスタマイズするのに必要な情報や簡単な例を書いた記事です


リンクなどの機能で表示されるダイアログをカスタマイズ方法を書いた記事です

ckeditorカスタマイズ方法その3の内容

ckeditorについているボタン。
非常に多くのボタンがついていますが、
普段使わねーってボタンもあるかと思います。

ボタンの表示非表示に関しては、設定ファイルを変更するだけで、
簡単に表示非表示を変えることができます。

じゃあ、増やしたい時はどうでしょう?
たとえば

  • youtubeのIDを入れると、動画を表示するタグが挿入される
  • 現在時刻や日にちを挿入できる
    etc・・・
 
ckeditorではeditorの動き等以外はすべてpluginという仕組みになっています。
ckeditorをダウンロードして、pluginsの中を見てみましょう。
 
linkやimageというフォルダがあるかと思います。
これが実際はリンク導入機能だったり、画像挿入機能だったりします。
 
・・・ということは!
pluginの形で作成すれば、機能追加できるのでは!?
 
正解です!!
 
今日は現在日時を挿入できる機能を追加してみようと思います。
 

ckeditorにボタンを追加してみよう!

ボタンの追加のサンプルは、ダウンロードしたファイルの中に「_samples」というフォルダがあり、その中の「api_dialog.html」にあるので、そのファイルをコピーして追加してみようと思います。
 
色々と書いてありますが、まず注目すべきは下記になります。
 
 
editor.on( 'pluginsLoaded', function( ev ){
〜中略〜
});
プラグインが読み込まれた後に呼び出されるイベントを宣言しています。
{}の中に追加したい内容を実装します。
 
{}の中に今回日付を入力するためのボタンを作成します。
 
editor.on( 'pluginsLoaded', function( ev ){
〜中略〜
// ボタンが押されたときに実行するコマンドの定義
editor.addCommand( 'nowCmd', {
exec : function( editor ) {
var nowElement = editor.document.createElement( 'div' );
nowElement.setText( new Date() );
editor.insertElement( nowElement );
}
});
// ボタンを追加する
editor.ui.addButton( 'Now', {
label : 'Now', command : 'nowCmd'
} );
});
 
 
次にボタンを表示させるための記述を追記します。
 
var editor = CKEDITOR.replace( 'editor1',{
toolbar : [ [ 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike','-','Link', '-', 'Now' ] ]
});
このファイルをブラウザで見ると、このようになります。
Nowというボタンが一番右に追加されている
Nowのボタンを押してみましょう!
1行目に現在時刻が表示された
 
おお〜!!
表示されました
 
今回は時間の関係上、HTMLに直接実装してみました。
いかがでしょうか。こんなボタン、あんなボタン、追加してみたくなりましたか?
 
カテゴリー
ckeditor

ckeditorのダイアログの項目を変えちゃおう(ckeditorカスタマイズ)

こんばんわ!rmascoです。

ckeditorカスタマイズ方法シリーズ第2弾です。

過去記事はこちらからどうぞ!

ckeditorカスタマイズ方法(その1)
ckeditorをカスタマイズするのに必要な情報や簡単な例を書いた記事です

ckeditorカスタマイズ方法その2の内容

ckeditorカスタマイズ方法のその2としてお伝えするのは、
ダイアログの表示の変更です。

ckeditorでは、画像の挿入やリンクの挿入など、
入力が発生するような機能はボタンを押下すると、
ダイアログが表示されます。

しかし、実際使用しない機能があったり、
このボタン押したときにこのイベント呼びたいんだよねってことが多々あります。

今日はこのダイアログのカスタマイズについて書いていこうと思います。

ダイアログのカスタマイズをやってみよう

ダイアログのカスタマイズについては、公式サイトにも情報がありました。
Developers_Guide/Dialog_Customization

またしても英語です。。。
大丈夫です!私も英語はわかりませんが、なんとなくざっくり適当に解説していきます


// 最初にダイアログの定義時のイベントにフックする関数を定義する
CKEDITOR.on( 'dialogDefinition', function( ev ){
// 表示されたダイアログの名前を取得
var dialogName = ev.data.name;
// 表示されたダイアログの定義を取得
var dialogDefinition = ev.data.definition;

// リンクのダイアログの場合
if ( dialogName == 'link' ){
// ダイアログコンテンツから、advanced(高度な設定)を削除する
dialogDefinition.removeContents( 'advanced' );

// ダイアログコンテンツから、target(ターゲット)を削除する
dialogDefinition.removeContents( 'target' );
}
});
これだけ?そう!これだけです(定番)
 
順番に説明します。
 
 
まずイベント「dialogDefinition」をフックします。
 
CKEDITOR.on( 'dialogDefinition', function( ev )
このイベントはダイアログが表示される機能すべてで呼び出されます。
画像挿入、リンク挿入、テーブル挿入、絵文字挿入、etc・・・
このイベント内で、どの機能のダイアログかを絞り込むのが、下記コードになります。
 
// 表示されたダイアログの名前を取得
var dialogName = ev.data.name;

// リンクのダイアログの場合
if ( dialogName == 'link' ){
(〜中略〜)
}
dialogNameにリンク挿入ならlink、画像挿入ならimage、絵文字ならsmilyといった具合で取得ができます。
次にその名前を使って絞り込みます。
 
絞り込みが終わったら、次はそのダイアログで表示される中身を変更してみます。
まず下記でダイアログの定義オブジェクト(?)を取得します。
 
 
// 表示されたダイアログの定義を取得
var dialogDefinition = ev.data.definition;
 
 
取得した定義オブジェクトには、このダイアログはこんなタブ(コンテンツ)があり、その中にはこんなボタンがある、テキストがある、というような情報にアクセスすることができます。
アクセスして、タブ(コンテンツ)を削除しているのが下記です。
 
 
// ダイアログコンテンツから、advanced(高度な設定)を削除する
dialogDefinition.removeContents( 'advanced' );
// ダイアログコンテンツから、target(ターゲット)を削除する
dialogDefinition.removeContents( 'target' );
 
実際にこのコードを実行すると、こうなります。
カスタマイズ前
ターゲットと高度な設定のタブ(コンテンツ)があります
 
カスタマイズ後
ターゲットと高度な設定のタブ(コンテンツ)が削除されました
 
おそらくこんな大胆なカスタマイズを行うことはないかと思いますが、
ckeditorはすごく簡単にHTMLを意識することなくかけてしまいますが、
本当にパソコンの初心者でエクセルやワードにも
あまり触れたことがないという人にとっては、
機能としては多いかと思います。
 
今回のようなカスタマイズをすることによって、機能を制限し、
実際に迷わずに操作できるようにしてあげるのも良いと思います。
 
ckeditorはドキュメントがあるので、全体像をなんとなく把握できますが、
やはり細かいところはソースを読むしかないのも現状です。
 
また機会があれば、ckeditorに関する情報をお伝えします!
カテゴリー
ckeditor

ckeditorでボタンが押された時のイベントを取得したい(ckeditorカスタマイズ)

こんばんわ!rmascoです。

最近寒くて朝起きるのが辛いな〜と思い、
エアコンを起きる1時間前に電源が入るようセットしたら、
暖かくて2度寝しましたアワ((゚゚дд゚゚ ))ワワ!!

ckeditorカスタマイズ方法(その1)の概要

さて、今回からwysiwygエディターであるckeditorのtips紹介をしたいと思います。
wysiwygってなんぞや?という説明は他のサイトに任せるとして、
ここではckeditorのカスタマイズについて書いていきたいと思います。

ckeditorの詳しいカスタマイズ方法って、なかなかないんですよね。
ボタンの表示非表示だったりはいろんな記事が紹介しているんですが、
このイベントをフックするとか、モードが切り替えられたらとか、
少し突っ込もうとすると、情報がほとんど見つからない状態です。

私はカスタマイズする必要が出て、やっておりますが、
これをせっかくだから共有してみよう!というのが、この記事を書くきっかけです。

ckeditorカスタマイズ始め!

それでは!
まず、カスタマイズする上で欠かせないのが、JavaScriptAPIのページです。
ckeditor – JavaScript API

ここにはイベント名や、存在するメソッドなど貴重な情報が色々書いてあります。
大体ここで調べて、調べたことを実装してみるというのが定番の手順化してきています。
英語なので、どうしても拒否反応が出てしまいますが、少しだけソースも書いてあるので、
苦手な人はソースだけ読んでもいいかもしれません。

今回はwysiwygのボタンが押された時のイベントをキャッチする必要があり、
そこらへんを調べたので、書いていきます。

  • まずイベントを取得するための下準備を行います。
CKEDITOR.on( 'instanceReady', function( ev ){
    var editor = ev.editor;
} )
  • ボタンを押した時のイベントをフックしたい時(イベント実行前)
CKEDITOR.on( 'instanceReady', function( ev ){
    var editor = ev.editor;
    editor.on( 'beforeCommandExec', function( ev ){
        // 押下されたボタンイベント名を表示
        alert(ev.data.name);
    } );
});
  • ボタンを押した時のイベントをフックしたい時(イベント実行後)
CKEDITOR.on( 'instanceReady', function( ev ){

var editor = ev.editor;
editor.on( ‘afterCommandExec’, function( ev ){
// 押下されたボタンイベント名を表示
alert(ev.data.name);
} );
});

なんだよ、これだけかよと思われた方。
そうです!!これだけなんです。
ckeditorはAPIが非常に良くできており、
ckeditor自体のソースを修正しなくてもイベント等を拾ったり、
カスタマイズを行うことができます。

ckeditorは日々進歩しています。
使える機能が増えたり、バグフィックスだったり。
上記のようなAPI経由でカスタマイズを行なっていれば、
ほぼ何もしなくてもckeditorだけ入れ替えてしまえば、
このような更新に対応できてしまいます。
運用面、保守面を考えた上でも非常に効率的です。

もちろんAPI自体に修正があれば、カスタマイズ部分も修正が必要ですが。。。

今回はざっくりした感になってしまいましたが、
次回はもう少し詳しく説明できればと思います。

この記事を読んでckeditorを使ってみたいという方は、
itboyさんの記事が詳しかったので参考にしてみてください。
高機能でカスタマイズも容易なWYSIWYGエディタ [CKEditor]

他にもたくさんあるかと思いますが、時間がないので載せれませんでした。
もしこのページもわかりやすいよというページがあれば、
コメントなどに書いてもらえればと思います。

こんな部分も知りたいという方もコメント頂ければ、
次回の記事に載せるよう精進します(^^♪