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.