首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在调用JavaScript函数的工具栏中添加自定义按钮?

如何在调用JavaScript函数的工具栏中添加自定义按钮?
EN

Stack Overflow用户
提问于 2009-12-24 15:06:28
回答 7查看 124.9K关注 0票数 71

我想在工具栏中添加一个按钮,用于调用Tada()之类的JavaScript函数

对如何添加这个有什么想法吗?

EN

回答 7

Stack Overflow用户

发布于 2014-08-22 17:07:04

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

html:

代码语言:javascript
运行
复制
<textarea id="container">How are you!</textarea>

javascript:

代码语言: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

票数 112
EN

Stack Overflow用户

发布于 2010-01-04 10:42:06

有关简单的http://ajithmanmadhan.wordpress.com/2009/12/16/customizing-ckeditor-and-adding-a-new-toolbar-button/示例,请参阅此URL

有几个步骤:

1)创建插件文件夹

2)注册你的插件(上面的网址说要编辑ckeditor.js文件,不要这样做,因为它会在下一次发布新版本时崩溃。而是编辑config.js并添加一行,如下所示

代码语言:javascript
运行
复制
config.extraPlugins = 'pluginX,pluginY,yourPluginNameHere'; 

3)在插件文件夹中创建一个名为plugin.js的JS文件

代码语言:javascript
运行
复制
(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
            });
        }
    }); 
})();
票数 28
EN

Stack Overflow用户

发布于 2011-11-16 03:08:57

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

下面是plugin.js:

代码语言:javascript
运行
复制
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'
    });
    }
});
票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1957156

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档