如何向工具栏添加调用 JavaScript 函数的自定义按钮？

Question

我想向工具栏添加一个按钮来调用 JavaScript 函数，例如 Tada()？

关于如何添加这个有什么想法吗？

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

在这里查看它是如何工作的：DEMO

Answer 2

我正在为 CKEditor 开发一些自定义插件，这是我的书签生存包：

• A StackOverflow发布链接并讨论让我入门的插件教程（Tim Down 已经提到过这一点）
• FCK 和 CKEditor 的现成插件数量，可以提高人们对系统的理解
• AlfonsoML< 的博客< /a>，开发人员之一，那里有很多有价值的东西，例如 CKEditor 中的插件本地化
• 对话框按钮和IFrame 对话框，来自开发人员之一 Garry Yao 的意见
• 论坛 并不那么糟糕他们看起来，那里有一些隐藏的宝石。确保你在那里搜索，好吧，如果不是第一个，那么至少是第二个或第三个。

为了您的目的，我建议您查看 _source/plugins 目录中的插件之一，例如“打印”按钮。添加一个简单的 Javascript 函数非常容易实现。您应该能够复制打印插件（将目录从 _source 放入实际的插件/目录中，稍后再担心缩小问题），重命名它，重命名其中每次提到“打印”的地方，为按钮指定一个稍后使用的正确名称在您的工具栏设置中包含该按钮，并添加您的功能。

Answer 3

请参阅此 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
            });
        }
    }); 
})();

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

Answer 5

CKEditor 4

官方 CKEditor 4 文档中有一些方便的教程，其中介绍了编写一个将内容插入编辑器、注册按钮并显示对话框窗口的插件：

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

如果您阅读了这两篇文章，请继续阅读 将插件与高级内容过滤器集成。

CKEditor 5

到目前为止，有一篇介绍文章可用：

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

Answer 6

您需要创建一个插件。 CKEditor 的文档对此非常缺乏，特别是因为我相信自 FCKEditor 以来它已经发生了很大的变化。我建议复制现有的插件并研究它。快速谷歌搜索“CKEditor插件”还发现此博文。

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

此处< /a> 是实际的插件，包含描述的所有步骤。

Answer 8

这篇文章可能也有用 http://mito-team .com/article/2012/collapse-button-for-ckeditor-for-drupal

这里有关于使用自定义按钮构建您自己的 CKEditor 插件的代码示例和分步指南。

Answer 9

如果您自定义了 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.sstatic.net/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/

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（浅蓝色）