Domanda Pulsante Plugin personalizzati CKEditor


Ho scritto un plugin personalizzato per CKEditor - riuscito su tutti i fronti, salvarne uno al momento: non posso, per la vita di me, capire come personalizzare l'immagine sul pulsante nella barra degli strumenti dell'editor. Dato che sono un nuovo utente, dovrai fare clic per vedere l'immagine allegata; il riquadro evidenziato in alto a sinistra dovrebbe avere una bella immagine (come la maggior parte degli altri elementi della barra degli strumenti).

Screenshot


44
2017-07-16 19:28


origine


risposte:


Ho scritto un completo lezione coprendo ogni aspetto dello sviluppo di plugin CKeditor, inclusi pulsanti, menu contestuali, finestre di dialogo e altro ancora.


71
2018-01-26 16:32



La risposta è impostare la proprietà dell'icona delle impostazioni del pulsante in questo modo:

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

La directory del tuo plugin dovrebbe avere una sottodirectory "images" in cui il tuo pulsante dovrebbe andare. Nello snippet precedente, sostituisci "your-plugin.jpg" con l'immagine JPG, GIF o PNG per il tuo pulsante.

Questa risposta, ovviamente, presuppone che tu sappia come creare un'immagine di un pulsante usando alcuni editor di immagini come Gimp, Photoshop, ecc.


15
2018-04-01 20:08



Alcune informazioni per altri cercano di scrivere plugin per CKEditor 3.0.

Ho iniziato copiando la fonte da plugin / flash e ora ho un pulsante con un logo youtube .... questo è un estratto da plugin / youtube / plugin.js

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

Inoltre, dovrai modificare il tuo file di lingua .... ad es. lang / en.js

Aggiungi il tuo nome del plugin alla sezione "comune" (questo appare come suggerimento quando passi il mouse sopra il pulsante) e aggiungi un intero blocco per il tuo plugin, con tutte le tue stringhe, come questa ....

// 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
2017-08-17 23:21



questi sono alcuni plugin per CKEditor 3.x

Plugin CKEditor

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

Scaricare: CKEditor 3.x Plugin


4
2017-12-15 07:38



Prova anche questo link. Ti darà un po 'più di profondità sulla creazione di plugin CKEditor.

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


2
2018-01-28 12:14



C'è un tutorial piuttosto esaustivo sul sito Web di documentazione di CKEditor, vedi: CKEditor Plugin SDK - Introduzione

In questo momento copre:

  • Creazione di un comando di editor
  • Creazione del pulsante della barra degli strumenti con un'icona
  • Spiegazione su come registrare il plugin in CKEditor
  • Creazione della finestra di dialogo del plugin con due schede
  • Aggiunta del menu contestuale
  • Integrazione Advanced Content Filter (ACF) (su a pagina separata)

Se sei interessato a creare i tuoi widget, controlla anche Tutorial Widget SDK


2
2018-01-05 12:16



Anche questo articolo sulla creazione di plugin CKEditor nel contesto di Drupal può essere utile http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal

Ci sono esempi di codice e guida passo-passo sulla creazione del proprio plugin CKEditor con pulsante personalizzato.


1
2017-10-02 08:02



Per aggiungere la tua icona personalizzata è necessario modificare skins / moono / *. Css Per l'editor stesso è necessario aggiungere la stessa classe CSS nei seguenti file

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

Il nome del formato per una classe di pulsanti CSS è .cke_button__myCustomIcon_icona

Puoi usare il tuo file immagine per l'icona o modificare lo sprite /skins/moono/icons.png per aggiungere i tuoi.

Nel tuo plugin.js devi avere qualcosa come

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

1
2018-01-28 19:29



Per quanto riguarda il font fantastico, sono riuscito a ottenere ciò usando il 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
2018-04-10 14:22