我想在工具栏中添加一个按钮来调用 JavaScript 函数,例如Tada()
?
关于如何添加这个的任何想法?
我想在工具栏中添加一个按钮来调用 JavaScript 函数,例如Tada()
?
关于如何添加这个的任何想法?
还有一种很好的方法可以让人们在不创建插件的情况下添加按钮。
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
我正在为 CKEditor 开发许多自定义插件,这是我的书签生存包:
为了您的目的,我建议您查看_source/plugins
目录中的插件之一,例如“打印”按钮。添加一个简单的Javascript函数很容易实现。您应该能够复制打印插件(将目录从 _source 放入实际的 plugins/ 目录中,稍后担心缩小),重命名它,重命名其中提到的“打印”,为按钮指定一个您以后使用的正确名称在您的工具栏设置中包含该按钮,并添加您的功能。
请参阅此 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
});
}
});
})();
如果有人感兴趣,我使用 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'
});
}
});
官方 CKEditor 4 文档中有一些方便的教程,其中包括编写一个插件,将内容插入编辑器、注册按钮并显示对话框窗口:
如果您阅读了这两篇文章,请继续阅读将插件与高级内容过滤器集成。
到目前为止,有一篇介绍文章可用: