web-dev-qa-db-fra.com

Bouton Plugins personnalisés CKEditor

J'ai écrit un plugin personnalisé pour CKEditor - réussi sur tous les fronts, enregistrez-en un actuellement: je ne peux pas, pour la vie de moi, comprendre comment personnaliser l'image sur le bouton dans 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).

Screenshot

ckeditor
44
isparling

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

73
geo

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

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

Votre répertoire de plugin devrait avoir un sous-répertoire "images" où votre bouton devrait aller. Dans l'extrait ci-dessus, remplacez "your-plugin.jpg" par l'image JPG, GIF ou PNG de votre bouton.

Cette réponse, bien sûr, suppose que vous savez comment créer une image de bouton en utilisant un éditeur d'image comme Gimp, Photoshop, etc.

15
Silkster

Certaines informations pour d'autres essaient d'écrire des plugins pour CKEditor 3.0.

J'ai commencé par copier la source depuis plugins/flash et j'ai maintenant un bouton avec un logo youtube .... ceci 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 "commune" (cela apparaît comme une info-bulle 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.'
}
10
russellfeeed

ce sont des plugins pour CKEditor 3.x

Plugins CKEditor

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

Téléchargement: plugins CKEditor 3.x

4
nasca

Il existe un didacticiel assez complet sur le site Web de documentation de CKEditor, voir: SDK du plug-in CKEditor - Introduction

En ce moment, il couvre:

  • Création d'une commande d'édition
  • Création du 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 du filtre de contenu avancé (ACF) (sur une page séparée )

Si vous souhaitez créer vos propres widgets, vérifiez aussi Widgets SDK Tutorial

2
Wiktor Walc

Essayez également ce lien. Vous donnera un peu plus de détails sur la création du plugin CKEditor.

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

2
Say

Pour ajouter votre icône personnalisée, vous devez modifier les skins/moono/*. Css Pour l'éditeur lui-même, vous devez ajouter la même classe CSS dans les fichiers suivants

  • editor.css
  • editor_gecko.css (firefox)
  • editor_ie.css
  • editor_ie7.css
  • editor_ie8.css
  • editor_iequirks.css

Le nom de format d'une classe de boutons CSS est . Cke_button __ myCustomIcon _ icon

Vous pouvez soit utiliser votre propre fichier image pour l'icône ou modifier le Sprite /skins/moono/icons.png pour ajouter le vôtre.

Dans votre plugin.js vous devez avoir quelque chose comme

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

Cet article sur la création du plugin CKEditor dans le contexte de Drupal peut également être utile http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal

Il existe des exemples de code et un guide étape par étape sur la création de votre propre plugin CKEditor avec un bouton personnalisé.

1
MiSHuTka

En ce qui concerne la police géniale, j'ai pu y parvenir en utilisant 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";
  }
}
0
Jeremy Lynch