CKEditor stripping tags and attributes from HTML email
Question
I have an app which allows a user to import a HTML email and edit the contents before sending it on again. I'm trying to use CKEditor to edit the imported mail but it seems to be stripping out bgcolor tags (and probably more)
Here's how I'm initiating (config source )
var ckconfig = {
height: 500,
extraPlugins: 'htmlwriter',
contentsCss: 'body {color:#000; background-color#:FFF;}',
docType: '<!DOCTYPE HTML>',
allowedContent:
'h1 h2 h3 p pre[align]; ' +
'blockquote code kbd samp var del ins cite q b i u strike ul ol li hr table tbody tr td th caption; ' +
'img[!src,alt,align,width,height]; font[!face]; font[!family]; font[!color]; font[!size]; font{!background-color}; a[!href]; a[!name];' +
'table[bgcolor|border|width|height|align|cellpadding|cellspacing]; td[bgcolor|border|width|height|align|cellpadding|cellspacing] ',
coreStyles_bold: { element: 'b' },
coreStyles_italic: { element: 'i' },
coreStyles_underline: { element: 'u' },
coreStyles_strike: { element: 'strike' },
font_style: {
element: 'font',
attributes: { 'face': '#(family)' }
},
fontSize_sizes: 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',
fontSize_style: {
element: 'font',
attributes: { 'size': '#(size)' }
},
colorButton_foreStyle: {
element: 'font',
attributes: { 'color': '#(color)' }
},
colorButton_backStyle: {
element: 'font',
styles: { 'background-color': '#(color)' }
},
stylesSet: [
{ name: 'Computer Code', element: 'code' },
{ name: 'Keyboard Phrase', element: 'kbd' },
{ name: 'Sample Text', element: 'samp' },
{ name: 'Variable', element: 'var' },
{ name: 'Deleted Text', element: 'del' },
{ name: 'Inserted Text', element: 'ins' },
{ name: 'Cited Work', element: 'cite' },
{ name: 'Inline Quotation', element: 'q' }
]
};
$("#ckeditor").ckeditor(ckconfig);
Here's my HTML
<table cellpadding="10" cellspacing="0" border="0" bgcolor="#ffffff" width="100%" align="center"><!-- Header Row -->
<tr>
<td width="100%" bgcolor="#2980b9"><!-- Start Header Table -->
<table cellpadding="5" cellspacing="0" border="0" align="center" width="600" bgcolor="#2980b9">
<tr>
<td align="center" valign="top" style="TEXT-ALIGN: center">
<font face="arial, sans-serif" color="#ffffff" style="TEXT-ALIGN: center; FONT-STYLE: oblique; DISPLAY: block; FONT-FAMILY: arial, sans-serif; COLOR: #ffffff; FONT-SIZE: 12px">Updates</font>
</td>
</tr>
<tr>
<td align="center" valign="top" style="TEXT-ALIGN: center">
<font face="arial, sans-serif" color="#ffffff" style="FONT-FAMILY: arial, sans-serif; COLOR: #ffffff; FONT-SIZE: 64px"
>My<strong>App</strong></font>
</td>
</tr>
</table>
</td>
</tr>
</table>
Here's how it looks in TinyMCE (Which I'm looking to replace)
And here's the result in CKEditor
How do stop CKEditor from removing my legacy HTML?
3 answers
solution1
2 ACCPTED 2014-09-29 14:11:26
I was setting the table[bgcolor] tags in allowedContent which wasn't working, but it turns out you can set
allowedContent: true,
which will just disable ACF (advanced content filtering) entirely.
solution2
0 2014-10-01 23:21:19
try this:
CKEDITOR.replace( 'ckeditor', {
height: 500,
contentsCss: 'body {color:#000; background-color#:FFF;}',
docType: '<!DOCTYPE HTML>',
stylesSet: [
{ name: 'Computer Code', element: 'code' },
{ name: 'Keyboard Phrase', element: 'kbd' },
{ name: 'Sample Text', element: 'samp' },
{ name: 'Variable', element: 'var' },
{ name: 'Deleted Text', element: 'del' },
{ name: 'Inserted Text', element: 'ins' },
{ name: 'Cited Work', element: 'cite' },
{ name: 'Inline Quotation', element: 'q' }
],
allowedContent: {
'h1 h2 h3 p pre[align] blockquote code kbd samp var del ins cite q b i u strike ul ol li hr table tbody tr td th caption img[!src,alt,align,width,height]':true,
'span':{
styles:'*'
},
'font':{
attributes: '!face,!color',
styles:'*'
},
'table': {
attributes: 'width,border,cellpadding,cellspacing,align,width,bgcolor',
styles:'*'
},
'tr': {
attributes: 'height,rowspan'
},
'td': {
attributes: 'width,colspan,align,border,valign',
styles:'*'
}
}
} );
solution3
0 2017-07-03 09:11:02
Attributes should be in a comma separated list. You should replace your | (pipes) with commas.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.