2012-02-18 28 views
2

CKeditorの使用コンボボックスなどから少量のhtmlコードを簡単に挿入する方法を提供したいと考えています。これはプラグインなしで可能ですか、これに対して既存のプラグインはありますか?ckeditorプラグインのコードスニペット?

例:

Toolbar:[ ][ ] [comboBox] 
       |article image   | => (inserts <img src="aimage/{{id}}"/> 
       |full-width-2col-table | => (inserts <table width="100%"><tr>.. 

({{idは}} ...アヤックスに置き換えられますが、それはまた別の話だ)

に関して、

答えて

1

私は同様の問題に取り組んでいました数日前に、私は私が作ったプラグインを取り除いた。

"myinsert"という名前のCKプラグインディレクトリにフォルダを作成します。 plugin.jsというファイルを作成し、その中に次のように貼り付けます。

CKEDITOR.plugins.add('myinsert', 
{ 
init: function(editor) 
{ 
    editor.addCommand('insertMycode', 
     { 
      exec : function(editor) 
      {  
       var timestamp = new Date(); 
       editor.insertHtml('Some Code Here.'); 
      } 
     }); 


    editor.ui.addButton('Mycode', 
    { 
     label: 'Insert Timestamp', 
     command: 'insertMycode', 
     icon: this.path + 'tag.gif' 
    }); 
} 
}); 

あなたはそれ以外のボタンが正しく表示されません、そのディレクトリ内のアイコンを含める必要があります。

次に、スクリプトでこの場所、あなたのエディタを呼び出すために:たとえばextraPlugins : 'myinsert', を:それはかもしれどこ

<script type="text/javascript"> 
CKEDITOR.replace('editor1', { 
    extraPlugins : 'myinsert', 
    toolbar : 'EditPost', 
    uiColor : '#BBB', 
}); 
</script> 

それからちょうど、あなたのツールバーの設定に関数名を追加します。

{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About', 'Mycode' ] } 

関数またはフォルダの名前を変更する場合は、名前が同じである必要があることを確認してください。また、ツールバーに入れた名前は、名前に一致する必要があります。editor.ui.addButton()

+0

美しいです。本当にありがとう! – Teson

関連する問題