CKEditor Custom Plugins Button

Question

I wrote a special plugin for CKEditor - successfully on all fronts, save it for now: I can’t, for life, figure out how to configure the image on the button on the editor’s toolbar. Since I’m a new user, you need to click to see the attached picture; the selected square in the upper left should have a beautiful picture (like most other elements of the toolbar).

Answer 1

I wrote a complete tutorial covering all aspects of CKeditor plugin development, including buttons, context menus, dialogs, and more.

Answer 2

The answer is to set the button settings icon property as follows:

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

Your plugins directory should have a "images" subdirectory where your button should go. In the above snippet, replace "your-plugin.jpg" with a JPG, GIF, or PNG image for your button.

This answer, of course, assumes that you know how to create a button image using some kind of graphics editor such as Gimp, Photoshop, etc.

Answer 3

Some information for others is trying to write plugins for CKEditor 3.0.

I started by copying the source from the plugins / flash and now I got a button with the youtube logo .... this is an excerpt from plugins / youtube / plugin.js

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

You will also need to edit the language file ... for example. Lang / en.js

Add your plugin name to the "general" section (this displays as a tooltip when you hover over the button) and add an entire block for your plugin with all your lines, for example ...

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

these are some plugins for CKEditor 3.x

CKEditor Plugins

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

Download: CKEditor 3.x Plugins

Answer 5

Try this link. Give you a little more information about creating the CKEditor plugin.

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

Answer 6

There is a fairly comprehensive tutorial on the CKEditor documentation website: CKEditor Plugin SDK - Introduction

At this point, it covers:

• Creating an editor team
• Creating a toolbar button with an icon
• Explanation of how to register a plugin in CKEditor
• Creating a two-tab plugin dialog box
• Adding a context menu
• Advanced Content Filter (ACF) Integration (per page )

If you are interested in creating your own widgets, also check out the Widgets SDK Tutorial

Answer 7

This article about creating a CKEditor plugin in a Drupal context may also be useful http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal

There are code samples and a step-by-step guide to creating your own CKEditor plugin using a custom button.

Answer 8

To add your own icon, you need to edit the skins / moono / *. css For the editor itself you need to add the same CSS class to the following files

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

Format Name for CSS Button Class: .cke_button__myCustomIcon_icon

You can use your own image file for the icon or edit sprite / skins / moono / icons.png to add your own.

In your plugin.js you need something like

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

Answer 9

Regarding the awesome font, I was able to achieve this with 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"; } }