Copied to clipboard

Flag this post as spam?

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


  • Chris 8 posts 77 karma points
    Feb 11, 2015 @ 15:07
    Chris
    0

    Changing how styles are applied in the rich text editor

    Hi

    I'm looking to allow content editors to style links in the rich text editor to look like buttons (Bootstrap v3) by allowing them to select a style from the Formats dropdown in the rich text editor toolbar.

    Now, it is straight forward to setup the style sheet, the style, and the alias.

    The challenge I'm facing is that I want my style sheet alias (.btn btn-primary) to be applied directly to the anchor tag rather than be wrapped in a span tag.

    So to be clear, currently the rich text editor renders something like:

    <span class="btn btn-primary"><a href="/{localLink:1065}" title="Home">Test Button</a></span>
    

    And I'm look for something like this:

    <a href="/{localLink:1065}" title="Home" class="btn btn-primary">Test Button</a>
    

    After reading the docs here: http://www.tinymce.com/wiki.php/Configuration:style_formats

    I know the rich text editor supports doing this and then seeing how things are setup in \umbraco\Js\umbraco.controllers.js around line 8040 the style formats are initialised and this is where css classes are configured to be applied to an inline span tag:

    if (rule.selector[0] == ".") {
      r.inline = "span";
      r.classes = rule.selector.substring(1);
    }
    

    As way of testing an idea I've modified the code and added the following test:

    if (rule.selector.startsWith(".btn") == true) {
      r.selector = "a";
      r.classes = rule.selector.substring(1);
    }
    

    So the rich text editor renders the html the way I want.

    Now I'm looking for a solution I can rollout to production because this hack is flaky at best. Does anybody know if there is the a configuration setting I've missed that can do this? Is there some way I can hook the controller?

    Looking forward to hearing others thoughts, Chris.

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Feb 11, 2015 @ 15:15
    Dennis Aaen
    0

    Hi Chris,

    Perhaps, this post can help you to know where to make the changes so you donĀ“t get an span around the links tags, 

    https://our.umbraco.org/forum/umbraco-7/using-umbraco-7/57593-How-to-alter-TinyMCE-in-718?p=0#comment196573

    Hope this can help you,

    /Dennis

  • Per Jungnelius 5 posts 97 karma points
    Apr 28, 2016 @ 12:20
    Per Jungnelius
    101

    Hi,

    I have the same requirement "adding a bootstrap-style Button-format to the Rich text editor". This seems like a pretty common requirement.

    I've found in 7.4.2 that this is possible but not quite straightforward. In a regular RTE you can do it by adding the editor option

    /**umb_name:Button*/
    a.btn.btn-default{}
    

    Don't forget the 'a', otherwise it won't work.

    This still doesn't solve it for RTE-editors in the Grid though (I guess this must be a bug but I haven't checked if an issues is filed).

    To make this work both in the regular RTE and the Grid RTE you have to scrap Umbracos css-annotation way of adding styles and instead add them in the tinyMceConfig.config. In the customConfig-section, add your editor-styles like this:

        <config key="style_formats">
      [
      {"title":"H2","block":"h2"},
      {"title":"BlockQuote","block":"blockquote"},
      {"title":"Button","block":"a","classes":"btn btn-default"}
      ]
    </config>
    

    This works, but deviates from Umbraco's regular cosy way of adding Formats.

  • Alan Draper 57 posts 140 karma points
    Dec 04, 2019 @ 20:24
    Alan Draper
    0

    This is awesome, and still works circa 2019 / v8.

    Much easier for me to use because now I can use the SCSS-generated CSS (piecemeal) for the RTE, and add styles into the config as I need.

    This should be added to the documentation.

    Thanks!

Please Sign in or register to post replies

Write your reply to:

Draft