CKEditor klienta Wtyczki Przycisk

Question

Pisałem niestandardowy plugin CKEditor - udany pod każdym względem, z wyjątkiem jednego komunikatu: Nie mogę za życie mnie, dowiedzieć się, jak dostosować obraz na przycisk w pasek narzędzi edytora. Ponieważ jestem nowym użytkownikiem, będziesz musiał kliknąć, aby zobaczyć dołączony obraz; podświetlony kwadrat w lewym górnym rogu powinien mieć ładny obrazek (jak większość innych elementów paska narzędzi).

Answer 1

Kilka informacji dla innych spróbować napisać wtyczek dla CKEditor 3.0.

zacząłem kopiując źródło z plugins/flash, a teraz mam przycisk z logo YouTube .... to jest wyciąg z plugins/youtube/plugin.js

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

Również musisz edytować plik językowy ... np lang/en.js

Dodaj swoją nazwę wtyczki do "wspólnej" sekcji (pojawia się jako etykieta narzędziowa po najechaniu myszką na przycisk) i dodaj cały blok wtyczki, ze wszystkimi Twoimi ciągami, jak to ... ..

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

są niektóre wtyczki dla CKEditor 3.x

CKEditor Wtyczki

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

Download: CKEditor 3.x Plugins

Answer 3

Pisałem kompletnym tutorial obejmujące każdy aspekt rozwoju wtyczki CKEditor, włącznie z przyciskami, menu kontekstowe, dialogów i innych.

Answer 4

Spróbuj również tego linku. Daje ci trochę więcej głębi w tworzeniu wtyczki CKEditor.

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

Answer 5

Odpowiedź jest ustawić właściwość ikonę ustawień przycisków tak:

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

Twój katalog wtyczki powinien mieć „images” podkatalog gdzie przycisk powinien przebycia. W powyższym fragmencie zastąp "your-plugin.jpg" obrazem JPG, GIF lub PNG dla swojego przycisku:

Ta odpowiedź zakłada oczywiście, że wiesz, jak utworzyć obraz przycisku za pomocą edytora obrazów, takiego jak Gimp, Photoshop, itp

Answer 6

Ten artykuł o tworzeniu wtyczek w kontekście CKEditor Drupal może być użyteczne zbyt http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal

Istnieją przykłady kodu i krok po kroku podręcznik o budowie własnej wtyczki CKEditor z przycisku niestandardowego.

Answer 7

Jest dość wyczerpujący poradnik na CKEditor Documentation WWW, patrz: CKEditor Plugin SDK - Introduction

W tej chwili obejmuje:

• tworząc polecenie Edytor
• Tworzenie paska narzędzi przycisk z ikoną
• Wyjaśnienie, jak zarejestrować wtyczkę w CKEditor
• Tworzenie okna dialogowego Plugin z dwiema zakładkami
• Dodawanie menu kontekstowego
• zaawansowane filtr treści (ACF) Integracja (na separate page)

Jeśli jesteś zainteresowany w tworzeniu własnych widżetów, sprawdź również Widgets SDK Tutorial

Answer 8

Aby dodać niestandardową ikonę ty trzeba zmieniać skórki/moono/*. css dla edytora się trzeba dodać taką samą klasę CSS w następujących plikach

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

Nazwa format klasy przycisk CSS jest . cke_button__ myCustomIcon _icon

Możesz e używaj własnego pliku obrazu dla ikony lub edytuj ikonkę /skins/moono/icons.png, aby dodać swoje.

W swoim plugin.js trzeba mieć coś podobnego

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

Answer 9

Odnośnie czcionki niesamowite, udało mi się osiągnąć to za pomocą 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"; 
    } 
}