CKEditor Custom Plugins Button

Question

J'ai écrit un plugin personnalisé pour CKEditor - réussi sur tous les fronts, enregistrez un actuellement: Je ne peux pas, pour la vie de moi, comprendre comment personnaliser l'image sur le bouton dans le barre d'outils de l'éditeur. Comme je suis un nouvel utilisateur, vous devrez cliquer pour voir l'image ci-jointe; le carré surligné en haut à gauche devrait avoir une jolie image (comme la plupart des autres éléments de la barre d'outils).

Answer 1

Quelques infos pour d'autres tentent d'écrire des plugins pour CKEditor 3.0.

J'ai commencé en copiant la source de plug-ins/flash et ont maintenant obtenu un bouton avec un logo youtube .... Ceci est un extrait de plug-ins/youtube/plugin.js

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

également vous aurez besoin de modifier votre fichier de langue .... par exemple Ajoutez le nom de votre plugin à la section "common" (cela apparaît comme une info-bulle lorsque vous passez la souris sur 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 2

ce sont des plugins pour CKEditor 3.x

CKEditor plugins

Highslide JS Plugin, Plugin LrcShow, fileicon Plugin, InsertHtml Plugin, SyntaxHighlighter Plugin

Télécharger: CKEditor 3.x Plugins

Answer 3

J'ai écrit un tutorial complet couvrant tous les aspects du développement du plugin CKeditor, y compris les boutons, les menus contextuels, des dialogues et plus encore.

Answer 4

Essayez également ce lien. Vous donnera plus de profondeur sur la création de plugins CKEditor.

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

Answer 5

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

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

Votre répertoire plugin devrait avoir un sous-répertoire « images » où votre bouton doit 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.

Answer 6

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

Il y a des exemples de code et étape par étape guide sur la construction de votre propre plugin CKEditor avec bouton personnalisé.

Answer 7

Il y a un tutoriel assez exhaustif sur le Site CKEditor de documentation, voir: CKEditor Plugin SDK - Introduction

En ce moment, il couvre:

• Création d'un éditeur de commandes
• Création du bouton de la barre d'outils avec une icône
• Explication sur l'enregistrement du plugin dans CKEditor
• Création d'une fenêtre de dialogue de plugin avec deux onglets
• Ajout du menu contextuel
• intégration de filtrage de contenu avancé (ACF) (sur separate page)

Si vous êtes intéressé par la création de vos propres widgets, vérifiez également Widgets SDK Tutorial

Answer 8

Pour ajouter votre icône personnalisée vous besoin de modifier peaux/Moono/*. pour l' css é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 pour une classe de bouton CSS est . cke_button__ myCustomIcon _icon

Vous pouvez e Utilisez votre propre fichier image pour l'icône ou modifiez l'image-objet /skins/moono/icons.png pour ajouter les vôtres.

Dans votre plugin.js vous devez avoir quelque chose comme

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

Answer 9

police génial En ce qui concerne, 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"; 
    } 
}