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>
or
<a href="#" style="font-weight:bold;">This is the anchor text</a>
or
<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 ?
Re: add styles to links instead of wrapping around links
Always apply the bold style as the inner most element.
Or even further, apply the bold inside of link element only:
Re: add styles to links instead of wrapping around links
Hello Gary,
after your suggestion i googled it and found it within the docs http://docs.cksource.com/ckeditor_api/s ... tyles_bold
This is superb works great! i implemented it with the italic as well
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.
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