Бормотухи.НЕТ

Вернуться   Бормотухи.НЕТ > Web-мастеру > vBulletin 4.x > Инструкции и модификации для vBulletin 4.x
Расширенный поиск

Инструкции и модификации для vBulletin 4.x Различные инструкции и моды для vBulletin 4.x

Ответ
 
Опции темы Поиск в этой теме
Старый 11.08.2012, 12:22 Вверх   #1
Пользователь
 
Аватар для Fenix8P
Fenix8P вне форума
Доп. информация
Вопрос [HOW-TO - vB4] Create a Custom Button for CK Editor (no file edits)

Serberg, опубликуйте пожалуйста эту тему
http://www.vbulletin.org/forum/showthread.php?t=278828
Думаю многим она будет полезной.
Спасибо
  Ответить с цитированием
Старый 11.08.2012, 13:19 Вверх   #2
Местный житель
 
Аватар для MiRox33
MiRox33 вне форума
Доп. информация
По умолчанию

Хоть я не Serberg, так и быть опубликую.

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. 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:

PHP код:
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)
            
iconBBURL '/' 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:1wysiwyg:},
            
// 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 код:
// 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")

PHP код:
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

PHP код:
$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:

PHP код:
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'], 567) AND $this->editor_type == 'qr' )
    {
        foreach (
$row AS $id => $cmd)
        {
            if (
$cmd == 'Quote')
            {
                
$row array_merge(array_slice($row0$id+1),  array('celButtonDemo'), array_slice($row$id+1));
                break;
            }
        }
    }

Have fun!
  Ответить с цитированием
2 пользователя(ей) сказали cпасибо:
Старый 11.08.2012, 13:32 Вверх   #3
Знаток
 
Аватар для sertaras
sertaras вне форума
Доп. информация
По умолчанию

А перевод сделать не судьба?
  Ответить с цитированием
Старый 11.08.2012, 16:04 Вверх   #4
Пользователь
 
Аватар для Fenix8P
Fenix8P вне форума
Доп. информация
Смущение

Цитата Сообщение от sertaras Посмотреть сообщение
А перевод сделать не судьба?
Мда, перевести не мешало бы... Не все понятно
  Ответить с цитированием
Старый 11.08.2012, 22:57 Вверх   #5
Коварный тип
 
Аватар для Serberg
Serberg вне форума
Доп. информация
По умолчанию

Оффтоп
  Ответить с цитированием
Ответ


Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход


Текущее время: 02:13. Часовой пояс GMT +3.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2024, vBulletin Solutions, Inc. Перевод: zCarot
 

Время генерации страницы 0.17268 секунды с 13 запросами