我想在工具栏上添加一个按钮来调用 JavaScript 函数，例如Tada()？
关于如何添加这个的任何想法？
问问题
125847 次
10 回答
113
还有一种很好的方法，允许在不创建插件的情况下添加按钮。
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
于 2014-08-22T09:07:03.760 回答
95
我正在为 CKEditor 开发一些自定义插件，这是我的书签生存包：
- 一个 StackOverflow 帖子链接并讨论了一个让我开始的插件教程（Tim Down 已经提到过这个）
- FCK和CKEditor的一些现成插件，可以提高对系统的理解
- AlfonsoML的博客，其中一位开发人员，那里有很多有价值的东西，例如CKEditor 中的插件本地化
- 对话框按钮和 IFrame 对话框之间的交互，来自开发人员之一 Garry Yao 的输入
- 论坛并没有看起来那么糟糕，那里有一些隐藏的宝石。确保你在那里搜索，好吧，如果不是第一个，那么至少是第二个或第三个。
出于您的目的，我建议您查看_source/plugins目录中的插件之一，例如“打印”按钮。添加一个简单的 Javascript 函数很容易实现。您应该能够复制打印插件（将目录从 _source 放入实际的 plugins/ 目录，稍后担心缩小），重命名它，重命名其中提到的“打印”，给按钮一个正确的名称，以便以后使用在您的工具栏设置中包含按钮，并添加您的功能。
于 2009-12-27T15:46:28.513 回答
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
});
}
});
})();
于 2010-01-04T02:42:06.317 回答
5
如果有人感兴趣，我使用原型为此编写了一个解决方案。为了让按钮正确显示，我必须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'
});
}
});
于 2011-11-15T19:08:56.910 回答
4
CKEditor 4
CKEditor 4 官方文档中有一些方便的教程，包括编写一个插件，将内容插入编辑器，注册一个按钮并显示一个对话框窗口：
如果您阅读了这两篇文章，请继续阅读Integrating Plugins with Advanced Content Filter。
CKEditor 5
到目前为止，有一篇介绍文章可用：
于 2017-10-30T11:20:32.633 回答
2
您需要创建一个插件。CKEditor 的文档对此非常差，尤其是因为我相信自 FCKEditor 以来它已经发生了重大变化。我建议复制一个现有的插件并研究它。“CKEditor 插件”的快速谷歌也找到了这篇博文。
于 2009-12-24T09:53:57.387 回答
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
}
});
这是描述所有步骤的实际插件。
于 2011-12-09T06:26:00.640 回答
0
这篇文章也可能有用http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal
有关于使用自定义按钮构建您自己的 CKEditor 插件的代码示例和分步指南。
于 2012-10-02T08:01:10.567 回答
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/
于 2019-12-30T06:49:51.267 回答
-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>
这是 Button Written Open App over It。您可以在我使用#0080ff（浅蓝色）时更改颜色
于 2018-03-29T11:34:56.133 回答