如何将自定义button添加到调用JavaScript函数的工具栏？
我想添加一个button到调用像Tada()的JavaScript函数的工具栏？
任何想法如何添加这个？
我正在为CKEditor开发一些自定义插件的过程，这里是我的生存包书签：
- 一个StackOverflow的链接，并讨论了一个插件教程，让我开始 （Tim Down已经提到这个）
- FCK和CKEditor的一些现成的插件可以提高人们对系统的理解
- AlfonsoML的博客，其中一个开发人员，很多有价值的东西，例如CKEditor中的插件本地化
- 对话框button和IFrame对话框之间的交互 ，来自开发人员之一Garry Yao的input
- 论坛没有他们看的那么糟糕，那里有一些隐藏的gem。 确保你在那里search，如果不是第一，那么至less还有第二或第三。
为了您的目的，我build议查看_source/plugins目录中的插件之一，例如“打印”button。 添加一个简单的Javascript函数是很容易实现的。 您应该能够复制打印插件（从_source目录到实际的插件/目录，稍后担心缩小），重命名它，重命名每个提及的“打印”内，给button一个适当的名字，你以后使用在你的工具栏设置中包含button，并添加你的function。
也有一个很好的方式，允许一个添加button，而无需创build插件。
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
看到这个url的一个简单的例子http://ajithmanmadhan.wordpress.com/2009/12/16/customizing-ckeditor-and-adding-a-new-toolbar-button/
有几个步骤：
1）创build一个插件文件夹
2）注册你的插件（上面的URL说编辑ckeditor.js文件不要这样做，因为它会在下一次新版本被closures时中断，而是编辑config.js并添加一行
config.extraPlugins = 'pluginX,pluginY,yourPluginNameHere';
3）在你的插件文件夹中创build一个名为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 }); } }); })();
如果有人感兴趣，我使用Prototype为此写了一个解决scheme。 为了让button正确显示，我必须在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' }); } });
您需要创build一个插件。 CKEditor的文档非常差，特别是因为我相信自从FCKEditor以来它已经发生了很大的变化。 我build议复制一个现有的插件并研究它。 “CKEditor插件”的快速谷歌也发现这篇博文 。
您可以按如下方式添加button图像：
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 } });
这是所有步骤描述的实际插件。
这篇文章也许是有用的http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal
有代码示例和一步一步的指导build立自己的CKEditor插件与自定义button。
CKEditor 4
在官方的CKEditor 4文档中有方便的教程，其中包括编写一个将内容插入编辑器的插件，注册一个button并显示一个对话窗口：
- 在20行代码中创build一个CKEditor 4插件
- 创build一个简单的CKEditor插件
如果您阅读了这两个内容，请转到集成插件与高级内容filter 。
CKEditor 5
到目前为止，有一篇介绍文章可用：
CKEditor 5框架：快速入门 – 创build一个简单的插件
