44

我已经为 CKEditor 编写了一个自定义插件——在所有方面都很成功，目前保存一个：我一生都无法弄清楚如何自定义编辑器工具栏中按钮上的图像。由于我是新用户，您必须点击查看附件图片；左上角突出显示的方块应该有一张漂亮的图片（就像大多数其他工具栏项目一样）。

截屏

4

7 回答 7

74

我编写了一个完整的教程，涵盖了 CK​​editor 插件开发的各个方面，包括按钮、上下文菜单、对话框等等。

于 2010-01-26T16:32:07.523 回答
15

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

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

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

当然，这个答案假设您知道如何使用 Gimp、Photoshop 等图像编辑器创建按钮图像。

于 2011-04-01T20:08:06.790 回答
11

其他人的一些信息尝试为 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.'
}
于 2009-08-17T23:21:09.853 回答
4

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

CKEditor 插件

Highslide JS 插件、LrcShow 插件、FileIcon 插件、InsertHtml 插件、SyntaxHighlighter 插件

下载：CKEditor 3.x 插件

于 2009-12-15T07:38:20.450 回答
2

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

此刻它涵盖：

  • 创建编辑器命令
  • 创建带有图标的工具栏按钮
  • CKEditor插件注册方法说明
  • 创建带有两个选项卡的插件对话框窗口
  • 添加上下文菜单
  • 高级内容过滤器 (ACF) 集成（在单独的页面上）

如果您对创建自己的小部件感兴趣，请查看Widgets SDK 教程

于 2014-01-05T12:16:06.030 回答
1

要添加自定义图标，您需要编辑 skins/moono/*.css 对于编辑器本身，您需要在以下文件中添加相同的 CSS 类

  • 编辑器.css
  • editor_gecko.css (火狐)
  • editor_ie.css
  • editor_ie7.css
  • editor_ie8.css
  • editor_iequirks.css

CSS 按钮类的格式名称是.cke_button__ myCustomIcon _icon

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

在您的plugin.js中，您需要有类似的东西

editor.ui.addButton('myplugin',
{
    label: 'myplugin',
    command: FCKCommand_myplugin,
    icon: 'myCustomIcon'
});
于 2016-01-28T19:29:36.817 回答
0

关于字体真棒，我能够使用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";
  }
}
于 2016-04-10T14:22:56.207 回答