如何在工具栏上添加自定义按钮以调用JavaScript函数?


71

我想在工具栏上添加一个按钮,以调用JavaScript函数Tada()

关于如何添加此的任何想法?

Answers:


93

我正在为CKEditor开发许多自定义插件,这是我的书签生存包:

为了您的目的,我建议您查看目录中的一个插件_source/plugins,例如“打印”按钮。添加一个简单的Javascript函数非常容易实现。您应该能够复制打印插件(将_source中的目录带到实际的plugins /目录中,稍后再担心缩小),重命名,重命名其中提到的每个“ print”,并为按钮指定一个适当的名称,以供以后使用在工具栏设置中包括按钮,然后添加功能。


109

还有一种不错的方法,允许人们添加按钮而不创建插件。

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

在这里查看其工作方式:演示


11
这应该是公认的答案!由于它可以准确而直接地回答OP的问题,而不是将其发送给<s> hell </ s>手册。
trejder 2015年

2
@trejder-我对此表示赞同,但我坚信此答案不适用于六年前的2009年,当时OP的问题和已接受的答案都被创建了……
J. Bruni

3
@ J.Bruni不会改变这样的事实:接受的答案会将OP发送给文档和其他问题,而不是直接给出答案。这与创建SE无关。SE / SO不是链接列表,而是质量问题和答案。接受的答案既没有质量也没有价值。只是两行之间带有“自助”消息的链接。
trejder

4
如果要执行此操作,并且要在配置之外使用自定义工具栏,则除非将“ SuperButton”(在这种情况下)添加到自定义工具栏,否则它将无法正常工作。(我一生有两个小时没有回去)
Tod

1
@MadisonTrash我知道这是一个旧线程,但是我的按钮不会显示在工具栏中。我在下面尝试了您的解决方案和Iron Hammer的解决方案,但是没有运气。
米尔法尔教务长,

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

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

5

如果有人感兴趣,我使用Prototype为此写了一个解决方案。为了使按钮正确显示,我必须extraPlugins: 'ajaxsave'CKEDITOR.replace()方法调用内部进行指定。

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

4

CKEditor 4

官方CKEditor 4文档中有一些便捷的教程,内容涉及编写一个插件,该插件将内容插入编辑器,注册按钮并显示对话框窗口:

如果您阅读了这两本书,请继续进行集成插件与高级内容过滤器

CKEditor 5

到目前为止,有一篇介绍文章可用:

CKEditor 5 Framework:快速入门-创建一个简单的插件


请更正CKEditor 5 Framework的链接:快速入门-为ckeditor.com/docs/ckeditor5/latest/framework/guides/
Neha

2

您需要创建一个插件。为此,CKEditor的文档非常差,尤其是因为我相信自FCKEditor以来它已发生了很大的变化。我建议复制现有的插件并进行研究。一个用于“ CKEditor插件”的快速Google也找到了此博客文章


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

是包含所有步骤的实际插件。



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/


-2

可能有多个插件,但一个插件可能使用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(浅蓝色)一样更改颜色

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.