1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Add custom button to editor

Discussion in 'XenForo Development Discussions' started by infis, Aug 9, 2011.

  1. infis

    infis Well-Known Member

    I found this code in js/tinymce/themes/xenforo/editor_template.js:
                    addButtons : function (theme, tb)
                            var tags = theme.settings.[B]xenforo_custom_bbcode_tags[/B],
                                    controlManager = theme.editor.controlManager;
                                    { title: 'xenforo.quote', cmd: 'xenForoWrapBbCode', ui: false, value: 'QUOTE' }
                            if (typeof tags === 'undefined' || tags.length === 0 || tags === {})
                            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.
  2. ragtek

    ragtek Guest

  3. infis

    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:
    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);
    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.
                    xenforo_smilies: {xen:helper json, $smilies},
                    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.
    ragtek likes this.
  4. Andy.N

    Andy.N Well-Known Member

    Is it possible to add a custom button on the editor yet in XF 1.1?
  5. ragtek

    ragtek Guest

    Philip Morton and Digital Doctor like this.
  6. infis

    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:
    xenforo_custom_bbcode_tags: {<xen:hook name="editor_tinymce_init_smilies"></xen:hook>},
    2. Include this template in template editor_js_setup:

    Template editor_js_setup_smilies:

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

    4. Result:

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

    James Well-Known Member

    Did you consider requesting a new template hook http://xenforo.com/community/threads/template-hooks.7909/
  8. infis

    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.
  9. Alluidh

    Alluidh Well-Known Member


    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

    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

Share This Page