• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Adding own buttons to the Editor Toolbar

R

ragtek

Guest
#1
In this tutorial you'll see how you can extend/customize the xenforo editor.

In my plugin, i've added a button, which is opening a div container under the editor
(Demo Video: http://ragtek.org/videos/editortemplates.htm )

As first, you need to create a folder with your tinyMCE plugin and place it in /js/tinymce/plugins/

In my case it's
editortemplate.PNG

More infos can be found here => http://www.tinymce.com
2. create a template hook event listener, to add the necessary changes to the template.

PHP:
                case 'editor_js_setup':
                    $search = "var plugins = '";
                    $replace = "var plugins = 'editortemplate,";
                    $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_custom_bbcode,|,xenforo_code,|,|,editortemplate'";
                        $contents = $contents . $addToTemplate;
                    break;
In line 3 i'm adding my "editortemplate" to the xenforo default plugins.
In line 7 i'm replacing the toolbar buttons with my own version => i've added 2 seperators | and my editortemplate button

That's it:)
If you now load the editor, you'll see your new button.
(Attention: with this way, ONLY 1 PLUGIN will be able to add own buttons)

I wish there was a easier way for this:( in vBulletin it's much easier:(

(Will be continued)

Demo: www.ragtek.org/xenforo
 

Attachments

Panupat

Well-known member
#2
That's very interesting. Thanks for sharing Ragtek.

I do hope Kier or Mike would come up with an official bbcode manager that can add buttons by itself soon
 

Hoffi

Well-known member
#4
this in the hook listener should add some code if another addon changes the Icons.

PHP:
                case 'editor_tinymce_init':
                    if (strpos($content,'theme_xenforo_buttons2') !== false)
                    {
                        $lines = explode("\n",$content);
                        foreach ($lines as $k => $line)
                        {
                            if (strpos($line,'theme_xenforo_buttons2')!==false)
                            {
                                $line[$k] .= ",|,editortemplate";
                            }
                        }
                    }
                    else
                    {
                        $content .= ",\ntheme_xenforo_buttons2 : 'bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,outdent,indent,|,link,unlink,image,xenforo_media,xenforo_custom_bbcode,|,xenforo_code,|,|,editortemplate'";
                    }
                break;
untestet. I am still at development for my AddOn. It should also work with preg_replace instead of explode and foreach.