71

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

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

4

10 に答える 10

113

また、プラグインを作成せずにボタンを追加できる良い方法もあります。

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

于 2014-08-22T09:07:03.760 に答える
95

私はCKEditor用のカスタムプラグインをいくつか開発中です。これが私のサバイバルパックのブックマークです。

目的のために、_source/pluginsディレクトリ内のプラグインの1つ、たとえば「印刷」ボタンを確認することをお勧めします。単純なJavascript関数を追加するのは非常に簡単です。印刷プラグインを複製し（ディレクトリを_sourceから実際のplugins /ディレクトリに移動し、後で縮小することを心配します）、名前を変更し、その中の「print」のすべての言及の名前を変更し、ボタンに後で使用する適切な名前を付けることができるはずです。ツールバーの設定でボタンを含め、関数を追加します。

于 2009-12-27T15:46:28.513 に答える
28

簡単な例については、この 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
            });
        }
    }); 
})();
于 2010-01-04T02:42:06.317 に答える
2

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

于 2009-12-24T09:53:57.387 に答える
2

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

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

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

于 2011-12-09T06:26:00.640 に答える
0

ckeditor ツールバーをカスタマイズした場合は、次の方法を使用します。

var editor = CKEDITOR.replace("da_html", {
  disableNativeSpellChecker: false,
  toolbar: [{
      name: "clipboard",
      items: ["Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Undo", "Redo"]
    },
    "/",
    {
      name: "basicstyles",
      items: ["Italic"]
    },
    {
      name: "paragraph",
      items: ["BulletedList"]
    },
    {
      name: "insert",
      items: ["Table"]
    },
    "/",
    {
      name: "styles",
      items: ["Styles", "Format", "Font", "FontSize"]
    },
    {
      name: "colors",
      items: ["TextColor", "BGColor"]
    },
    {
      name: "tools",
      items: ["Maximize", "saveButton"]
    },
  ]
});

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

editor.ui.addButton("saveButton", { // add new button and bind our command
  label: "Click me",
  command: "mySaveCommand",
  toolbar: "insert",
  icon: "https://i.stack.imgur.com/IWRRh.jpg?s=328&g=1"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>

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

stackoverflow のセキュリティ上の問題により、jsfiddle で動作するコード: http://jsfiddle.net/k2vwqoyp/

于 2019-12-30T06:49:51.267 に答える