如何向调用 JavaScript 函数的工具栏添加自定义按钮？

我想添加一个按钮到工具栏，调用一个 JavaScript 函数，如 Tada()？

有办法加进去吗？

128584 次浏览
小开

您需要创建一个插件。CKEditor 的文档非常糟糕，特别是因为我相信自 FCKEditor 以来它已经发生了显著的变化。我建议复制一个现有的插件并研究它。一个快速谷歌“ CKEditor 插件”也发现 这篇博文。

小开
最佳答案

我正在为 CKEditor 开发一些自定义插件，下面是我的幸存书签包:

为了便于理解，我建议您查看 _source/plugins目录中的一个插件，例如“ print”按钮。添加一个简单的 Javascript 函数是很容易实现的。你应该能够复制打印插件(把目录从 _ source 放到实际的插件/目录中，稍后再考虑缩小的问题) ，重命名它，重命名其中每一个提到“ print”的地方，给按钮一个合适的名字，稍后在你的工具栏设置中包含这个按钮，然后添加你的函数。

小开

请参阅此 URL 以获得一个简单的示例 http://ajithmanmadhan.wordpress.com/2009/12/16/customizing-ckeditor-and-adding-a-new-toolbar-button/

有几个步骤:

1)创建一个插件文件夹

2)注册你的插件(上面的 URL 说要编辑 ckedior.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 为此编写了一个解决方案。为了使按钮正确显示，我必须从 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'
});
}
});
小开

您可以按如下方式添加按钮图像:

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
 }
});

这里 是实际的插件，包含所有描述的步骤。

小开

这篇文章可能也有用

有代码示例和一步一步的指南关于建立自己的 CKEditor 插件与自定义按钮。

小开

还有一个不错的方法，允许一个添加按钮而不创建插件。

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'
});

看看它是如何工作的: 演示

小开

CKEditor 4

CKEditor 4官方文档中有一些方便的教程，包括编写一个插件，将内容插入编辑器，注册一个按钮，并显示一个对话框窗口:

如果你读了这两篇文章，请转到 集成插件和高级内容过滤器。

CKEditor 5

到目前为止，只有一篇介绍性文章:

CKEditor 5 Framework: Quick Start-创建一个简单的插件

小开

可能有几个插件，但一个可以使用 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>

这是一个按钮开放应用程序。 你可以改变颜色，因为我正在使用 # 0080ff (浅蓝色)

小开

如果您已经定制了 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>

由于堆栈溢出的一些安全问题，jsfiddle 中的工作代码: Http://jsfiddle.net/k2vwqoyp/


提交答案