CKEditor自定义插件按钮
我已经为CKEditor编写了一个自定义插件——在所有方面都很成功，目前只保存了一个：为了我的生命，我无法想出如何自定义编辑器工具栏按钮上的图像。由于我是一个新用户，您将不得不通过点击查看附加的图像；左上角突出显示的方块应该有一个漂亮的图片（像大多数其他工具栏项目一样）CKEditor自定义插件按钮,ckeditor,Ckeditor,我已经为CKEditor编写了一个自定义插件——在所有方面都很成功，目前只保存了一个：为了我的生命，我无法想出如何自定义编辑器工具栏按钮上的图像。由于我是一个新用户，您将不得不通过点击查看附加的图像；左上角突出显示的方块应该有一个漂亮的图片（像大多数其他工具栏项目一样） 其他人的一些信息尝试为CKEditor 3.0编写插件 我从复制plugins/flash的源代码开始，现在有了一个带有youtube徽标的按钮。。。。这是plugins/youtube/plugin.js的摘录 editor.
其他人的一些信息尝试为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'
});
// 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插件， 文件图标插件， 插入TML插件， SyntaxHighlighter插件
下载：我写了一篇完整的文章，涵盖了CKeditor插件开发的各个方面，包括按钮、上下文菜单、对话框等等 答案是设置按钮设置的图标属性，如下所示：
editor.ui.addButton('your-plugin', {
label: 'Your Plugin Label',
command: 'YourPlugin',
icon: this.path + 'images/your-plugin.jpg'
});
当然，这个答案假设您知道如何使用Gimp、Photoshop等图像编辑器创建按钮图像。在CKEditor文档网站上有一个非常详尽的教程，请参阅： 目前包括：
- 创建编辑器命令
- 创建带有图标的工具栏按钮
- 关于如何在CKEditor中注册插件的说明
- 创建带有两个选项卡的插件对话框窗口
- 添加上下文菜单
- 高级内容筛选器（ACF）集成（在a上）
如果您对创建自己的小部件感兴趣，请同时选中以添加您需要编辑皮肤/moono/*.css的自定义图标 对于编辑器本身，您需要在以下文件中添加相同的CSS类
- editor.css
- 编辑器_gecko.css（firefox）
- 编辑器_ie.css
- 编辑器_ie7.css
- 编辑器_ie8.css
- 编辑器_iequirks.css
editor.ui.addButton('myplugin',
{
label: 'myplugin',
command: FCKCommand_myplugin,
icon: 'myCustomIcon'
});
关于字体，我使用CSS实现了这一点：
span.cke\u按钮\u图标.cke\u按钮\u粗体\u图标{
职位：相对！重要；
背景图像：无！重要；
&：之后{
字体系列：Fontsome；
位置：绝对位置；
字体大小：16px；
内容：“\f032”；
}
}