CKEditor 自定义插件按钮
Posted
技术标签:
【中文标题】CKEditor 自定义插件按钮【英文标题】：CKEditor Custom Plugins Button 【发布时间】：2010-11-11 12:06:54 【问题描述】：我已经为 CKEditor 编写了一个自定义插件——在所有方面都很成功，目前保存一个：我一生都无法弄清楚如何自定义编辑器工具栏中按钮上的图像.由于我是新用户，您必须点击查看附件图片；左上角突出显示的方块应该有一张漂亮的图片（就像大多数其他工具栏项一样）。
【问题讨论】：
【参考方案1】：其他人的一些信息尝试为 CKEditor 3.0 编写插件。
我从 plugins/flash 复制源代码开始，现在有一个带有 youtube 徽标的按钮....这是 plugins/youtube/plugin.js 的摘录
editor.ui.addButton( 'YouTube',
label : editor.lang.common.youtube,
command : 'youtube',
icon: this.path + 'images/youtube.gif'
);
您还需要编辑语言文件....例如lang/en.js
将您的插件名称添加到“common”部分（当您将鼠标悬停在按钮上时，这会显示为工具提示）并为您的插件添加一个完整的块，其中包含您的所有字符串，如下所示....
// YouTube Dialog
youtube :
properties : 'YouTube Properties',
propertiesTab : 'Properties',
title : 'YouTube Properties',
chkPlay : 'Auto Play',
chkLoop : 'Loop',
chkMenu : 'Enable YouTube Menu',
chkFull : 'Allow Fullscreen',
scale : 'Scale',
scaleAll : 'Show all',
scaleNoBorder : 'No Border',
scaleFit : 'Exact Fit',
access : 'Script Access',
accessAlways : 'Always',
accessSameDomain : 'Same domain',
accessNever : 'Never',
align : 'Align',
alignLeft : 'Left',
alignAbsBottom: 'Abs Bottom',
alignAbsMiddle: 'Abs Middle',
alignBaseline : 'Baseline',
alignBottom : 'Bottom',
alignMiddle : 'Middle',
alignRight : 'Right',
alignTextTop : 'Text Top',
alignTop : 'Top',
quality : 'Quality',
qualityBest : 'Best',
qualityHigh : 'High',
qualityAutoHigh : 'Auto High',
qualityMedium : 'Medium',
qualityAutoLow : 'Auto Low',
qualityLow : 'Low',
windowModeWindow : 'Window',
windowModeOpaque : 'Opaque',
windowModeTransparent : 'Transparent',
windowMode : 'Window mode',
flashvars : 'Variables for YouTube',
bgcolor : 'Background color',
width : 'Width',
height : 'Height',
hSpace : 'HSpace',
vSpace : 'VSpace',
validateSrc : 'URL must not be empty.',
validateWidth : 'Width must be a number.',
validateHeight : 'Height must be a number.',
validateHSpace : 'HSpace must be a number.',
validateVSpace : 'VSpace must be a number.'
【讨论】：
【参考方案2】：这些是 CKEditor 3.x 的一些插件
CKEditor 插件
Highslide JS 插件， LrcShow 插件， 文件图标插件， Inserthtml 插件， SyntaxHighlighter 插件
下载：CKEditor 3.x Plugins
【讨论】：
【参考方案3】：我写了一个完整的tutorial，涵盖了CKeditor 插件开发的各个方面，包括按钮、上下文菜单、对话框等等。
【讨论】：
插件创建过程似乎已经简化。好教程在这里：docs.cksource.com/CKEditor_3.x/Tutorials 链接好像坏了。 链接失效了，请更新链接 在回程机器上找到它。 web.archive.org/web/20130208101630/http://www.voofie.com/…【参考方案4】：答案是这样设置按钮设置的图标属性：
editor.ui.addButton('your-plugin',
label: 'Your Plugin Label',
command: 'YourPlugin',
icon: this.path + 'images/your-plugin.jpg'
);
你的插件目录应该有一个“images”子目录，你的按钮应该放在哪里。在上面的 sn-p 中，将“your-plugin.jpg”替换为按钮的 JPG、GIF 或 PNG 图像。
当然，这个答案假设您知道如何使用 Gimp、Photoshop 等图像编辑器创建按钮图像。
【讨论】：
这是正确答案。我遵循了 ckeditor 网站上的教程，该教程省略了 icon 属性——并且一直在苦苦挣扎，没有如何让图标显示出来。很高兴他们现在终于开始工作了，多亏了这个！【参考方案5】：CKEditor 文档网站上有一个非常详尽的教程，请参阅：CKEditor Plugin SDK - Introduction
此时它涵盖了：
创建编辑器命令 使用图标创建工具栏按钮 CKEditor注册插件的说明 创建带有两个选项卡的插件对话窗口 添加上下文菜单 高级内容过滤器 (ACF) 集成（在 separate page 上）如果您有兴趣创建自己的小部件，请查看Widgets SDK Tutorial
【讨论】：
本教程一直不正确，现在仍然不正确。它在主插件中设置“图标”属性，而不是在 editor.ui.addButton() 调用中设置“图标”属性。后者是让它工作所需要的。 （请参阅 Silkster 的回答。）我已按照教程进行操作，并且与原始海报有相同的问题。很高兴终于让它工作了——不用感谢教程！ 奇怪的是，addButton() 的文档中也缺少 'icon' 属性...docs.ckeditor.com/#!/api/CKEDITOR.ui【参考方案6】：要添加自定义图标，您需要编辑 skins/moono/*.css 对于编辑器本身，您需要在以下文件中添加相同的 CSS 类
editor.css editor_gecko.css (firefox) editor_ie.css editor_ie7.css editor_ie8.css editor_iequirks.cssCSS 按钮类的格式名称是 .cke_button__myCustomIcon_icon
您可以为图标使用自己的图像文件，也可以编辑精灵 /skins/moono/icons.png 来添加自己的。
在你的 plugin.js 你需要有类似的东西
editor.ui.addButton('myplugin',
label: 'myplugin',
command: FCKCommand_myplugin,
icon: 'myCustomIcon'
);
【讨论】：
【参考方案7】：关于字体真棒，我能够使用 CSS 实现这一点：
span.cke_button_icon.cke_button__bold_icon
position: relative !important;
background-image: none !important;
&:after
font-family: FontAwesome;
position: absolute;
font-size: 16px;
content: "\f032";
【讨论】：
以上是关于CKEditor 自定义插件按钮的主要内容，如果未能解决你的问题，请参考以下文章