CKEditor自定义插件按钮

Question

我为CKEditor编写了一个自定义插件 - 在所有方面都取得了成功,目前只保存一个:我不能,在我的生活中,弄清楚如何在编辑器工具栏中的按钮上自定义图像.由于我是新用户,您必须点击查看附件图片; 左上角突出显示的方块应该有漂亮的图片(就像大多数其他工具栏项一样).

Answer 1

我编写了一个完整的教程,涵盖了CKeditor插件开发的各个方面,包括按钮,上下文菜单,对话框等.

Answer 2

答案是设置按钮设置的图标属性,如下所示:

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

您的插件目录应该有一个"images"子目录,您的按钮应该放在该子目录中.在上面的代码段中,将"your-plugin.jpg"替换为按钮的JPG,GIF或PNG图像.

当然,这个答案假定您知道如何使用某些图像编辑器(如Gimp,Photoshop等)创建按钮图像.

Answer 3

其他人的一些信息试图为CKEditor 3.0编写插件.

我开始从插件/ 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

将您的插件名称添加到"常用"部分(当您将鼠标悬停在按钮上时显示为工具提示)并为您的插件添加整个块,包含所有字符串,如下所示....

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