Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
[HOW-TO - vB4] Create a Custom Button for CK Editor (no file edits)
cellarius
Join Date: Aug 2005
Posts: 1,564

Augsburg, Germany
by cellarius cellarius is offline 19 Feb 2012
Rating: (3 votes - 3.67 average)

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.



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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



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.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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")


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Please note that removing the button will not render the attached bbcode inactive! However, you can use

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Have fun!
cellarius
.
.

Last edited by cellarius : 01 Mar 2012 at 07:31.
Views: 7094
Reply With Quote
Comments
  #2  
Old 20 Feb 2012, 14:27
Princeton's Avatar
Princeton Princeton is offline
 
Join Date: Nov 2001
Real name: Joe Velez
A lot of people will find this helpful.

Great article!
__________________
Latest Articles:
Liquid Layout = Less Ad Revenue?
How to Monetize Your Site
Improve Web Page Performance
How To Write For The Web


If it needs instructions, there's room for improvement.
Give users what they actually want, not what they say they want. And whatever you do, don't give them new features just because your competitors have them!
Reply With Quote
  #3  
Old 20 Feb 2012, 16:26
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: Lynne
Nice! Thanks for taking the time to write this all out.
__________________
Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #4  
Old 20 Feb 2012, 17:46
cellarius's Avatar
cellarius cellarius is offline
 
Join Date: Aug 2005
Real name: Sven
Thought I'd save everyone else some time and effort.
__________________
Please note that there will be no further updates to my addons, especially they will not be upgraded for vB5. I'm leaving vB, since IB choose to go the banana-way yet again.

http://www.roma-antiqua.de
Reply With Quote
  #5  
Old 22 Feb 2012, 01:57
socialteenz's Avatar
socialteenz socialteenz is offline
 
Join Date: May 2011
Thanks Cellarius for the neat writeup!
__________________
>>51<<
Pm me if you need any custom work to be done on your forum

Reply With Quote
  #6  
Old 24 Mar 2012, 19:50
abdobasha2004's Avatar
abdobasha2004 abdobasha2004 is offline
 
Join Date: Aug 2008
this is real nice coding...thanks a lot
__________________
Egypt News website, latest Egyptian news updated instantly.
Reply With Quote
  #7  
Old 11 Apr 2012, 12:42
Sworm Sworm is offline
 
Join Date: Feb 2008
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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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
Reply With Quote
  #8  
Old 11 Apr 2012, 15:50
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: Lynne
Originally Posted by Sworm View Post
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
__________________
Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #9  
Old 11 Apr 2012, 19:49
Sworm Sworm is offline
 
Join Date: Feb 2008
Yes i did.... but please lynne, can u check my last post if mine it is a correct solution? Thanks
Reply With Quote
  #10  
Old 02 Jul 2012, 03:55
cstreater cstreater is offline
 
Join Date: May 2010
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?
Reply With Quote
  #11  
Old 02 Jul 2012, 06:58
cellarius's Avatar
cellarius cellarius is offline
 
Join Date: Aug 2005
Real name: Sven
Yes.
__________________
Please note that there will be no further updates to my addons, especially they will not be upgraded for vB5. I'm leaving vB, since IB choose to go the banana-way yet again.

http://www.roma-antiqua.de
Reply With Quote
  #12  
Old 02 Jul 2012, 06:59
cstreater cstreater is offline
 
Join Date: May 2010
Thanks. Got it working great.
Reply With Quote
  #13  
Old 02 Jul 2012, 08:20
Badshah93's Avatar
Badshah93 Badshah93 is offline
 
Join Date: Jun 2010
Originally Posted by cstreater View Post
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.

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Reply With Quote
  #14  
Old 02 Jul 2012, 22:37
cstreater cstreater is offline
 
Join Date: May 2010
Originally Posted by Badshah93 View Post
you can do it with one js file also, like i have done it in this mod.

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.
This is awesome. Thanks to both of you
Reply With Quote
  #15  
Old 05 Jul 2012, 00:21
cstreater cstreater is offline
 
Join Date: May 2010
Back again -- I can't get this permissions piece of the code to work:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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.
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Article Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Jump


New To Site? Need Help?

All times are GMT. The time now is 14:00.

Layout Options | Width: Wide Color: