文系大学生がエンジニアを目指すブログ

Qiitaに書くまでもないメモ的な存在

Railsで使ってるckeditorにボタン追加する

したいこと

wordpressのadd quick tagみたいにボタン押すとhtmlがテキストエリアに入るようにしたい

英語ばっかだったから日本語でメモ

ckedior

gem

github.com

リファレンス

CKEditor 4 Documentation

やり方

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>' );
}