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

How to add own button to the editor?

Discussion in 'XenForo Development Discussions' started by Vladislav Rastrusny, Feb 8, 2011.

  1. Vladislav Rastrusny

    Vladislav Rastrusny Active Member


    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:


    class FractalizeR_Translit_TemplateHookListener {

        static function 
    editor_js_setup($name, &$contents, array $params,
    XenForo_Template_Abstract $template) {
            if (
    $done === true) {
    $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)
                // 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;

                    { 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);
    But the button does not appear. What do I do wrong?
    makdeniss likes this.
  2. makdeniss

    makdeniss Active Member

    I am also interested in this question.
  3. karev

    karev Active Member

    im interested too
  4. mizter1nho

    mizter1nho Well-Known Member

    Im interesting.
  5. ragtek

    ragtek Guest


    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; }
  6. ragtek

    ragtek Guest

    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'
            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;

    $search "var plugins = '";
    $replace "var plugins = '-xenforo_code2,";
    $contents str_replace($search$replace$contents);
    $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;
    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.
    Veer likes this.
  7. ragtek

    ragtek Guest

    anybody got this working?:D
  8. ragtek

    ragtek Guest

Share This Page