Bouton de plugins personnalisés de CKEditor

Question

J'ai écrit un plugin personnalisé pour CKEditor, avec succès sur tous les fronts, sauf un actuellement : Je n'arrive pas à trouver comment personnaliser l'image du bouton de la barre d'outils de l'éditeur. Comme je suis un nouvel utilisateur, vous devrez cliquer pour voir l'image jointe ; le carré en surbrillance en haut à gauche devrait avoir une jolie image (comme la plupart des autres éléments de la barre d'outils).

Merci beaucoup pour vos réflexions/conseils/aide.

Answer 1

J'ai écrit un tutoriel couvrant tous les aspects du développement de plugins CKeditor, y compris les boutons, les menus contextuels, les boîtes de dialogue et plus encore.

Answer 2

La réponse est de définir la propriété de l'icône des paramètres du bouton comme suit :

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

Le répertoire de votre plugin doit contenir un sous-répertoire "images" où votre bouton doit être placé. Dans l'extrait ci-dessus, remplacez "your-plugin.jpg" par l'image JPG, GIF ou PNG de votre bouton.

Cette réponse suppose, bien entendu, que vous savez comment créer une image de bouton à l'aide d'un éditeur d'images tel que Gimp, Photoshop, etc.

Answer 3

Quelques informations pour les autres qui essaient d'écrire des plugins pour CKEditor 3.0.

J'ai commencé par copier la source de plugins/flash et j'ai maintenant un bouton avec un logo.... youtube. C'est un extrait de plugins/youtube/plugin.js.

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

Vous devrez également modifier votre fichier de langue...., par exemple lang/en.js.

Ajoutez le nom de votre plugin à la section "common" (qui apparaît sous forme d'infobulle lorsque vous survolez le bouton) et ajoutez un bloc entier pour votre plugin, avec toutes vos chaînes, comme ceci....

// 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 4

Voici quelques plugins pour CKEditor 3.x

Plugins CKEditor

Plugin JS Highslide, Plugin LrcShow, Plugin FileIcon, InsertHtml Plugin, Plugin SyntaxHighlighter

Télécharger : Plugins CKEditor 3.x

Answer 5

Il existe un tutoriel assez exhaustif sur le site de documentation de CKEditor, voir : CKEditor Plugin SDK - Introduction

En ce moment, il couvre :

• Création d'une commande de l'éditeur
• Création d'un bouton de la barre d'outils avec une icône
• Explication sur la façon d'enregistrer le plugin dans CKEditor
• Création d'une fenêtre de dialogue de plugin avec deux onglets
• Ajout d'un menu contextuel
• Intégration d'un filtre de contenu avancé (ACF) (sur un site Web). page séparée )

Si vous êtes intéressé par la création de vos propres widgets, consultez également le site suivant Tutoriel Widgets SDK