PDA

View Full Version : [HOW-TO - vB4] Create a Custom Button for CK Editor (no file edits)


cellarius
19 Feb 2012, 15:58
This article explains how to add or remove buttons from CKEditor by using Ckeditor and vBulletin plugins. No standard file edits needed.

To add a button to CKEditor, you need to create a CKE plugin. This is an example code for such a plugin. It will add "Hello World" to the editor and spawn a JS alert.
Important note: This article is on the technique of adding a button, not on how you will get your button to do whatever it is you want it to do. There are plenty sites out there that give support for CKEditor plugins. The CKE API documentation can be found here (http://docs.cksource.com/ckeditor_api/).



First step: Create the CKEditor plugin

The editor plugin files reside in the folder [forumroot]/clientscript/ckeplugins. Create a new folder in there. For the purpose of this article, I'll name it celButtonDemo. Inside that folder, create a file called plugin.js. So you end up with this:
[forumroot]/clientscript/ckeplugins/celButtonDemo/plugin.js
Important note: Please take notice that "celButtonDemo" will have to be replaced in the folder name and in the following code examples accordingly!.

Inside plugin.js goes the plugin code:

CKEDITOR.plugins.add( 'celButtonDemo',
{
init : function( editor )
{
// This adds the button
editor.ui.addButton('celButtonDemo',
{
// label: adds a hover text to the button. This uses the vBulletin
// phrase "celButtonDemo" which you will have to add to your phrases
// and to pass to CKE in a plugin
label : editor.config.vbulletin.phrase.celButtonDemo,
// command: the command that will be executed. It's defined later
// in this file
command : 'celButtonDemo',
// icon: The path to the icon file you want to use for your button.
// Here we use buttonimage.png in the buttons directory defined for
// the current style (default: /images/editor)
icon: BBURL + '/' + IMGDIR_BUTTON + '/celButtonDemo.png',
});

// This defines the command that's executed when the button is clicked
editor.addCommand('celButtonDemo',
{
// modes: decide in what editor modes the button will be active;
// set to 0 to grey it out
modes : { enhancedsource:1, wysiwyg:1 },
// Execute your JS Code - CKE offers a great API:
exec: function(editor){
alert('Hello world!');
editor.insertHtml( 'Hello World! - Hello World!' );
}
});
}
});




Second step: vB Operations - register your button, add it to the toolbar, and more

In a second step we will create two vB plugins and a vB phrase. You should bundle all that together to a product, to have it all nicely together.

Let's start with the phrase: Go to AdminCP, create a phrase in the CKEditor phrase group, and name it CelButtonDemo. Enter "Hello World, hello Button" - or whatever. Save. Done.

Then create a new plugin at hook "editor_construct". This will add our button to the CKE configuration.


// Add our button to the extra plugins loaded
$this->config['_extraPlugins'] .= ',celButtonDemo';
// Register our phrase for the label of our button (see second step)
$this->config['vbulletin']['phrase']['celButtonDemo'] = $this->vbphrase['celButtonDemo'];


OK, now let's create the second plugin at hook "editor_toolbar_filter":
In this example, our button will be inserted after the Quote-Button. Your options to place the button can be found in /vb/ckeditor.php. See line 7 in the following code:


foreach ($toolbar AS &$row)
{
if (is_array($row))
{
foreach ($row AS $id => $cmd)
{
if ($cmd == 'Quote')
{
$row = array_merge(array_slice($row, 0, $id+1), array('celButtonDemo'), array_slice($row, $id+1));
break;
}
}
}
}


Last, not least, we need a nice little icon for our button. Upload that to /images/buttons and name it celButtonsDemo.png. Dimensions: 21x21 px.



Result (Screencast):
http://screencast-o-matic.com/watch/clnqDcazQ



Removing buttons

The technique used above to add the button can also be used to remove a button. Example: Removing the image button would look like that (hook "editor_toolbar_filter")


foreach ($toolbar AS &$row)
{
if (is_array($row))
{
foreach ($row AS $id => $cmd)
{
if ($cmd == 'Image')
{
array_splice($row,$id,1);
break;
}
}
}
}


Please note that removing the button will not render the attached bbcode inactive! However, you can use
$this->config['_removePlugins'] .= ',celButtonDemo';
at hook editor_construct to remove plugins.



Restricting buttons by editor-mode or usergroup

You have everything available to you in the vB-universe to restrict access to your button, just extend the if-condition. You can restrict by usergroup, or you can show a button only in a certain editor

The editor mode can be queried via $this->editor_type in plugins at editor_toolbar_filter:
fe = full
qr = quick reply
qe = quick edit
cms_article

Example:


foreach ($toolbar AS &$row)
{
// Condition extended: show new button only to Mods, Supermods, Admins and
// only in Quick Reply Editor:
if (is_array($row) AND is_member_of($vbulletin->userinfo['usergroupid'], 5, 6, 7) AND $this->editor_type == 'qr' )
{
foreach ($row AS $id => $cmd)
{
if ($cmd == 'Quote')
{
$row = array_merge(array_slice($row, 0, $id+1), array('celButtonDemo'), array_slice($row, $id+1));
break;
}
}
}
}



Have fun!
cellarius
.
.

Princeton
20 Feb 2012, 14:27
A lot of people will find this helpful. :up:

Great article!

Lynne
20 Feb 2012, 16:26
Nice! Thanks for taking the time to write this all out. :)

cellarius
20 Feb 2012, 17:46
Thought I'd save everyone else some time and effort. :)

socialteenz
22 Feb 2012, 01:57
Thanks Cellarius for the neat writeup!

abdobasha2004
24 Mar 2012, 19:50
this is real nice coding...thanks a lot :)

Sworm
11 Apr 2012, 12:42
Hi all, i don't know if this is the correct place, but i want to ask here.... This hack is super, but i have only need to add the "code" (standard vbulletin bbcode) in my QR - QE.

I have addedd in my qe and qr my custom bbcode (like spoiler for example) just adding this plugin via vbulletin ACP
if ($this->editor_type == 'qr' || $this->editor_type == 'qe')
{
$this->addCustomToolbarButtons();
}on the editor_construct hook. It's work fine for me.... but i have triyed to add the "code" button in my QE and QR without fortune .... Nobody can suggest me how to add just only the code button in qr and qe? Thanks

Lynne
11 Apr 2012, 15:50
Nobody can suggest me how to add just only the code button in qr and qe? Thanks
Did you try what I have written in my Quick Tip here - http://www.vbulletin.org/forum/showthread.php?t=265865

Sworm
11 Apr 2012, 19:49
Yes i did.... but please lynne, can u check my last post if mine it is a correct solution? Thanks

cstreater
02 Jul 2012, 03:55
Great article, and I was able to accomplish what I wanted to accomplish for a single button. However, what if I wanted to add 3-4 buttons? Do I need to create unique JS files and plug-in's for each?

cellarius
02 Jul 2012, 06:58
Yes.

cstreater
02 Jul 2012, 06:59
Thanks. Got it working great.

Badshah93
02 Jul 2012, 08:20
Great article, and I was able to accomplish what I wanted to accomplish for a single button. However, what if I wanted to add 3-4 buttons? Do I need to create unique JS files and plug-in's for each?

you can do it with one js file also, like i have done it in this mod.
http://www.vbulletin.org/forum/showthread.php?t=282328

cstreater
02 Jul 2012, 22:37
you can do it with one js file also, like i have done it in this mod.
http://www.vbulletin.org/forum/showthread.php?t=282328

This is awesome. Thanks to both of you :)

cstreater
05 Jul 2012, 00:21
Back again -- I can't get this permissions piece of the code to work:

if (is_array($row) AND is_member_of($vbulletin->userinfo['usergroupid'], 5, 6, 7) AND $this->editor_type == 'qr' )

If I include that line, the code that follows does not execute for anyone, regardless of group. I've been trying to figure this out for a while now, and I'm totally stuck.

LOGECT
14 Dec 2012, 20:08
thanks, this is very useful.
Is there any way to use {vb:raw vboptions.xxx} in plugin.js ?

DefiantComplex
08 Jan 2013, 21:40
Lets say i already have a bbcode, for example the [ hide ] for the dbtech post thanks mod.
How would i add it in this example?

root2012
14 May 2013, 16:48
foreach ($toolbar AS &$row)
{
if (is_array($row))
{
foreach ($row AS $id => $cmd)
{
if ($cmd == 'Image')
{
array_splice($row,$id,1);
break;
}
}
}
}

how is it possible to remove several button ?????

root2012
20 May 2013, 03:22
Unfortunately, no support here more or?????

Typhon
08 Jun 2013, 18:56
I can't seem to get this to work ... did something change between 4.2 and 4.2.1?

DaSpirit
03 Feb 2014, 21:32
Hello!

Great Plugin!

I want to just attach a link to my file that opens in new window. Would someone possiblly help me with that one?

Thanks a lot!

cellarius
03 Feb 2014, 21:37
No idea what you want to do, but this article is not about attaching anything to a file, but adding a button to the editor. Please open your own thread in the appropriate forums.

DaSpirit
03 Feb 2014, 23:05
No idea what you want to do, but this article is not about attaching anything to a file, but adding a button to the editor. Please open your own thread in the appropriate forums.

Thanks for the answer!

I want to make the button link to a file in a new window. I have no idea about php and I am new to the vbulletin as well, thats why I am a bit disoriented, sorry about that. I think that what I want is simple, but I do not how to do it :(

cellarius
04 Feb 2014, 06:21
OK. As I wrote in the article, this is not normally the place to ask for things that you want the button to do - this is for the addition of the button, not more.

Anyway: This has nothing to do with PHP - all of this is Javascript. And to open a page in a new window, you would add something like
window.open("http://www.your-page.com/goes/here.html");
to the exec part of my code. Like so:
exec: function(editor){
window.open("http://www.your-page.com/goes/here.html");
}
For the additional syntax of window.open just google that command. There's plenty of sites explaining that.

DaSpirit
05 Feb 2014, 01:56
Thanks a lot!

Easy5s.net
20 Mar 2014, 09:04
How to move custom button to End Toolbar

cellarius
20 Mar 2014, 09:37
By inserting it after the last button using the method described in the article.

tini_lam
18 Aug 2014, 11:06
vbb 4.2.3 not work. member can't click button... but admin can

cellarius
18 Aug 2014, 11:49
And? The article describes how you can restrict the button per usergroup. If you don't want that, don't implement it.

tini_lam
18 Aug 2014, 12:25
i use code
foreach ($toolbar AS &$row)
{
if (is_array($row))
{
foreach ($row AS $id => $cmd)
{
if ($cmd == 'Quote')
{
$row = array_merge(array_slice($row, 0, $id+1), array('celButtonDemo'), array_slice($row, $id+1));
break;
}
}
}
}

course members see this button but can't click it, just administrator can click it to use

akz645
07 Aug 2015, 15:47
And? The article describes how you can restrict the button per usergroup. If you don't want that, don't implement it.

How do I make the button appear/disappear, on a per forum basis?

Mobynet
25 Sep 2016, 22:30
how can I still register the bbcode.
if I investing here, I see no more toolbar

$this->config['_extraPlugins'] .= ',splitquote';