如何在调用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开发一些自定义插件,这是我的书签生存包:

• StackOverflow帖子链接到并讨论了让我入门的插件教程(Tim Down已经提到过这个)
• 一个号码FCK和CKEditor的现成的插件可以提高系统之一的理解
• AlfonsoML的博客,开发人员之一,那里有很多有价值的东西,例如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为此编写了一个解决方案.为了使按钮正确显示,我必须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'
    });
    }
});

Answer 5

CK编辑器4

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

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

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

CK编辑器5

到目前为止，有一篇介绍文章可供参考：

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