This site has been archived and you can no longer log in or post new messages. For up-to-date community resources please visit

eZ Community » Forums » Discussions » Adding a custom button to the online...

Tuesday 10 January 2012 12:42:58 pm - 15 replies

» Read full blog post


A short explanation on how to add a custom button to the online editor, in response to a question asked by @RaaburiAiteemu.

Tuesday 10 January 2012 1:03:20 pm

Great tutorial !
(I see Heath coming and asking you to post something on ezpedia... :p)

Tuesday 10 January 2012 3:23:15 pm

Excellent Sebastiaan.

This would warrant a tutorial under, don't you think ?

Cheers and keep-up !

Tuesday 10 January 2012 3:52:25 pm

Thanks Nicolas! What would I need to do to turn this into a proper tutorial?

Tuesday 10 January 2012 5:36:40 pm

Great tutorial !

But I think you miss the step to create newbutton.tpl to make the declared custom tags more sense.

Modified on Tuesday 10 January 2012 5:37:40 pm by Yannick Komotir

Thursday 12 January 2012 4:48:51 am

@ Arnaud
Thanks for the praise. Though ... while I do gladly encourage and welcome Sebastiaan to share content on eZpedia ...

I actually agree with Nicolas that this would make a very nice article for the learn section.

In terms of distribution we realize that reaches more eZ Publish users first and Sebastiaan is sharing here already so this seems like a match if he chooses to invest the time to publish a full fledged article.

eZpedia is free for all to edit and publish their own content on; not just a select few ...

Did you know that anyone can publish helpful information of almost any kind more directly and quickly on eZpedia than creating a full fledged article? This is because we moderate content only when required and leave the site open for the users to share freely themselves by editing the content directly (powered by the eZ Publish we all love).

If time is a concern and it often is to most, sometimes simply posting the helpful information into eZpedia and moving on is a quick way to contribute to the available 'organized' documentation without a lot of other requirements. Plain and simple. You decide how much time you wish to invest in the process. Merely an alternative some prefer and why, little more.

For years people posted such documentation in forum messages and large volume of solutions and knowlege was lost in a sea long winded forum threads with scattered knowlege all over the place but very hard to find, often outdated, incomplete or inaccurate with little that could be done about the situation. This is where the users could post quickly and directly ... sadly most users still do this to this day and it is a shame to see the loss of value, like driving a new car off the dealer lot looses value. I view this as a side affect of common forum user behavior and a lack of interest in contributing to a better solution to help users in a much better way all around. This is not new nor does it deter eZpedia from striving to reach our goals of helping users share real documentation that is not lost in a sea of forum threads but rather quite accessible even without extensive searching.

We really think that organized and maintained documentation based on community user contributions is the better solution over forum threads to deliver documented solutions and specific knowledge to users effectively and directly. Most users don't learn to search for knowledge effectively till much much later in their personal development if they so choose to seek out this very helpful skill.

We think those who search generally and find eZpedia content without having to become an expert at searching for knowledge via Google index query manipulation get better help more quickly than otherwise on their own without this resource.

Worth mentioning again articles get a great index from what I have seen and are found and ranked well when simply searching without special tricks like the 'site' search parameter (Google specific feature) which is in part why I think an article would be the very best possible investment of time possible even though it requires more work than simply editing a page on eZpedia using eZOE and pasting in your text content, publishing and moving on ...

Also I think that if the blog posts were more exposed on aka where is the list of blog posts ordered by date for all blogs with pagination so we can see reverse in time the articles published quickly. Right now blog posts are 'lost' once off the very small / short home page lists and not available unless you click a link from another source, search for the blog post or already know the url. This is a very bad problem with blogs today. eZpedia has -never- suffered from this problem either.

This is the only reason I think this solution should be shared in another form to ensure it's proper distribution through all of time. I think enough people ask about this solution that documenting it as an article helps ensure the future users will have a very specific reference to build upon themselves privately without the normally encountered 'fears that it's too complex for them to accomplish on their own' and then they just give up. I've seen it many times, the crushed look in their eyes when they convince themselves they can't before they try ...

The only thing I've ever see prevent this from happening has been high quality documentation like the kind found in articles (see the extra time required for articles delivers real value from a different but important perspective; how you choose to invest is a personal one; quite a large number of eZ Publish users choose not to contribute at all and this both acceptable and understandable).


But thanks Arnaud for yet another positive eZpedia reference online, we really appreciate it!

We can't wait to find your next reference to eZpedia online happy.gif Emoticon You yourself are becoming quite the eZpedia Community supporter yourself (in your own way of course happy.gif Emoticon




Thursday 12 January 2012 5:55:40 am

@ Arnaud 

No Arnaud, Your just a little confused here in the long term perspective blunk.gif Emoticon 

I'm the one who actually advocates for eZpedia contributions like you describe and infer ...

More than Heath in practice at the least. Though we do both advocate for others in the eZ Community help maintain sanity of the other less able eZ Publish users by posting documentation where it can actually help people more effectively. 


Documentation is simply lost to most users (newbie and experts alike) when posted in forum in a sea of thousands similar disconnected snippets, incomplete explanations and dead end threads when not published to a central resource for users to find quickly and directly. I can't imagine anyone denying this fact. Still ... we see value in encouraging users to share in a smarter more effective way.

This forum business is a joke that just keeps users in the dark, and if you don't realize or deny at all this impacts this community more than others ... wow; no comment; end of interview; walks away ...


Remember eZpedia was started by the eZ Community for the eZ Community to serve as a platform to provide a real long term solution to the entire community and ecosystem in response to the problems briefly described above ... (including Heath's).

We are all merely eZ Publish users helping other eZ Publish users learn and grow as they strive to better themselves as well all are trying to accomplish many of the same things in separate efforts. We are not some unknown community portal of spam.

Our content is not incomplete, we perform extensive improvements to content to ensure reading our content instead of forum content provides clear and expansive documentation where forum threads are well ... pathetic in comparison. In forums you get only snippets of what you need, in eZpedia Articles you get so much more delivered so much more clearly than otherwise.

Though I do value content submitted in the forums at a low value, I do still value it. Often alternatives can be sparse depending on the subject matter being searched / looked for ...

Questions in the forums are often answered in eZpedia content better than in forum messages themselves. Users often post on eZpedia and link to eZpedia content in forum messages to avoid duplication and increase the available answers (we need to get better at this like we were in the past for certain) documented clearly and properly via eZpedia.

We are a proven invaluable resource that users do rely upon (though mostly silently). Rest assured eZpedia is a safe place to post your information freely. We have been available for a long time now and we have a great many plans to ensure the user contributions to eZpedia remain online indefinitely. Like a rock, eZpedia is almost always online, serving users without fail. I know for a fact eZpedia makes a serious difference in users lives by helping them reach their goals when a great many other alternatives have failed them.


eZpedia is no joke. Unless your like a negative person or something who prefers to spit in other people's faces and hurl insults at those who are trying to help others for no pay and very little support in return from the community we proudly support, perhaps because our offering is not quite as well polished or perfect in every way possible or imaginable as the eZ Systems offerings, who can say ...


Thank you for your contributions Arnaud.

Please feel free to post again in the future Arnaud
and anyone else in the eZ Community new or old are welcome at eZpedia!


Ps I lost about 3 pages (short reply for me) of text in my first attempt at writing my comment reply in the browser when I hit the back button in the wrong way. This is my quick summary of the inital attempt. Apologies for the loss, I know better than to write outside a text file (personal problem with browser usage). I went into more detail about eZpedia's background, history and exposure but I am out of time to retype tonight. Even 'kracker' has to sleep; though the folks in #ezpublish irc swear to me and others quite regularly that I do not sleep ...  that I only seem to always be contributing to the eZ Community via a wide range of available opportunities never ending ...


I challenge others to engage so completely in this community blunk.gif Emoticon 

See it's not about sleep, this is a life style movement and I'm living it to the fullest, more than ever before in my life. It's more than exciting, the growth that comes from working with the community and eZpedia is unlike almost any other addiction I might actually recommend to humans.

eZ Community become addicted to doing more good, it's amazing what will happen ...


Happy Hacking!


Are you listening yet?, It has a hidden meaning ...

THEME SONG: YTCracker - I CAN ... (RAM Ruffian Remix)

Mirror (for those who don't already know ..):

Thursday 12 January 2012 9:59:38 am

Thanks Nicolas! What would I need to do to turn this into a proper tutorial?

Hello Sebastiaan, 

It is just about morphing the content above into the ODT/DOC template made available there :

Once you are satisfied, just drop me an email and i will make the web publication is done.

Looking forward to this, pretty cool content !

Saturday 04 February 2012 4:21:59 am

I am dealing with this very topic.

My problem is that ezoe's tinyMCE is by default trying to load resources for the buttons (such as images, dialog.htm, etc.) from the extension/ezoe/design/standard/javascript/plugins location, instead of extension/<myext>/design/<mydesign>/javascript/plugins where they are really located.

I'm trying to follow best practices and keep my code in my own extension, but I see no way to override this behavior.  Do you know how to override it?

Notes: it is ezoe version 5.4 with ezp 4.6, and the code that sets the URLs for the plugins is, I think, in extension/ezoe/design/standard/templates/content/datatype/edit/ezxmltext_ezoe.tpl around line 150.

I have overridden that template in my design, and for specific plugins that are also in my design, I have changed the code in the override template to set the urls properly (in the section that does this around line 150 as mentioned above).  However, that only partially gets things working.

Is there some official way to do this that I'm just not aware of?


Modified on Saturday 04 February 2012 4:23:41 am by A Fowler

Saturday 25 February 2012 11:29:41 am

Really good tutorial. very easy to follow. 

A small typo though. when it says "Within the 'javascript' folder, create a CSS file called 'newbutton_ezoe.css'.", it should say "Within the 'stylesheets' folder, create a CSS file called 'newbutton_ezoe.css".

Thanks a lot for sharing!

Wednesday 28 March 2012 12:48:34 pm

Quote from Carlos Revillo :

A small typo though. when it says "Within the 'javascript' folder, create a CSS file called 'newbutton_ezoe.css'.", it should say "Within the 'stylesheets' folder, create a CSS file called 'newbutton_ezoe.css".

Hi Carlos, thanks for the feedback, I have corrected the mistake.

Wednesday 28 March 2012 7:31:29 pm

After some twitter-help from the wonderful Sebastiaan, I found that I had to move ezoe.ini.append.php into /settings/override for ez to recognize the new button.

FWIW I'm running a fresh install of Community 2012.4.

@A Fowler I also found that in editor_plugin.js where you call your resources, you have to hardcode the path to your extension there instead of relying on the "url" variable; so instead of:

file: url + /resource.php',


file : '/extension/yourext/design/standard/javascript/plugins/yourext/resource.php',

This worked for me.

I'm so close to having what need here, but I've one final question:

I'm trying to insert a custom tag, but I can't quite get the syntax right. I've tried a bunch of ways, for example, as per :

tinyMCEPopup.execCommand('mceInsertRawHTML', false, '<div type="custom" id="mediacoreinsert">embedder</div> ');

But nothing works quite right. Can anyone point out a method of inserting a custom tag from an inline popup? I've scoured these forums and the extensions directory, but can't find a working example to code from.

Many thanks in advance.

Modified on Wednesday 28 March 2012 7:32:58 pm by Allan Haggett

Monday 04 June 2012 6:09:22 pm

Thanks for this article !

This button will open the Custom Tag dialog with a preselected custom tag. But if you want a button that just inserts a specific custom tag and then be able to deactivate it easily, just like the "bold" or "underline button", then you need to add a bit more code.

Here's something a did About 2 years ago, so I'm not sure whether it would still work (id adds a "Gras Thématique" custom tag button :

 (function() {
    tinymce.create('tinymce.plugins.Gras_thematique', {
        init : function(ed, url) {
            var t = this;
            t.editor = ed;
            // Register commands
            ed.addCommand('mceGras_thematique', function() {
                //ed.execCommand('mceInsertContent', false, '<custom name="gras_thematique">'+ed.selection.getContent({format : 'text'})+'</custom>');
                currentNode = ed.selection.getNode();
                if (currentNode.className == 'mceItemCustomTag gras_thematique')
                    nodeContent = currentNode.innerHTML;
                    ed.execCommand('mceInsertRawHTML', false, nodeContent );
                    ed.execCommand('mceInsertRawHTML', false, '<span type="custom" class="mceItemCustomTag gras_thematique">'+ed.selection.getContent({format : 'text'})+'</span>');
            // Register buttons
            ed.addButton('gras_thematique', {
                title : 'Gras thématique', 
                cmd : 'mceGras_thematique',
                image : url + '/img/strong_bt.png'
            // Add a node change handler, selects the button in the UI when a node is selected
            ed.onNodeChange.add(function(ed, cm, n) {
                cm.setActive('gras_thematique', n.className == 'mceItemCustomTag gras_thematique');
        getInfo : function() {
            return {
                longname : 'Gras thématique',
                author : 'Smile',
                authorurl : '',
                infourl : '',
                version : tinymce.majorVersion + "." + tinymce.minorVersion
        // Private methods
    // Register plugin
    tinymce.PluginManager.add('gras_thematique', tinymce.plugins.Gras_thematique);

Monday 04 June 2012 7:08:53 pm

Thanks Hugh for the extended version !

Friday 10 May 2013 4:58:04 pm

I found this in a search, it was very helpful, thanks!

Sunday 26 January 2014 12:30:23 pm

Thank you for this very interesting blog post. However, I have two additional questions to go furthur.

In order to modify the color of the text, how give the possibility to display the edit/modification page of the custom tag as if you had clicked on the link of the breadcrumb of the bottom of the editor.
And if possible, change the color of the button, with the color of the text where the cursor is positioned.

May be, all of this things are impossible. Or may be in an other way.

Thank you by advance.

Best regards,



You must be logged in to post messages in this topic!

36 542 Users on board!

Forums menu

Proudly Developed with from