Maybe someone know how to add custom button to tinyMCE? I've been able to do it, but I've also changed 2 core files: umbraco.services.js and umbraco.controller.js
I'd like to know if there is any other way to do it?
You can usually enable functionality in the /config/tinymceeditor.config file by simply declaring it in this file. The guys at Imulus have a 2 year old blogpost about it here http://blog.imulus.com/bruce-clark/extending-tinymce-in-umbraco - The concepts are still the same, but please be aware that in Umbraco 7 it's tinymce 4 that is used so perhaps some things need to be done a bit differently - Also be aware that the code is a bit weirdly formatted on the blogpost since < and> signs are encoded for some reason.
You should be aware that when you change some of the core files those changes will be overwridden if you need to upgrade Umbraco and you'll have to do it over again after the upgrade.
Thank you! It's helped. I could remove my changes from core files. Also, I spotted that plugin (javascript file) should be located in ~/umbraco/lib/tinymce/plugins/ not in ~/umbraco_client/tinymce3/plugins/
How to add custom button to RTE
Hi All,
Maybe someone know how to add custom button to tinyMCE? I've been able to do it, but I've also changed 2 core files: umbraco.services.js and umbraco.controller.js
I'd like to know if there is any other way to do it?
Best, Oleg
Hi Oleg
You can usually enable functionality in the /config/tinymceeditor.config file by simply declaring it in this file. The guys at Imulus have a 2 year old blogpost about it here http://blog.imulus.com/bruce-clark/extending-tinymce-in-umbraco - The concepts are still the same, but please be aware that in Umbraco 7 it's tinymce 4 that is used so perhaps some things need to be done a bit differently - Also be aware that the code is a bit weirdly formatted on the blogpost since < and> signs are encoded for some reason.
Even though this WIKI entry is very old the concept is still the same http://our.umbraco.org/wiki/how-tos/customizing-the-wysiwyg-rich-text-editor-(tinymce)/add-youtube-button-to-tinymce
More recently (2013) Nicklas Gavelin has written about how to do it here as well http://nicklasgavelin.se/blog/2013/november/rich-text-editor-color-property-umbraco/
You should be aware that when you change some of the core files those changes will be overwridden if you need to upgrade Umbraco and you'll have to do it over again after the upgrade.
Hope this helps.
/Jan
Hi Jan,
Thank you! It's helped. I could remove my changes from core files. Also, I spotted that plugin (javascript file) should be located in ~/umbraco/lib/tinymce/plugins/ not in ~/umbraco_client/tinymce3/plugins/
So, you should make some steps:
1. Add to tinyMceConfig.config the following
<command>
<umbracoAlias>test</umbracoAlias>
<icon>images/editor/media.gif</icon>
<tinyMceCommand value="" userInterface="true" frontendCommand="test">test</tinyMceCommand>
<priority>76</priority>
</command>
AND
<plugin loadOnFrontend="true">test</plugin>
2.Create plugin.min.js file. This file must be located here ~/umbraco/lib/tinymce/plugins/test/plugin.min.js
3. Write a plugin. For example:
tinymce.PluginManager.add('test', function (editor) {
editor.addButton('test', {
icon: 'custom icon-book-alt',
tooltip: 'Test',
onclick: function () {
alert('Hello world!');
}
});
});
That's it! Maybe it'll help someone )
Best, Oleg
Saved my night, thanx!! :)
Hi Oleg
Very happy to help - And thank you very much for adding the last part. It's indeed going to help others :)
/Jan
Thanks Oleg,
You saved me lots of time! :)
is working on a reply...