Keep indentation when paste into tinymce

Question

When I copy formatted code from code editor into tinymce PRE tag, it remove all indentations (\t). I tried all paste configuration parameters but it not help.

Valid code :

When paste into tinymce

Answer 1

There is a plugin called paste which has a side effect of loosing indents while pasting. This plugin is used for copy pasting from Microsoft Word. If you are not using this feature then following changes will work for you -

1. Remove paste plugin from the applied plugins list.
2. Add this line to your init config - forced_root_block : 'pre

Following is my init config -

    tinyMCE.init({
        remove_linebreaks: true,
        preformatted : true,
        apply_source_formatting : true,
        selector:'textarea',
        forced_root_block : 'pre',
        mode: "textareas",
        height: "300",
        force_br_newlines : true,
        force_p_newlines : false,
        theme: 'modern',
        plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak',
        'searchreplace wordcount visualblocks visualchars code fullscreen',
        'insertdatetime media nonbreaking save table contextmenu directionality',
        'emoticons template textcolor colorpicker textpattern imagetools'
        ],
        toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
        toolbar2: 'print preview media | forecolor backcolor emoticons',
        image_advtab: true,
        templates: [
        { title: 'Test template 1', content: 'Test 1' },
        { title: 'Test template 2', content: 'Test 2' }
        ],
        content_css: ['//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
        '//www.tinymce.com/css/codepen.min.css'
        ]
});

Whenever you copy paste some code to tinyMCE editor, this change will force to copy in under <pre> tag.

Please note that using enter will create a new line in existing tag while using shift+enter will create a new block. Trick of using shift+enter might come handy to you when you have to frequently switch between tags.