如何将自定义按钮添加到调用 JavaScript 函数的工具栏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1957156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a custom button to the toolbar that calls a JavaScript function?
提问by AnApprentice
I'd like to add a button to the toolbar that calls a JavaScript function like Tada()?
我想在工具栏中添加一个按钮来调用 JavaScript 函数，例如Tada()？
Any ideas on how to add this?
关于如何添加这个的任何想法？
回答by MadisonTrash
Also there is a nice way allowing one to add the button without creating plugin.
还有一种很好的方法可以让人们在不创建插件的情况下添加按钮。
html:
html：
<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'
});
Check out how it works here: DEMO
在这里查看它是如何工作的：DEMO
回答by Pekka
I am in the process of developing a number of custom Plugins for CKEditor and here's my survival pack of bookmarks:
我正在为 CKEditor 开发许多自定义插件，这是我的书签生存包：
- A StackOverflow post linking to and talking about a plugins tutorial that got me started(Tim Down already mentioned this)
- A number of ready-made plugins for FCK and CKEditorthat may improve one's understanding of the system
- The Blog of AlfonsoML, one of the developers, lots of valuable stuff there, e.g. Plugin localization in CKEditor
- Interaction between dialog buttons and a IFrame dialog, with input from Garry Yao, one of the developers
- The forumsare not as bad as they look, there are some hidden gems there. Make sure you search there, well, if not first, then at least second or third.
- 一个 StackOverflow 帖子链接并讨论了一个让我入门的插件教程（Tim Down 已经提到了这一点）
- 一个号码FCK和CKEditor的现成的插件可以提高系统之一的理解
- AlfonsoML的博客，开发人员之一，那里有很多有价值的东西，例如CKEditor 中的插件本地化
- 对话框按钮和 IFrame 对话框之间的交互，来自开发人员之一的 Garry Yao 的输入
- 该论坛是不是那么糟糕，因为他们看，也有一些隐藏的宝石在那里。确保你在那里搜索，好吧，如果不是第一个，那么至少第二个或第三个。
For your purpose, I would recommend look at one of the plugins in the _source/pluginsdirectory, for example the "print" button. Adding a simple Javascript function is quite easy to achieve. You should be able to duplicate the print plugin (take the directory from _source into the actual plugins/ directory, worry about minification later), rename it, rename every mention of "print" within it, give the button a proper name you use later in your toolbar setup to include the button, and add your function.
为了您的目的，我建议您查看_source/plugins目录中的插件之一，例如“打印”按钮。添加一个简单的Javascript函数很容易实现。您应该能够复制打印插件（将目录从 _source 放入实际的 plugins/ 目录中，稍后担心缩小），重命名它，重命名其中提到的“打印”，为按钮指定一个稍后使用的正确名称在您的工具栏设置中包含该按钮，并添加您的功能。
回答by Daveo
See this URL for a easy example http://ajithmanmadhan.wordpress.com/2009/12/16/customizing-ckeditor-and-adding-a-new-toolbar-button/
有关简单示例，请参阅此 URL http://ajithmanmadhan.wordpress.com/2009/12/16/customizing-ckeditor-and-adding-a-new-toolbar-button/
There are a couple of steps:
有几个步骤：
1) create a plugin folder
1）创建一个插件文件夹
2) register your plugin (the URL above says to edit the ckeditor.js file DO NOT do this, as it will break next time a new version is relased. Instead edit the config.js and add a line like so
2）注册你的插件（上面的 URL 说编辑 ckeditor.js 文件不要这样做，因为它会在下次发布新版本时中断。而是编辑 config.js 并添加这样的一行
config.extraPlugins = 'pluginX,pluginY,yourPluginNameHere';
3) make a JS file called plugin.js inside your plugin folder Here is my code
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
});
}
});
})();
回答by IronHmmer
In case anybody is interested, I wrote a solution for this using Prototype. In order to get the button to appear correctly, I had to specify extraPlugins: 'ajaxsave'from inside the CKEDITOR.replace()method call.
如果有人感兴趣，我使用 Prototype 为此编写了一个解决方案。为了让按钮正确显示，我必须extraPlugins: 'ajaxsave'从CKEDITOR.replace()方法调用内部进行指定。
Here is the plugin.js:
这是 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'
});
}
});
回答by Wiktor Walc
CKEditor 4
CKEditor 4
There are handy tutorials in the official CKEditor 4 documentation, that cover writing a plugin that inserts content into the editor, registers a button and shows a dialog window:
官方 CKEditor 4 文档中有一些方便的教程，包括编写插件，将内容插入编辑器，注册按钮并显示对话框窗口：
If you read these two, move on to Integrating Plugins with Advanced Content Filter.
如果您阅读了这两篇文章，请继续阅读将插件与高级内容过滤器集成。
CKEditor 5
CKEditor 5
So far there is one introduction article available:
到目前为止，有一篇介绍文章可用：
CKEditor 5 Framework: Quick Start - Creating a simple plugin
回答by Tim Down
You'll need to create a plug-in. The documentation for CKEditor is very poor for this, especially since I believe it has changed significantly since FCKEditor. I would suggest copying an existing plug-in and studying it. A quick google for "CKEditor plugin" also found this blog post.
您需要创建一个插件。CKEditor 的文档在这方面非常糟糕，特别是因为我相信自 FCKEditor 以来它发生了重大变化。我建议复制一个现有的插件并研究它。快速搜索“CKEditor 插件”也找到了这篇博文。
回答by Arvind Bhardwaj
You can add the button image as follows:
您可以按如下方式添加按钮图像：
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
?}
});
Hereis the actual plugin with all steps described.
这是描述所有步骤的实际插件。
回答by MiSHuTka
This article may be useful too http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal
这篇文章也可能有用http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal
There are code samples and step-by-step guide about building your own CKEditor plugin with custom button.
有关于使用自定义按钮构建您自己的 CKEditor 插件的代码示例和分步指南。
回答by Rishab
If you have customized the ckeditor toolbar then use this method:
如果您自定义了 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>Working code in jsfiddle due to some security issue of stackoverflow: http://jsfiddle.net/k2vwqoyp/
由于stackoverflow的一些安全问题，jsfiddle中的工作代码：http: //jsfiddle.net/k2vwqoyp/
回答by dinesh kandpal
There might be Several plugins but one may use CSS for creating button. First of all click on Source button mentioned in Editor then paste the button code over there, As I use CSS to create button and added hrefto it.
可能有几个插件，但一个可以使用 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>
This is the Button Written Open App over It. You May change the Color as i am using #0080ff (Light Blue)
这是 Button Written Open App over It。您可以在我使用 #0080ff（浅蓝色）时更改颜色
