2012年10月20日

ckeditor でショートカットキー作成と h1 タグを挿入 insert

お願いします♪いいねとかつぶやいたりして下さい
 
ショートカットのキーコード
http://faq.creasus.net/04/0131/CharCode.html

画像をクリックしたときにダイアログ表示されるのを防ぐ
ckeditor/plugins/image/dialogs/image.jsの中身を全て削除。


http://greg.gannicott.co.uk/2011/01/18/ckeditor-associating-headings-eg-h1-with-a-keyboard-shortcuts/

とりあえず、h1のやり方のみ。

ckeditor フォルダに
/ckeditor/plugins/button-h1/

フォルダを作成し、plugin.jsファイルをその中に作成。

plugin.js
(function(){
   var a= {
      exec:function(editor){
         var format = {
            element : 'h1',
            attributes : { 'class' : 'item_body_heading_1' }
         };
      var style = new CKEDITOR.style(format);
      style.apply(editor.document);
   }
 },

 b="button-h1";
 CKEDITOR.plugins.add(b,{
    init:function(editor){
       editor.addCommand(b,a);
    }
 });
})();


config.js
CKEDITOR.editorConfig = function( config )
{
	config.extraPlugins = 'button-h1';
	 config.keystrokes = [
	 [ CKEDITOR.CTRL + 49 /*1*/, 'button-h1' ],
	 ];
};


こんな感じ。

これで ctrl +1 を押すと、 h1タグが自動挿入される。

上記を準備したあと、
自分で作ったボタンをクリックしたときに h1 タグを挿入したい。
function ExecuteCommand( commandName )
{
	
	// Get the editor instance that we want to interact with.
	var oEditor = CKEDITOR.instances.editor;

	// Check the active editing mode.
	if ( oEditor.mode == 'wysiwyg' )
	{
		// Execute the command.
		// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#execCommand
		oEditor.execCommand( commandName );
	}
	else
		alert( 'You must be in WYSIWYG mode!' );
}

//html
<input onclick="ExecuteCommand('button-h1');" type="button" value="h1タグ" />


いやー、はまった。
関連するタグ: さくらサーバー
あなたにとって有用な記事でしたか?是非ブックマークしておくことをおすすめします。
 




ライブラリを配布しちゃったり
webデザイン
Fireworks
HTMLコーディング
CSS
Dreamweaver
携帯サイト
webプログラム
PHP
正規表現
cakephp
MYSQL
javascript
webマーケティング
adwords
analytics
windows7
ショートカットキー
おすすめ情報
サイト
facebook
ライブラリ
配布
アプリ
iphone
ipad
サーバー
さくらサーバー
全ての記事を読む




トップ - 最新の記事一覧 - お問い合わせ