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

Question

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>

Answer 1

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

Answer 2

The tinymce editor like most rte uses a standard css for its editor iframe. That is the reason why bullets look different. Another reason for a different look might be that the cleanup function removes invalid html elements and attributes (you might want to have a closer look into the tinymce configuration settings valid_elements and valid_children).

Answer 3

You can try this option

paste_retain_style_properties: all --OR "color font-size" whatever you want to include

example: Copy pasting my code which has other options, in case it helps

tinymce.init({
            selector: 'textarea',
            width: "100%",
            height : "250",
            encoding: "xml",
            menubar: false,
            statusbar: false,
            color_cols: "5",
            setup: function (ed) {
                ed.on('init', function () {
                    this.getDoc().body.style.fontSize = '10pt';
                    this.getDoc().body.style.fontFamily = 'Arial';
                });
            },
            theme: "modern",
            browser_spellcheck: true,
            plugins:
            [
                "table paste textcolor"
            ],
            paste_retain_style_properties: "all",
            toolbar1: "undo redo | bold italic underline strikethrough | fontsizeselect fontselect | alignleft aligncenter alignright alignjustify",
            toolbar2: "copy cut paste | bullist numlist outdent indent | forecolor backcolor | searchreplace | table"
        });

Refer : https://www.tiny.cloud/docs/plugins/paste/