Railsで使ってるckeditorにボタン追加する
したいこと
wordpressのadd quick tagみたいにボタン押すとhtmlがテキストエリアに入るようにしたい
英語ばっかだったから日本語でメモ
ckedior
gem
リファレンス
やり方
app/assets/javascripts/ckeditor/config.js
CKEDITOR.editorConfig = function( config ) { config.extraPlugins = 'defaulttable'; config.toolbar = 'MyToolbar'; config.toolbar_MyToolbar = [ ['Defaulttable'], [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ], [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ], [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ], [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ], '/', ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ], [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ], [ 'Link', 'Unlink', 'Anchor' ], '/', [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ], [ 'Styles', 'Format', 'Font', 'FontSize' ], [ 'TextColor', 'BGColor' ], [ 'Maximize', 'ShowBlocks' ], [ '-' ], [ 'About' ], [ 'car-table' ] ]; };
config.extraPlugins
で追加するプラグインの名前(プラグインのjsファイルを置くディレクトリ名になる)を指定
config.toolbar_MyToolbar
の一番初めに'Defaulttable
を追加
app/assets/javascripts/ckeditor/plugins/defaulttable/plugin.js
ディレクトリに気をつける。
CKEDITOR.plugins.add('defaulttable', { init: function (editor) { var pluginName = 'defaulttable'; editor.ui.addButton('Defaulttable', { label: 'My New Plugin', command: 'InsertTable', icon: 'http://www.hogehoge.com/images/hoge.png' }); var cmd = editor.addCommand('InsertTable', { exec: InsertTable }); } }); function InsertTable(e) { e.insertHtml('<table><tr><td>hoge</td></tr><tr><td>hoge</td></tr></table>' ); }