Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Vasia Vasia 49 posts 241 karma points
    May 26, 2014 @ 15:28
    Vasia Vasia
    0

    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

  • Jan Skovgaard 11264 posts 23591 karma points MVP 8x admin c-trib
    May 26, 2014 @ 15:44
    Jan Skovgaard
    100

    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

  • Vasia Vasia 49 posts 241 karma points
    May 26, 2014 @ 17:05
    Vasia Vasia
    5

    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

  • Burki 7 posts 77 karma points
    Mar 29, 2016 @ 21:18
    Burki
    0

    Saved my night, thanx!! :)

  • Jan Skovgaard 11264 posts 23591 karma points MVP 8x admin c-trib
    May 26, 2014 @ 18:25
    Jan Skovgaard
    0

    Hi Oleg

    Very happy to help - And thank you very much for adding the last part. It's indeed going to help others :)

    /Jan

  • Rhys Mitchell 28 posts 195 karma points
    May 18, 2017 @ 07:36
    Rhys Mitchell
    0

    Thanks Oleg,

    You saved me lots of time! :)

Please Sign in or register to post replies

Write your reply to:

Draft