Geek Answers Handbook

CKEditor format class

I am writing a CKEditor plugin to apply a specific class to an element. Basically this class sets the text color to a specific red color.

In any case, I don’t understand how to define a class for wrapped text.

Please see my plugin code:

CKEDITOR.plugins.add( 'red', { init: function( editor ) { editor.addCommand( 'red', { exec : function( editor ) { var format = { element : 'span' }; var style = new CKEDITOR.style(format); style.apply(editor.document); } }); editor.ui.addButton( 'red', { label: 'red', command: 'red', icon: this.path + 'images/red.png' } ); } } );

Basically, I want to have an output like:

 <span class="red">This is now a red text</span>

Thanks for helping me.

Sources I used for this: http://docs.cksource.com/CKEditor_3.x/Howto http://docs.cksource.com/CKEditor_3.x/Tutorials/Timestamp_Plugin http://docs.cksource.com/ ckeditor_api / symbols / CKEDITOR.command.html # exec

Maybe I'm redoing something, but it doesn't seem to me that such things are mentioned here? Please confirm that I am wrong :)

+4
source share
1 answer

You can use the plugin "basicstyles" as a template, it creates various style buttons (in bold, italics, etc.):
CKEditor / _source / plugins / basicstyles / plugin.js

Here is the code for your plugin (based on the basicstyles plugin), this will be the contents of the plugin.js file located here:
CKEditor / plugins / red / plugin.js

The icon for the button will be located here:
CKEditor / Plugins / Red / Images

 CKEDITOR.plugins.add( 'red', { requires : [ 'styles', 'button' ], init : function( editor ) { // This "addButtonCommand" function isn't needed, but // would be useful if you want to add multiple buttons var addButtonCommand = function( buttonName, buttonLabel, commandName, styleDefiniton ) { var style = new CKEDITOR.style( styleDefiniton ); editor.attachStyleStateChange( style, function( state ) { !editor.readOnly && editor.getCommand( commandName ).setState( state ); }); editor.addCommand( commandName, new CKEDITOR.styleCommand( style ) ); editor.ui.addButton( buttonName, { label : buttonLabel, command : commandName, icon: CKEDITOR.plugins.getPath('red') + 'images/red.png' }); }; var config = editor.config, lang = editor.lang; // This version uses the language functionality, as used in "basicstyles" // you'll need to add the label to each language definition file addButtonCommand( 'Red' , lang.red , 'red' , config.coreStyles_red ); // This version hard codes the label for the button by replacing `lang.red` with 'Red' addButtonCommand( 'Red' , 'Red' , 'red' , config.coreStyles_red ); } }); // The basic configuration that you requested CKEDITOR.config.coreStyles_red = { element : 'span', attributes : {'class': 'red'} }; // You can assign multiple attributes too CKEDITOR.config.coreStyles_red = { element : 'span', attributes : { 'class': 'red', 'style' : 'background-color: yellow;', 'title' : 'Custom Format Entry' } };

Add a style for the red class to the cceditor contents.css file in addition to your regular stylesheet (unless you load a regular sheet as a custom css file into ckeditor).

Add a new plugin to the configuration file:

 config.extraPlugins = 'red';

And add a button to the 'Red' toolbar

For a label, you can create an array with different labels assigned to each language code and display the correct version based on the code of the active language. Use editor.langCode to get the active language code.

If you do not want to add a button, you can add a new entry in the "Format" Selector. This is a header selector.

Be healthy,
Joe

+5
source

More articles:


All Articles