CKEditor自定义插件button
我已经为CKEditor写了一个自定义插件 – 在所有方面都成功了，现在保存了一个：在我的生活中，我不知道如何自定义编辑器工具栏button上的图像。 由于我是新用户，您必须点击才能看到附加的图片; 左上angular高亮显示的方块应该有一个漂亮的图片（像大多数其他工具栏项目）。
我已经写了一个完整的教程，涵盖CKeditor插件开发的各个方面，包括button，上下文菜单，对话框等等。
答案是设置button设置的图标属性，如下所示：
editor.ui.addButton('your-plugin', { label: 'Your Plugin Label', command: 'YourPlugin', icon: this.path + 'images/your-plugin.jpg' }); 你的插件目录应该有一个“图像”子目录，你的button应该去的地方。 在上面的代码片段中，将“your-plugin.jpg”replace为您的button的JPG，GIF或PNG图像。
当然，这个答案假设你知道如何使用Gimp，Photoshop等图像编辑器创build一个button图像。
其他人的一些信息尝试为CKEditor 3.0编写插件。
我已经开始从插件/闪光复制源，现在有一个youtube标志的button….这是从插件/ youtube / plugin.js摘录
editor.ui.addButton( 'YouTube', { label : editor.lang.common.youtube, command : 'youtube', icon: this.path + 'images/youtube.gif' });
你也需要编辑你的语言文件….例如lang / en.js
将您的插件名称添加到“常用”部分（当您将鼠标hover在button上时，这会显示为工具提示），并为您的插件添加一个完整的块，包括所有的string，如下所示。
// 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.' }
这些是CKEditor 3.x的一些插件
CKEditor插件
Highslide JS插件，LrcShow插件，FileIcon插件，InsertHtml插件，SyntaxHighlighter插件
下载： CKEditor 3.x插件
试试这个链接。 将会给你更多CKEditor插件创build的深度。
CKEditor文档网站有一个非常详尽的教程，请参阅： CKEditor插件SDK – 介绍
目前它涵盖：
- 创build一个编辑器命令
- 用图标创build工具栏button
- 关于如何在CKEditor中注册插件的说明
- 使用两个选项卡创build插件对话框窗口
- 添加上下文菜单
- 高级内容filter（ACF）集成（在单独的页面上 ）
如果您有兴趣创build自己的小部件，请查看小部件SDK教程
这篇关于在Drupal上下文中创buildCKEditor插件的文章可能也很有用http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal
有代码示例和一步一步的指导build立自己的CKEditor插件与自定义button。
要添加自定义图标，您需要编辑皮肤/ moono / *。css对于编辑器本身，您需要在以下文件中添加相同的CSS类
- editor.css
- editor_gecko.css（firefox）
- editor_ie.css
- editor_ie7.css
- editor_ie8.css
- editor_iequirks.css
CSSbutton类的格式名称是.cke_button__ myCustomIcon _icon
您可以使用自己的图像文件作为图标，或编辑精灵/skins/moono/icons.png添加您的图标。
在你的plugin.js中，你需要有类似的东西
editor.ui.addButton('myplugin', { label: 'myplugin', command: FCKCommand_myplugin, icon: 'myCustomIcon' });
关于字体真棒，我能够实现这个使用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"; } }
