The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
|
|||||||
|
[HOW-TO - vB4] Create a Custom Button for CK Editor (no file edits)
 cellarius
Join Date: Aug 2005
Posts: 1,987
02-18-2012, 11:00 PM
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: 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. PHP Code:
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: PHP Code:
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") PHP Code:
PHP Code:
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: PHP Code:
Have fun! cellarius . . 
|
|
#23
02-03-2014, 09:37 PM
|
||||
|
||||
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.
|
|
#24
02-03-2014, 11:05 PM
|
|||
|
|||
|
Quote:
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 
|
|
#25
02-04-2014, 06:21 AM
|
||||
|
||||
|
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 Code:
window.open("http://www.your-page.com/goes/here.html");
Code:
exec: function(editor){
window.open("http://www.your-page.com/goes/here.html");
}
|
|
#27
03-20-2014, 09:04 AM
|
|||
|
|||
|
How to move custom button to End Toolbar
|
|
#28
03-20-2014, 09:37 AM
|
||||
|
||||
|
By inserting it after the last button using the method described in the article.
|
| 2 благодарности(ей) от: | ||
| Easy5s.net, TheLastSuperman | ||
|
#31
08-18-2014, 11:25 AM
|
|||
|
|||
|
i use code
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;
}
}
}
}
|
 |
«
Previous Thread
|
Next Thread
»
| Thread Tools | |
|
|
All times are GMT. The time now is 10:41 AM.