CKEditor Пользовательские плагины Кнопка

Question

Я написал собственный плагин для CKEditor - успешно на всех фронтах, сохраните его в настоящее время: я не могу, на всю жизнь, выяснить, как настроить изображение на кнопке в панель инструментов редактора. Поскольку я новый пользователь, вам нужно щелкнуть, чтобы увидеть прикрепленное изображение; выделенный квадрат в левом верхнем углу должен иметь красивую картинку (как и большинство других элементов панели инструментов).

Answer 1

Некоторая информация для других пытаются писать плагины для CKEditor 3.0.

Я начал скопировав исходный код из плагинов/прошивки и теперь есть кнопка с логотипом YouTube .... это выдержка из плагинов/YouTube/plugin.js

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

Также вам нужно будет отредактировать языковой файл ... например lang/en.js

Добавьте свое имя плагина в раздел «общий» (это отображается как всплывающая подсказка при наведении курсора мыши над кнопкой) и добавьте целый блок для вашего плагина со всеми вашими строками, например. ..

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

это некоторые плагины для CKEditor 3.x

CKEditor Плагины

Highslide JS плагин, LrcShow Plugin, FileIcon Plugin, InsertHtml Plugin, SyntaxHighlighter Плагин

Скачать: CKEditor 3.x Plugins

Answer 3

Я написал полный tutorial охватывающих все аспекты разработки плагинов CKEditor, включая кнопки, контекстные меню, диалоговые окна и многое другое.

Answer 4

Пробуйте эту ссылку. Дает вам немного больше информации о создании плагина CKEditor.

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

Answer 5

Ответ установить значок свойство настроек кнопки следующим образом:

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

Ваш каталог плагин должен иметь «изображения» подкаталог, где ваша кнопка должна идти. В приведенном выше фрагменте замените «your-plugin.jpg» изображением JPG, GIF или PNG для вашей кнопки.

Этот ответ, конечно, предполагает, что вы знаете, как создать изображение кнопки, используя какой-либо редактор изображений, например Gimp, Photoshop и т.д.

Answer 6

Эта статья о создании плагина CKEditor в контексте Drupal может быть полезно слишком http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal

Есть примеры кода и шаг за шагом руководство о создании собственного CKEditor плагина с пользовательской кнопкой.

Answer 7

Существует довольно исчерпывающий учебник по CKEditor документации Сайт, см: CKEditor Plugin SDK - Introduction

На данный момент она охватывает:

• Создание редактора Command
• Создание кнопки панели инструментов со значком
• Объяснение о том, как зарегистрировать плагин в CKEditor
• Создание окна диалога плагина с двумя вкладками
• Добавление контекстного меню
• Advanced Content Filter интеграция (ACF) (на separate page)

Если вы заинтересованы в создании собственных виджетов, проверьте также Widgets SDK Tutorial

Answer 8

Чтобы добавить пользовательский значок нужно редактировать скины/moono/*. CSS для редактора себя нужно добавить один и тот же класс CSS в следующих файлах

• editor.css
• editor_gecko.css (светлячок)
• editor_ie.css
• editor_ie7.css
• editor_ie8.css
• editor_iequirks.css

Имя формата для класса кнопки CSS является . cke_button__ myCustomIcon _icon

Вы можете e ither использует ваш собственный файл изображения для значка или отредактируйте sprite /skins/moono/icons.png, чтобы добавить свой.

В вашем plugin.js вам нужно иметь что-то вроде

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

Answer 9

Что касается шрифта удивительного, я был в состоянии достичь этого с помощью 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"; 
    } 
}