CKEditor自定义插件按钮

Question

我已经为CKEditor编写了一个自定义插件 - 在各个方面都成功了，目前只保存一个：我不能在我的生活中弄清楚如何自定义按钮上的图像编辑器的工具栏。由于我是新用户，因此您必须点击才能看到附加的图片;左上方高亮显示的方块应该有一张漂亮的图片（与大多数其他工具栏项目一样）。

Answer 1

别人一些信息尝试写插件的CKEditor 3.0。

我已经通过复制插件/闪光源开始，现在得到了YouTube标志的按钮....这是从插件/ YouTube的/ plugin.js

editor.ui.addButton('YouTube', 
      { 
       label : editor.lang.common.youtube, 
       command : 'youtube', 
       icon: this.path + 'images/youtube.gif' 
      }); 

也是一种提取物你需要编辑你的语言文件....例如lang/en.js

将您的插件名称添加到“常用”部分（当您将鼠标悬停在按钮上时，它将显示为工具提示），并为您的插件添加一个完整的块，并包含所有字符串，如下所示。 ..

// 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.' 
} 

Answer 2

这些都是一些插件的CKEditor 3.x的

CKEditor的插件

Highslide JS插件， LrcShow插件， FileIcon插件， InsertHtml插件， 插件SyntaxHighlighter的

下载：CKEditor 3.x Plugins

Answer 3

我写了一个完整的覆盖tutorial插件的CKEditor发展，包括按钮，上下文菜单，对话框和更多的每一个方面。

Answer 4

尝试此链接以及。在CKEditor插件的创建中，你会深入一点。

http://www.sayopenweb.com/plugin-for-ckeditor/

Answer 5

答案是设置的按钮设置的图标属性，像这样：

 editor.ui.addButton('your-plugin', { 
      label: 'Your Plugin Label', 
      command: 'YourPlugin', 
      icon: this.path + 'images/your-plugin.jpg' 
     }); 

你的插件目录中应该有一个“图像”子目录在您的按钮应该去。在上面的代码片段中，将“your-plugin.jpg”替换为您的按钮的JPG，GIF或PNG图像。

这个答案当然假设您知道如何使用某种图像编辑器来创建按钮图像瘸子时，Photoshop等

Answer 6

这篇文章CKEditor的插件的创建在Drupal的情况下可能太http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal

有代码示例和一步一步的指导，对定制按钮建立自己的CKEditor的插件是有用的。

Answer 7

有关于CKEditor的文档网站一个非常详尽的教程，请参阅：CKEditor Plugin SDK - Introduction

此时它包括：

• 创建编辑命令
• 与图标创建工具栏按钮
• 关于如何在CKEditor中注册插件的说明
• 使用两个选项卡创建插件对话窗口
• 添加右键菜单
• 高级内容过滤器（ACF）集成（上separate page）

如果你有兴趣创建自己的小部件，还要检查Widgets SDK Tutorial

Answer 8

要添加自定义您的图标需要编辑外观/ moono/*。CSS 编辑者本身则需要添加相同的CSS类在下列文件

• editor.css
个
• editor_gecko.css（火狐）
• editor_ie.css
• editor_ie7.css
• editor_ie8.css
• editor_iequirks.css

的CSS按钮类的格式名称为。 cke_button__ myCustomIcon _icon

您可以在e ither使用自己的图像文件作为图标或编辑精灵/skins/moono/icons.png来添加你的图标。

在你plugin.js你需要有像

editor.ui.addButton('myplugin', 
{ 
    label: 'myplugin', 
    command: FCKCommand_myplugin, 
    icon: 'myCustomIcon' 
}); 

Answer 9

关于字体真棒，我能做到这一点使用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"; 
    } 
}