Question

我有一个应用程序，允许用户导入HTML电子邮件并在再次发送之前编辑内容。我尝试使用CKEditor编辑导入的邮件，但它似乎剥离了bgcolor个标签（可能还有更多）

这是我如何发起的（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);

这是我的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>

以下是TinyMCE（我想要替换它）的样子

enter image description here

这是CKEditor的结果

enter image description here

如何阻止CKEditor删除旧版HTML？

Answer 1

我在allowedContent中设置了表格[bgcolor]标签，但这些标签无效，但事实证明你可以设置

allowedContent: true,

将完全禁用ACF（高级内容过滤）。

Answer 2

试试这个：

  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:'*'                                 
            }
        }

        } );

http://jsfiddle.net/whngL8qh/4/

Answer 3

属性应该以逗号分隔的列表。你应该替换你的| （管道）用逗号。

CKEditor从HTML电子邮件中剥离标签和属性

3 个答案: