javascriptjquerycsstinymcerte

With tinymce, the formatting seems to change when I copy content from a <div>


If I copy + paste from a word doc, it's fine, and it produces near enough an exact copy.

If I display the content in a within an iframe (to prevent css interfering) it appears exactly as it did in the editor.

If I then do this:

tinyMCE.execCommand("mceReplaceContent",false, $("#frameBody").contents().find("#txtBody").html());

it copies it into the tinyMCE window, but the formatting is a bit different. Bullet points are hollow circles instead of regular circles, and there is a fair bit of extra spacing.

Any idea how I can fix this?

I'm creating my tinyMCE like this:

tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,iespell,inlinepopups,insertdatetime,searchreplace,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

        // Theme options
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,code,|,insertdate,inserttime,|,forecolor,backcolor",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",

        // Skin options
        skin : "o2k7",
        skin_variant : "silver",
});

<textarea name='FishBody' style='width:919px; height:600px' id='txtFishBody'></textarea>

Solution

  • I've fixed it, it turns out it was an issue with the way that the html was being pulled.

    Essentially, when you save this html:

    <div>
    Hello
    </div>
    

    you end up with

    <div>\r\nHello\r\n<div>
    

    I was countering that by replacing \r\n with <br/> but it seems that's not necessary - the extra <br> tags were confusing it. I changed it to replace \r\n with empty string, and all problems are solved :)