 |
|
|
Article Options |
|
[HOW-TO - vB4] Create a Custom Button for CK Editor (no file edits)
by
19 Feb 2012
Rating:
 (4 votes
- 4.00 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:
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.
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:
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")
Please note that removing the button will not render the attached bbcode inactive! However, you can use
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:
Have fun! cellarius . . Last edited by cellarius; 01 Mar 2012 at 07:31.. |
||||||||||||||||||||||||
|
Views: 18633
|
||||||||||||||||||||||||
| Comments |
|
#2
20 Feb 2012, 14:27
|
||||
|
||||
|
A lot of people will find this helpful.
 Great article!
__________________
Former vBulletin.org Staff Member 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! No members have liked this post.
|
|
#3
20 Feb 2012, 16:26
|
||||
|
||||
|
Nice! Thanks for taking the time to write this all out.
__________________
Former vBulletin.org Staff Member
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.) No members have liked this post.
|
|
#4
20 Feb 2012, 17:46
|
||||
|
||||
|
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 No members have liked this post.
|
|
#5
22 Feb 2012, 01:57
|
||||
|
||||
|
Thanks Cellarius for the neat writeup!
__________________
Web development done right. read my Reviews (59) from here. Pm me - for custom forum work & web development No members have liked this post.
|
|
#6
24 Mar 2012, 19:50
|
||||
|
||||
|
this is real nice coding...thanks a lot
No members have liked this post.
|
|
#7
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
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 No members have liked this post.
|
||||
|
#8
11 Apr 2012, 15:50
|
||||
|
||||
|
Originally Posted by Sworm
Did you try what I have written in my Quick Tip here - http://www.vbulletin.org/forum/showthread.php?t=265865
__________________
Former vBulletin.org Staff Member
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.) No members have liked this post.
|
|
#9
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
No members have liked this post.
|
|
#10
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?
No members have liked this post.
|
|
#11
02 Jul 2012, 06:58
|
||||
|
||||
|
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 The following members like this post: cstreater
|
|
#12
02 Jul 2012, 06:59
|
|||
|
|||
|
Thanks. Got it working great.
The following members like this post: cellarius
|
|
#13
02 Jul 2012, 08:20
|
||||
|
||||
|
Originally Posted by cstreater
you can do it with one js file also, like i have done it in this mod.
The following members like this post: cstreater
|
||||
|
#14
02 Jul 2012, 22:37
|
||||
|
||||
|
Originally Posted by Badshah93
This is awesome. Thanks to both of you
No members have liked this post.
|
||||
|
#15
05 Jul 2012, 00:21
|
||||
|
||||
|
Back again -- I can't get this permissions piece of the code to work:
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. No members have liked this post.
|
||||
|
«
Previous Article
|
Next Article
»
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
|
|
| New To Site? | Need Help? |
All times are GMT. The time now is 23:34.
Powered by vBulletin® Version 3.8.14
Copyright © 2024, MH Sub I, LLC dba vBulletin. All Rights Reserved. vBulletin® is a registered trademark of MH Sub I, LLC
Copyright © 2024, MH Sub I, LLC dba vBulletin. All Rights Reserved. vBulletin® is a registered trademark of MH Sub I, LLC
Design by Princeton
Copyright ©2001 - , vbulletin.org. All rights reserved.
vBulletin® is a registered trademark.