如何防止tinymce从input元素中剥离'style'属性?

时间:2012-04-24 00:20:21

标签: tinymce

我一直在阅读官方文档和博客文章以及SO几个小时,某些地方的答案已经发布了......但没有运气。

似乎没有任何配置的摆弄。阻止tinymce从我的输入/提交的<p>元素上剥离内联'style'属性。我需要所有输入元素的'style'属性..但我刚开始使用<p>进行测试,甚至让它工作。

  • tinymce Version 3.5b3

这是我配置的最新版本。 (出于许多变化/尝试):

tinyMCE.init({
    mode : "textareas",
    theme : "advanced",

    plugins : "emotions,spellchecker,advhr,insertdatetime,preview,paste,table,media,directionality,style,xhtmlxtras,nonbreaking,pagebreak", 

    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,ltr,rtl",
    theme_advanced_buttons4 : "styleprops,|,cite,abbr,acronym,del,ins,attribs,|,nonbreaking,pagebreak",

    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,

    doctype : "<!DOCTYPE html>",

    convert_urls : false,

    //template_external_list_url : "gen4tinymce/lists/template_list.js",
    external_link_list_url : "gen4tinymce/lists/link_list.js",
    //media_external_list_url : "gen4tinymce/lists/media_list.js",

    valid_elements : "@[id|class|style|title|dir<ltr?rtl|lang|xml::lang],"
    + "a[rel|rev|charset|hreflang|tabindex|accesskey|type|"
    + "name|href|target|title|class],strong/b,em/i,strike,u,"
    + "#p[style],-ol[type|compact],-ul[type|compact],-li,br,img[longdesc|usemap|"
    + "src|border|alt=|title|hspace|vspace|width|height|align],-sub,-sup,"
    + "-blockquote,-table[border=0|cellspacing|cellpadding|width|frame|rules|"
    + "height|align|summary|bgcolor|background|bordercolor],-tr[rowspan|width|"
    + "height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot,"
    + "#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor"
    + "|scope],#th[colspan|rowspan|width|height|align|valign|scope],caption,-div,"
    + "-span,-code,-pre,address,-h1,-h2,-h3,-h4,-h5,-h6,hr[size|noshade],-font[face"
    + "|size|color],dd,dl,dt,cite,abbr,acronym,del[datetime|cite],ins[datetime|cite],"
    + "object[classid|width|height|codebase|*],param[name|value|_value],embed[type|width"
    + "|height|src|*],map[name],area[shape|coords|href|alt|target],bdo,"
    + "button,col[align|char|charoff|span|valign|width],colgroup[align|char|charoff|span|"
    + "valign|width],dfn,fieldset,form[action|accept|accept-charset|enctype|method],"
    + "input[accept|alt|checked|disabled|maxlength|name|readonly|size|src|type|value],"
    + "kbd,label[for],legend,noscript,optgroup[label|disabled],option[disabled|label|selected|value],"
    + "q[cite],samp,select[disabled|multiple|name|size],small,"
    + "textarea[cols|rows|disabled|name|readonly],tt,var,big",

    extended_valid_elements : "p[style]",
    inline_styles : true,
    verify_html : false
});

感谢您的任何建议!

4 个答案:

答案 0 :(得分:13)

正如Thariama指出的那样,没有错误。但是我不知道所有CodeIgniter的$config['global_xss_filtering'] = TRUE;正在做什么。如果您发现自己遇到同样的问题,请按照以下方式解决问题。请看这里: Codeigniter - Disable XSS filtering on a post basis

答案 1 :(得分:3)

This fiddle表明你的tinymce配置绝对完美:所有元素都允许使用Style-attribute,它不会被剥离。

答案 2 :(得分:0)

您可以尝试使用ajax请求,例如

$("#submit").click(function(e) {
    ie8SafePreventEvent(e);
    var form_data = $("#form").serialize();
    var content = $.base64.encode(tinyMCE.activeEditor.getContent());
    $.ajax({
        type: "POST",
        url: "/your/post/processor",
        data: form_data + "&coded_content=" + content,
        success: function(return_msg){
            do_something
            },
        error: function(){
            alert("Sorry, we got an error, try later");
            }
        });
    });

显然在你的控制器中你必须使用base64decode ...

答案 3 :(得分:0)

我也在使用CodeIgniter,当我设置$config['global_xss_filtering'] = false;时,我仍然遇到了style属性的问题。因此,如果没有一个解决方案适合您,您可以尝试在提交时对base64中的tinyMCE数据进行编码,并使用Javascript将其置于隐藏字段中:

$('#hiddenField').val(window.btoa(tinyMCE.get('tinyMCEtextareaID').getContent()));

这样您就可以保留原始字符串,并且可以使用以下方法在PHP中轻松解码:

$htmlstring = base64_decode($_POST['hiddenField']);