web-dev-qa-db-ja.com

JavaScript関数を呼び出すツールバーにカスタムボタンを追加する方法

Tada()のようなJavaScript関数を呼び出すボタンをツールバーに追加したいのですが。

これを追加する方法についてのアイデアはありますか？

javascriptckeditor
69
AnApprentice

私はCKEditorのカスタムプラグインの開発を進めています。これが私のブックマークのサバイバルパックです。

あなたの目的のために、_source/pluginsディレクトリ、たとえば「印刷」ボタン。簡単なJavascript関数を追加するのは非常に簡単です。印刷プラグインを複製して（_sourceから実際のplugins /ディレクトリにディレクトリを取得し、後で縮小することを心配してください）、名前を変更し、「print」内のすべての言及の名前を変更して、後で使用する適切な名前をボタンに付けることができますツールバーの設定でボタンを追加し、機能を追加します。

90
Pekka 웃

プラグインを作成せずにボタンを追加できる素敵な方法もあります。

html：

<textarea id="container">How are you!</textarea>

javascript：

editor = CKEDITOR.replace('container'); // bind editor

editor.addCommand("mySimpleCommand", { // create named command
    exec: function(edt) {
        alert(edt.getData());
    }
});

editor.ui.addButton('SuperButton', { // add new button and bind our command
    label: "Click me",
    command: 'mySimpleCommand',
    toolbar: 'insert',
    icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});

ここでの動作を確認してください： [〜＃〜] demo [〜＃〜]

103
MadisonTrash

簡単な例については、このURLを参照してください http://ajithmanmadhan.wordpress.com/2009/12/16/customizing-ckeditor-and-adding-a-new-toolbar-button/

いくつかの手順があります。

1）プラグインフォルダーを作成する

2）プラグインを登録します（上記のURLはckeditor.jsファイルを編集するように指示します。新しいバージョンが次回リリースされると壊れるので、これを行わないでください。代わりにconfig.jsを編集し、次のような行を追加します。

config.extraPlugins = 'pluginX,pluginY,yourPluginNameHere';

3）あなたのプラグインフォルダ内にplugin.jsというJSファイルを作成しますここに私のコードがあります

(function() {
    //Section 1 : Code to execute when the toolbar button is pressed
    var a = {
        exec: function(editor) {
            var theSelectedText = editor.getSelection().getNative();
            alert(theSelectedText);
        }
    },

    //Section 2 : Create the button and add the functionality to it
    b='addTags';
    CKEDITOR.plugins.add(b, {
        init: function(editor) {
            editor.addCommand(b, a);
            editor.ui.addButton("addTags", {
                label: 'Add Tag', 
                icon: this.path+"addTag.gif",
                command: b
            });
        }
    }); 
})();
28
Daveo

誰かが興味を持っている場合、Prototypeを使用してこれに対する解決策を書きました。ボタンを正しく表示するには、CKEDITOR.replace()メソッド呼び出し内からextraPlugins: 'ajaxsave'を指定する必要がありました。

Plugin.jsは次のとおりです。

CKEDITOR.plugins.add('ajaxsave',
{
    init: function(editor)
    {
    var pluginName = 'ajaxsave';

    editor.addCommand( pluginName,
    {
        exec : function( editor )
        {
            new Ajax.Request('ajaxsave.php',
            {
                method:     "POST",
                parameters: { filename: 'index.html', editor: editor.getData() },
                onFailure:  function() { ThrowError("Error: The server has returned an unknown error"); },
                on0:        function() { ThrowError('Error: The server is not responding. Please try again.'); },
                onSuccess:  function(transport) {

                    var resp = transport.responseText;

                    //Successful processing by ckprocess.php should return simply 'OK'. 
                    if(resp == "OK") {
                        //This is a custom function I wrote to display messages. Nicer than alert() 
                        ShowPageMessage('Changes have been saved successfully!');
                    } else {
                        ShowPageMessage(resp,'10');
                    }
                }
            });
        },

        canUndo : true
    });

    editor.ui.addButton('ajaxsave',
    {
        label: 'Save',
        command: pluginName,
        className : 'cke_button_save'
    });
    }
});
5
IronHmmer

CKEditor 4

公式のCKEditor 4ドキュメントには、エディターにコンテンツを挿入し、ボタンを登録し、ダイアログウィンドウを表示するプラグインの作成を扱う便利なチュートリアルがあります。

これら2つを読んだ場合は、 プラグインと高度なコンテンツフィルターの統合 に進んでください。

CKEditor 5

これまでに、紹介記事が1つあります。

CKEditor 5フレームワーク：クイックスタート-シンプルなプラグインの作成

3
Wiktor Walc

次のようにボタン画像を追加できます。

CKEDITOR.plugins.add('showtime',   //name of our plugin
{    
    requires: ['dialog'], //requires a dialog window
    init:function(a) {
  var b="showtime";
  var c=a.addCommand(b,new CKEDITOR.dialogCommand(b));
  c.modes={wysiwyg:1,source:1}; //Enable our plugin in both modes
  c.canUndo=true;
 
  //add new button to the editor
  a.ui.addButton("showtime",
  {
   label:'Show current time',
   command:b,
   icon:this.path+"showtime.png"   //path of the icon
  });
  CKEDITOR.dialog.add(b,this.path+"dialogs/ab.js") //path of our dialog file
 }
});

ここ は、すべての手順が説明されている実際のプラグインです。

2
Arvind Bhardwaj

プラグインを作成する必要があります。 CKEditorのドキュメントは、特にFCKEditorから大幅に変更されたと思われるため、この点では非常に貧弱です。既存のプラグインをコピーして学習することをお勧めします。 「CKEditorプラグイン」のクイックグーグルも見つかりました このブログ投稿 。

2
Tim Down

この記事も役に立つかもしれません http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal

カスタムボタンを使用して独自のCKEditorプラグインを構築するためのコードサンプルとステップバイステップガイドがあります。

0
MiSHuTka