How to add own button to the editor?

[Vladislav Rastrusny]

Hello.

How do we add a button to the editor? I tried the same tinyMCE way as in WordPress, but the button just doesn't want to be added. I've created a hook listener for editor_js_setup like this:

<?php

class FractalizeR_Translit_TemplateHookListener {

    static function editor_js_setup($name, &$contents, array $params,
            XenForo_Template_Abstract $template) {
        static $done;
        if ($done === true) {
            return;
        }
        $done = true;
        $contents .= <<<'EOD'
        <script language="javascript">
        $(
    function() {
    if(window.tinymce) {
    // Load plugin specific language pack
    tinymce.create('tinymce.plugins.XfrTranslit', {
        init : function (ed, url)
        {
            ed.addCommand('xfrTranslit', function(ui, val)
            {
                alert("Done!!!");
            });
            // Register WPSynHighlight button
            ed.addButton('xenforo_translit', {
                title : 'xenforo_translit',
                cmd : 'xfrTranslit',
                image : url + '/img/button.gif'
            });

        },

        addButtons : function (theme, tb)
        {
            var controlManager = theme.editor.controlManager;

            tb.add(controlManager.createButton('xenforo_translit',
                { title: 'xenforo.translit', cmd: 'xfrTranslit', ui: false, value: 'TRANSLIT' }
            ));
        },

        getInfo : function()
        {
            return {
                longname : 'XenForo Translit',
                author : 'FractalizeR',
                version : '1.0'
            };
        }
    });


    // Register plugin
    tinymce.PluginManager.add('XfrTranslit', tinymce.plugins.XfrTranslit);
        }
    }
 );
</script>
EOD;
    }
}

But the button does not appear. What do I do wrong?

 

[makdeniss]

I am also interested in this question.

 

[karev]

im interested too

 

[mizter1nho]

Im interesting.

 

[ragtek]

finally

after some hours playing around with it:



ATM i had to edit the editor_template.js ( but i think that this should be also possible without file edit), change the tinymce plugin code via template hook editor_js_setup and add the button via

 .xenForoSkin span.mce_ragtek_php { background:url(path to phpimg) no-repeat; }

 

[ragtek]

that's what i have now added to editor_template.js (i have no time to play around with this, maybe somebody else can add this to the perfect template hook location^^

    tinymce.create('tinymce.plugins.XenForoCode2', {
        addButtons : function (theme, tb)
        {
            var controlManager = theme.editor.controlManager,
                ed = theme.editor,
                button, DOM = tinymce.DOM;


            button = controlManager.createButton('xenforo_code2', {
                title : 'xenforo.code',
                cmd : 'xenForoWrapBbCode',
                value: 'PHP'

            });
            tb.add(button);
        },

        getInfo : function()
        {
            return {
                longname : 'XenForo Code',
                author : '',
                version : '1.0'
            };
        }
    });
 tinymce.PluginManager.add('xenforo_code2', tinymce.plugins.XenForoCode2);

that's my plugin code:

                case 'editor':

                    $code = $template->create('ragtek_pt_editorjs')->render();
                    $code .= '<style type="text/css">
                    .xenForoSkin span.mce_xenforo_code2 { background:url(http://kamleitner.com/wp-content/themes/blackone-10/img/icon_php.gif) no-repeat; }
                    </style> ';
                    $contents = $contents . $code;
                    break;

                case 'editor_js_setup':
                    $search = "var plugins = '";
                    $replace = "var plugins = '-xenforo_code2,";
                    $contents = str_replace($search, $replace, $contents);
                    break;
                    case 'editor_tinymce_init':
                        $addToTemplate = ",\ntheme_xenforo_buttons2 : 'bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,outdent,indent,|,link,unlink,image,xenforo_media,|,xenforo_code,|,xenforo_code2,|,xenforo_custom_bbcode'";
                        $contents = $contents . $addToTemplate;
                    break;
            }

the editor_tinymce_init part is very ugly and should be changed, because it makes it impossible to have more then 1 add-on adding buttons.

 

[ragtek]

*up*
anybody got this working?

 

[ragtek]

tutorial: http://xenforo.com/community/threads/adding-own-buttons-to-the-editor-toolbar.18917/#post-243880