7

I have been reading the official docs and blog posts and SO for hours, certain somewhere the answer would be posted already.. but no luck.

It seems that no amount of fiddling with any config. stops tinymce from stripping the inline 'style' attribute on my input/submitted <p> element. I need the 'style' attribute for all input elements.. but I am just starting by testing with <p> to even get it to work.

  • tinymce Version 3.5b3

Here is the latest iteration of my config. (out of many variations/attempts):

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
});

Thanks for any suggestions!

govinda
  • 1,683
  • 5
  • 20
  • 34

4 Answers4

13

As Thariama pointed out, tinymce was not at fault.. but it was my lack of knowing what all CodeIgniter's $config['global_xss_filtering'] = TRUE; was doing. If you find you are experiencing the same issue, here is how I addressed it; please see here: Codeigniter - Disable XSS filtering on a post basis .

Community
  • 1
  • 1
govinda
  • 1,683
  • 5
  • 20
  • 34
4

This fiddle shows that your configuration of tinymce is absolutely perfect: Style-attribute is allowed for all elements, it does not get stripped out.

Thariama
  • 50,002
  • 13
  • 138
  • 166
  • 1
    yes, I stripped down the whole thing as a test.. isolating JUST tinymce and it works as expected, as you say and show. So I need to figure out what is stripping the style attribute... the PHP framework I am using, CodeIgniter, or what. I'll be back here to accept your answer.. I just leave it open for the moment in case anyone posts something that saves me even more time figuring out where lies the culprit. ;-) – govinda Apr 24 '12 at 15:35
1

you can try with an ajax request, like this

$("#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");
            }
        });
    });

Obviously in your controller you have to base64decode...

Da.S.Co.S.
  • 11
  • 3
0

I am also using CodeIgniter and while I did set $config['global_xss_filtering'] = false; I still had the issue with the style attribute. So if none of the solutions worked for you, you can try encoding the tinyMCE data in base64 on submit and place it in a hidden field using Javascript:

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

This way you retain the original string and it can be easily decoded in PHP using:

$htmlstring = base64_decode($_POST['hiddenField']);
aadilp
  • 31
  • 5