Register Arama Bugünkü Mesajlar Mark Forums Read

Reply
 
Thread Tools
[HOW-TO - vB4] Create a Custom Button for CK Editor (no file edits)
vB.Org Poster
vB.Org Poster has disabled reputation
Kayıt Tarihi: Jul 2018
Mesajlar: 298

Show Printable Version Email this Page
Makale: vBulletin 4 Makaleleri, yazar vB.Org Poster 10 Jul 2018, 10:25

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:

Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.



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.


Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

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:


Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

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):
Custom CKEditor Button in vB



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


Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

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

Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

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:


Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.


Have fun!
cellarius
.
.
Views: 18
Reply With Quote
Reply

Thread Tools

Şunları Yapabilirsin
Yeni Konu Açmak
Konuya Cevap Yazmak
Eklenti Eklemek
Düzenleme Yapabilmek

Forum Atla


New To Site? Need Help?

All times are GMT +3. The time now is 15:25.

Tasarım Özelliği | Genişlik: Geniş Renk: [HOW-TO - vB4] Create a Custom Button for CK Editor (no file edits) [HOW-TO - vB4] Create a Custom Button for CK Editor (no file edits) [HOW-TO - vB4] Create a Custom Button for CK Editor (no file edits) [HOW-TO - vB4] Create a Custom Button for CK Editor (no file edits) [HOW-TO - vB4] Create a Custom Button for CK Editor (no file edits)