add styles to links instead of wrapping around links

Hi,

i have been trying to find a solution to this for a while (but with no luck). We use CK editor and CK finder for creating html emails (with a few tweaks to the config on load this works ok).

The problem is when that when a link is selected and a color, font, size or weight is added (well any style really) it wraps around the link instead of either applying to the link (inline) or change the style within the link.

an example of this would be when selecting the anchor text and clicking bold the following happens

<strong><a href="#">This is the anchor text</a></strong>

This causes an issue with many email clients as they will not render the style of the link.

The desired output code would be

<a href="#"><strong>This is the anchor text</strong></a>

<a href="#" style="font-weight:bold;">This is the anchor text</a>

<a href="#"><span  style="font-weight:bold;">This is the anchor text</span></a>

The only solution i have found so far is to select the anchor text apart for one letter change the style and then delete and retype the excluded letter.

Many thanks if anyone can help...

c

ps why don't they use ckeditor for the forum posting ?

Fri, 08/03/2012 - 17:35

garry.yao

Joined: 03/01/2009

Posts: 170

Re: add styles to links instead of wrapping around links

The "childRule" of a style definition controls this behavior, e.g.

Always apply the bold style as the inner most element.

config.coreStyles_bold = 
{ 
   element: 'strong', 
   overrides: 'b', 
   childRule: function( element ) {
      return false;
   } 
};

Or even further, apply the bold inside of link element only:

config.coreStyles_bold = 
{ 
   ...
   childRule: function( element ) {
      return !element.is( 'a' );
   } 
};

Fri, 08/03/2012 - 18:22

thinkap

Joined: 08/07/2010

Posts: 8

Re: add styles to links instead of wrapping around links

Hello Gary,

This is superb works great! i implemented it with the italic as well after your suggestion i googled it and found it within the docs http://docs.cksource.com/ckeditor_api/s ... tyles_bold

config.coreStyles_bold = {
      element: 'strong',
      overrides: 'b',
      childRule: function( element ) {
        return !element.is( 'a' );
      }
   };
   config.coreStyles_italic = {
      element: 'em',
      overrides: 'i',
      childRule: function( element ) {
        return !element.is( 'a' );
      }
   };

Would you know if there is a childRule for colors, font-family and font-size aswell? or is it just the core styles bold, italic, strike etc

Many Thanks for your help.

Mon, 12/03/2012 - 20:19

thinkap

Joined: 08/07/2010

Posts: 8

for anyone looking for this

for anyone looking for this solution this is what i finally came up with

CKEDITOR.replace( 'youreditorname', {
                    coreStyles_bold: {

                       element: 'strong',
                       overrides: 'b',
                       childRule: function( element ) {
                           return !element.is( 'a' );
                       }
                   },
                   coreStyles_italic: {
                       element: 'em',
                       overrides: 'i',
                       childRule: function( element ) {
                           return !element.is( 'a' );
                       }
                   },
                   coreStyles_underline: {
                       element: 'span',
                       styles: { textDecoration: 'underline' },
                       attributes: { 'class': 'Underline' },
                       childRule: function( element ) {
                           return !element.is( 'a' );
                       }
                   },
                   font_style: {
                       element: 'span',
                       styles: { 'font-family': '#(family)' },
                       overrides: [ { element: 'font', attributes: { 'face': null } } ],
                       childRule: function( element ) {
                           return !element.is( 'a' );
                       }
                   },
                   fontSize_style: {
                       element: 'span',
                       styles: { 'font-size': '#(size)' },
                       overrides: [ { element :'font', attributes: { 'size': null } } ],
                       childRule: function( element ) {
                           return !element.is( 'a' );
                       }
                   },
                   colorButton_foreStyle: {
                       element: 'span',
                       styles: { color: '#(color)' },
                       childRule: function( element ) {
                           return !element.is( 'a' );
                       }
                   },
                   colorButton_backStyle: {
                       element: 'span',
                       styles: { 'background-color': '#(color)' },
                       childRule: function( element ) {
                           return !element.is( 'a' );
                       }
                   }

});

you can extend this to coreStyles_subscript etc etc but i did not require this