如何将一个自定义按钮添加到工具栏并调用JavaScript函数？

Question

我想在工具栏上添加一个按钮，调用一个名为Tada()的JavaScript函数。有什么建议如何添加吗？

- AnApprentice

Answer 1

同时有一种不需要创建插件就能添加按钮的好方法。

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

在这里查看它的工作原理：演示

- MadisonTrash

---

这应该成为被接受的答案！因为它准确且直接地回答了原帖提出的问题，而不是让他去看繁琐的手册。 - trejder

@trejder - 我正在为这个点赞，但我强烈认为这个答案在2009年时不适用，也就是六年前，当时提问者的问题和被接受的答案都被创建了... - J. Bruni

@J.Bruni虽然如此，一个被接受的答案仍然会把问题提出者引导到大量的文档和其他问题，而不是直接给出答案。这并不是SE创建的目的。SE/SO不是链接列表，而是高质量的问题和答案。被接受的答案既没有质量也没有价值，它只是一堆带有"自行解决"信息的链接。 - trejder

如果您想这样做并希望使用自定义工具栏，那么除非将'SuperButton'（在此情况下）添加到您的自定义工具栏中，否则它将无法生效。（这是我永远无法回去的两个小时） - Tod

@MadisonTrash 我知道这是一个旧的线程，但我的按钮不会显示在工具栏中。我尝试了你的解决方案和下面Iron Hammer的解决方案，但都没有成功。 - milfar dean

Answer 2

我正在开发一些针对CKEditor的自定义插件，以下是我的生存技巧书签：

• StackOverflow上的一篇文章，介绍了一个让我入门的插件教程（Tim Down已经提到了这个）
• 适用于FCK和CKEditor的一些现成插件，可以提高理解系统的能力
• AlfonsoML博客，其中有很多有价值的内容，例如：CKEditor中的插件本地化
• 对话框按钮与IFrame对话框之间的交互，包含Garry Yao等开发人员的意见
• 论坛并不像看上去那么糟糕，里面还隐藏着一些宝藏。确保你在那里进行搜索，至少要第二或第三次搜索。

对于你的目的，我建议查看_source/plugins目录中的一个插件，例如“打印”按钮。添加一个简单的JavaScript函数非常容易实现。你应该能够复制print插件（将目录从_source复制到实际plugins/目录中，稍后再考虑最小化），重新命名它，在其中重命名“print”的每个提及，为按钮赋予您以后在工具栏设置中使用的适当名称以包含该按钮，并添加您的功能。

- Pekka

Answer 3

请参考以下链接，其中提供了一个简单的示例：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
            });
        }
    }); 
})();

- Daveo

---

插件目录的名称似乎必须与命令相同。 - anssias

Answer 4

如果有人感兴趣，我写了一个使用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'
    });
    }
});

- IronHmmer

Answer 5

CKEditor 4

官方 CKEditor 4 文档中有很多有用的教程，涵盖了编写插件、注册按钮以及显示对话框等内容：

• 20行代码创建 CKEditor 4 插件
• 创建简单的 CKEditor 插件

如果你已经阅读了以上两篇文章，可以继续阅读高级内容过滤器与插件集成。

CKEditor 5

目前只有一篇介绍性文章可供参考：

CKEditor 5 框架：快速入门 - 创建一个简单的插件

- Wiktor Walc

---

请将 CKEditor 5 框架的快速入门 - 创建简单插件的链接更正为 https://ckeditor.com/docs/ckeditor5/latest/framework/guides/creating-simple-plugin.html。 - Neha

Answer 6

您需要创建一个插件。针对CKEditor的文档在这方面非常贫乏，特别是自从FCKEditor以来它已经发生了显著变化。我建议您复制现有的插件并进行研究。快速搜索“CKEditor插件”也会找到这篇博客文章。

- Tim Down

Answer 7

您可以按以下方式添加按钮图像：

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

这里 是一个包含所有步骤描述的实际插件。

- Arvind Bhardwaj

Answer 8

如果您已经自定义了 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://istack.dev59.com/IWRRh.webp?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/

- Rishab

Answer 9

本文可能会对你有帮助，http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal。

本文提供了代码示例和逐步指南，教你如何构建自己的 CKEditor 插件并添加自定义按钮。

- MiSHuTka

Answer 10

可能有几个插件可用，但可以使用CSS来创建按钮。首先点击编辑器中提到的源代码按钮，然后将按钮代码粘贴在那里，就像我使用CSS创建按钮并添加了href。

<p dir="ltr" style="text-align:center"><a href="https://play.google.com/store/apps/details?id=com.mobicom.mobiune&hl=en" style="background-color:#0080ff; border: none;color: white;padding: 6px 20px;text-align: center;text-decoration: none;display: inline-block;border-radius: 8px;font-size: 15px; font-weight: bold;">Open App</a></p>

这是一个写有“打开应用”的按钮。 你可以更改颜色，我使用的是#0080ff（浅蓝色）

- dinesh kandpal