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>
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 :)