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

Posted 2023-02-16

技术标签:

【中文标题】如何将自定义按钮添加到调用 JavaScript 函数的工具栏？【英文标题】：How to add a custom button to the toolbar that calls a JavaScript function? 【发布时间】：2010-12-29 18:05:03 【问题描述】：

我想在工具栏上添加一个按钮来调用像Tada() 这样的 javascript 函数？

关于如何添加它的任何想法？

【问题讨论】：

【参考方案1】：

如果你自定义了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>

由于 *** 的一些安全问题，jsfiddle 中的工作代码： http://jsfiddle.net/k2vwqoyp/

【讨论】：

【参考方案2】：

可能有几个插件，但其中一个可能使用 CSS 来创建按钮。首先点击编辑器中提到的Source按钮，然后将按钮代码粘贴到那里，因为我使用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>

这是 Button Written Open App over It。您可以在我使用#0080ff（浅蓝色）时更改颜色

【讨论】：

【参考方案3】：

CKEditor 4

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

Creating a CKEditor 4 Plugin in 20 Lines of Code Creating a Simple CKEditor Plugin

如果您阅读了这两篇文章，请转到Integrating Plugins with Advanced Content Filter。

CKEditor 5

目前只有一篇介绍文章：

CKEditor 5 Framework: Quick Start - Creating a simple plugin

【讨论】：

请更正 CKEditor 5 框架的链接：快速入门 - 创建一个简单的插件到ckeditor.com/docs/ckeditor5/latest/framework/guides/…【参考方案4】：

还有一种很好的方法可以让你在不创建插件的情况下添加按钮。

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

【讨论】：

这应该是公认的答案！因为它准确直接地回答了 OP 的问题，而不是把他送到 ~~hell~~ 手册。 @trejder - 我赞成这个，但我坚信这个答案在六年前的 2009 年并不适用，当时创建了 OP 的问题和接受的答案...... @J.Bruni 这并没有改变这样一个事实，即接受的答案会将 OP 发送到文档和其他问题的语气中，而不是直接给出答案。这不是 SE 创建的东西。 SE/SO 不是链接列表，而是质量问题和答案。接受的答案既没有质量也没有价值。它只是一堆在两行之间带有“帮助自己”信息的链接。如果您要执行此操作并且想要在配置之外使用自定义工具栏，除非您将“超级按钮”（在这种情况下）添加到自定义工具栏，否则它将无法工作。（我生命中有两个小时再也回不来了） @MadisonTrash 我知道这是一个旧线程，但我的按钮不会出现在工具栏中。我在下面尝试了您的解决方案和 Iron Hammer 的解决方案，但没有运气。【参考方案5】：

查看此 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
            );
        
    ); 
)();

【讨论】：

插件目录好像要和命令一样命名。【参考方案6】：

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

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

【讨论】：

【参考方案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
 
);

Here 是描述所有步骤的实际插件。

【讨论】：

【参考方案8】：

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

【讨论】：

【参考方案9】：

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

A *** post linking to and talking about a plugins tutorial that got me started（Tim Down 已经提到过） number of ready-made plugins for FCK and CKEditor 可以提高人们对系统的理解 AlfonsoML 的博客，其中一位开发人员，那里有很多有价值的东西，例如Plugin localization in CKEditor Interaction between dialog buttons and a IFrame dialog，来自开发者之一 Garry Yao 的意见 forums 并不像看起来那么糟糕，那里有一些隐藏的宝石。确保你在那里搜索，好吧，如果不是第一个，那么至少是第二个或第三个。

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

【讨论】：

【参考方案10】：

您需要创建一个插件。 CKEditor 的文档对此非常差，特别是因为我相信自 FCKEditor 以来它已经发生了重大变化。我建议复制现有的插件并研究它。 “CKEditor 插件”的快速谷歌也找到了this blog post。

【讨论】：

以上是关于如何将自定义按钮添加到调用 JavaScript 函数的工具栏？的主要内容，如果未能解决你的问题，请参考以下文章

Pimcore - 如何将自定义按钮添加到对象树菜单

如何将自定义图像添加到按钮（dojo 1.7）

如何将自定义按钮添加到 react-google-maps？

如何将自定义 javascript 添加到 WordPress 管理员？

将自定义按钮添加到数据表不起作用

如何将自定义视图添加到 JSQMessagesViewController 单元格，以便它包含一个带有一些按钮和文本视图的视图？