Add custom button to editor

infis

Well-known member
I found this code in js/tinymce/themes/xenforo/editor_template.js:
Code:
                addButtons : function (theme, tb)
                {
                        var tags = theme.settings.[B]xenforo_custom_bbcode_tags[/B],
                                controlManager = theme.editor.controlManager;

                        //tb.add(controlManager.createControl('|'));

                        tb.add(controlManager.createButton('xenforo_quote',
                                { title: 'xenforo.quote', cmd: 'xenForoWrapBbCode', ui: false, value: 'QUOTE' }
                        ));

                        if (typeof tags === 'undefined' || tags.length === 0 || tags === {})
                        {
                                return;
                        }

                        tinymce.each(tags, function(tag, tagName) {
                                tb.add(controlManager.createButton('xenforo_custom_bbcode_' + tag,
                                        {title : tag[0], image : tag[1], cmd : 'xenForoWrapBbCode', ui : false, value : tagName}
                                ));
                        });
                },
Where and how I can create or change xenforo_custom_bbcode_tags array? I want use it in my add-on.
 

infis

Well-known member
Yes, the given way of addition custom button is simple. But it is necessary not always. If it is necessary to insert only a BB-code, that is such way.
Create a template hook event listener, to add the necessary changes to the template:
PHP:
case 'editor_tinymce_init':
  $bbcode_tags['BB-code'] = array('Button name', 'styles/default/xenforo/smilies/smile.png');
  $contents .= ', xenforo_custom_bbcode_tags: ' . json_encode($bbcode_tags);
break;
But it can be used only once.
As a variant it is possible to try to change a template editor_js_setup where by analogy to a array of smiles it is possible to insert own array of buttons.
After
Code:
                xenforo_smilies: {xen:helper json, $smilies},
insert
Code:
                xenforo_custom_bbcode_tags: {xen:helper json, $custom_bbcode_tags},
and in hook event listener create or modify array $custom_bbcode_tags. I didn't check, whether it will work, but is assured that will be.
 

infis

Well-known member
I am in searches of the simple and effective decision for adding of the user button for a BB-code in the panel of the editor.
While there is such variant, but, am afraid that it is not optimal, though provides operation of any amount add-on's.

1. Create a new template editor_js_setup_smilies and write to:
Code:
xenforo_custom_bbcode_tags: {<xen:hook name="editor_tinymce_init_smilies"></xen:hook>},

2. Include this template in template editor_js_setup:
hook_smile1.png

Template editor_js_setup_smilies:
hook_smile2.png

3. To use it in add-on (by hook):
PHP:
class TestBB_Listener {
        public static function test_func($hookName, &$contents, array $hookParams, XenForo_Template_Abstract $template)
        {
                if ($hookName == 'editor_tinymce_init_smilies')
                {
                        $contents .= '"BB-код":["Мой смайл","styles/default/xenforo/smilies/smile.png"],';

                }
        }
}

4. Result:
hook_smile3.png

There are other more simple ways of the decision? Whether developers can add any possibilities simplifying creation of such buttons? Besides direct editing of a template is not the satisfactory decision.
 

James

Well-known member
I am in searches of the simple and effective decision for adding of the user button for a BB-code in the panel of the editor.
While there is such variant, but, am afraid that it is not optimal, though provides operation of any amount add-on's.

1. Create a new template editor_js_setup_smilies and write to:
Code:
xenforo_custom_bbcode_tags: {<xen:hook name="editor_tinymce_init_smilies"></xen:hook>},

2. Include this template in template editor_js_setup:
View attachment 20323

Template editor_js_setup_smilies:
View attachment 20324

3. To use it in add-on (by hook):
PHP:
class TestBB_Listener {
        public static function test_func($hookName, &$contents, array $hookParams, XenForo_Template_Abstract $template)
        {
                if ($hookName == 'editor_tinymce_init_smilies')
                {
                        $contents .= '"BB-код":["Мой смайл","styles/default/xenforo/smilies/smile.png"],';

                }
        }
}

4. Result:
View attachment 20325

There are other more simple ways of the decision? Whether developers can add any possibilities simplifying creation of such buttons? Besides direct editing of a template is not the satisfactory decision.
Did you consider requesting a new template hook http://xenforo.com/community/threads/template-hooks.7909/
 

infis

Well-known member
No. It not the correct way of the decision of the given problem.
After all this only partial decision. For example, there is no possibility to add the bb-code with parametres, and also it doesn't do possible to insert the button with the custom event.
The problem is deeper, than my decision.
 

Alluidh

Well-known member
Hi

Sorry to bring this thread back to life, but I have the same problem without any solution

I had used the BB Code Manager to create some more BB Codes (float left/right, sub, sup, spoiler, ...)
After that I've created some new Icons in 20x20 png and installed the Cel Editor Button Management for build an icon order like this
editor_new.jpg

But this is only a dream screen, because I didn't find a way to get
1. combine the new BB Code with a function behind the new icons
2. combine the new icons with the editor for using them in the Cel Editor Button Management

I know there is an Adding own buttons to the Editor Toolbar from ragtek but I don't understand the way.

I only want the new icons and with creating something like [float_left] [/flaot_left] [float_right] [/flaot_right] and so on.
The BB Codes themself work great, but this is not the goal

Is someone able to help?

Thanks a lot
 
Top