ckeditor customization

[fromtheflames]

Hi,

I want to share how to make customization to ckeditor.

Before upgrade to 417, I'd made some modification to ckeditor toolbar adding the templates button (in /vb/ckeditor.php) and modifying the default templates (in /clientscript/ckeditor/plugins/templates/templates/default.js).

After the upgrade, all went wiped out (files overwritten by default files).

So today, I looked to found a new way for retain customization to ckeditor: is as easy as adding a new plugin, using the hook editor_toolbar_set, with code like this:

PHP Code:

$newButton = array('Templates');
$this->config['toolbar'][] = $newButton;
$newTemplateConfig = array('/clientscript/ckeditor/plugins/templates/templates/custom.js');
$this->config['templates_files'][] = $newTemplateConfig; 


That's all!
Hopes it can help some of you...

[shyguy82]

Thanks for sharing your find. Can you be so kind and post a little step by step on how to add a new button to the CKEditor's toolbar? I've looked at the CKEditor's documentation and it seems pretty straight forward but after looking at vB's implementation of CKEditor, I realized that the file structure in vB is different than in CKEditor core.

Thanks in advance.

[Disasterpiece]

I see how this works with the template js files and such, but it seems a bit too overkill to create a button which only wraps a tag like the code tag for example...

Isn't there an easier way to accomplish this?

[fromtheflames]

overkill yes, but the first (and perhaps the only) that I was able to think; any new suggestion is welcome

step by step? uh let's try
1) go to "plugins and products" in your admincp
2) at the bottom, click "add new plugin"
3) select "vbulletin" as product, "editor_toolbar_set" as hook, pick a descriptive name as title, leave execution order as is, and add the following as php code

PHP Code:

$newButton = array('Templates'); 
$this->config['toolbar'][] = $newButton; 


I used 'Templades' in the newButton array because I want that button, but you might replace it with the button you need.

[shyguy82]

fromtheflames, thank you very much. This is a great start. Now the only questions I have left is:

1. what javascript file do I use to add my client-side code?
2. How do I access CKEditor object in javascript to write back to the text editor?

Thank you very much