Я написал специальный плагин для CKEditor - успешно на всех фронтах, сохраните его в настоящее время: я не могу, на всю жизнь, выяснить, как настроить изображение на кнопке на панели инструментов редактора, Поскольку я новый пользователь, вам нужно щелкнуть, чтобы увидеть прикрепленное изображение; выделенный квадрат в левом верхнем углу должен иметь красивую картинку (как и большинство других элементов панели инструментов).
Я написал полный учебник, охватывающий все аспекты разработки плагинов CKeditor, включая кнопки, контекстные меню, диалоги и многое другое.
Ответ заключается в том, чтобы установить свойство значка настроек кнопки следующим образом:
editor.ui.addButton('your-plugin', {
label: 'Your Plugin Label',
command: 'YourPlugin',
icon: this.path + 'images/your-plugin.jpg'
});
В вашем каталоге плагинов должен быть подкаталог "images", куда должна идти ваша кнопка. В приведенном выше фрагменте замените "your-plugin.jpg" изображением JPG, GIF или PNG для вашей кнопки.
Этот ответ, конечно, предполагает, что вы знаете, как создать изображение кнопки с помощью какого-то графического редактора, такого как Gimp, Photoshop и т.д.
Некоторая информация для других пытается написать плагины для CKEditor 3.0.
Я начал с копирования источника из плагинов /flash и теперь получил кнопку с логотипом youtube.... это выдержка из plugins/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.'
}
это некоторые плагины для CKEditor 3.x
Плагины CKEditor
Плагин Highslide JS, Плагин LrcShow, Плагин FileIcon, Плагин InsertHtml, Плагин SyntaxHighlighter
Загрузить: Плагины CKEditor 3.x
Попробуйте эту ссылку. Дайте вам немного больше информации о создании плагина CKEditor.
Существует довольно исчерпывающий учебник по веб-сайту документации CKEditor: CKEditor Plugin SDK - Введение
В этот момент он охватывает:
Если вы заинтересованы в создании собственных виджетов, проверьте также Widgets SDK Tutorial
Эта статья о создании плагина CKEditor в контексте Drupal может быть полезна также http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal
Есть примеры кода и пошаговое руководство по созданию собственного плагина CKEditor с помощью настраиваемой кнопки.
Чтобы добавить свой собственный значок, вам нужно отредактировать скины /moono/ *. css Для самого редактора вам нужно добавить тот же класс CSS в следующие файлы
Имя формата для класса кнопки CSS: .cke_button__myCustomIcon_icon
Вы можете использовать свой собственный файл изображения для значка или отредактировать sprite/skins/moono/icons.png, чтобы добавить свой.
В вашем plugin.js вам нужно что-то вроде
editor.ui.addButton('myplugin',
{
label: 'myplugin',
command: FCKCommand_myplugin,
icon: 'myCustomIcon'
});
Что касается шрифта awesome, я смог добиться этого с помощью 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";
}
}