TinyMCE strips line breaks on mceAddControl

0 Views

I’m using wp_editor to add wysiwyg fields to admin edit screens. Each wysiwyg lives within a draggable meta box. Since TinyMCE has issues with dragging, I’m using the following code: 

// on the dragstart event
tinyMCE.execCommand('mceRemoveControl', false, the_editor_id);

// on the dragstop event
tinyMCE.execCommand('mceAddControl', false, the_editor_id);

The problem is that, when mceAddControl is fired, all newlines and linebreaks are stripped from the text. Has anyone been able to solve this issue?

Read More

Before dragstart:

before dragstart

After dragstop:

after dragstop

Post Views: 0

Related posts

Leave a Reply

1 comment

  1. It turns out that TinyMCE has it’s own autop setting, so if you kill it before the sort and then put it back you should be good to go!

    Check out the autop setting handling in this snippet: 

    <script>
(function($) {

    // by default, wpautop will be true
    var wpautop = true;

    // this function wraps subsequent additions of TinyMCE
    $(function() {

        // save the original state of TinyMCE's wpautop
        wpautop = tinyMCE.settings.wpautop;

        // bind to our custom event that fires when a new TinyMCE is added
        $(document).on( 'attachments/new', function( event ) {

            // initialize the applicable TinyMCE instances
            $('.attachments-field-wysiwyg:not(.ready)').init_wysiwyg();

        });

        // initialize the applicable TinyMCE instances
        $('.attachments-field-wysiwyg').init_wysiwyg();
    });

    // init TinyMCE
    $.fn.init_wysiwyg = function() {
        this.each(function() {

            // a flag for this instance
            $(this).addClass('ready');

            var input_id = $(this).attr('id');

            // create wysiwyg
            tinyMCE.settings.theme_advanced_buttons2 += ',code';        // add HTML button
            tinyMCE.settings.wpautop = false;                           // force wpautop to false to preserve linebreaks
            tinyMCE.execCommand('mceAddControl', false, input_id);      // add TinyMCE control
            tinyMCE.settings.wpautop = wpautop;                         // reset the original wpautop setting
        });
    };

    // bind to our custom event that fires when sorting starts
    $(document).on('attachments/sortable_start', function(event, ui) {

        // force wpautop to be false (and by doing so preserve our line breaks)
        tinyMCE.settings.wpautop = false;

        $('.attachments-field-wysiwyg').each(function() {
            tinyMCE.execCommand('mceRemoveControl', false, $(this).attr('id'));
        });

    });

    // bind to our custom event that fires when when sorting starts
    $(document).on('attachments/sortable_stop', function(event, ui) {

        $('.attachments-field-wysiwyg').each(function() {
            tinyMCE.execCommand('mceAddControl', false, $(this).attr('id'));
        });

        // reset the original wpautop setting
        tinyMCE.settings.wpautop = wpautop;
    });

})(jQuery);
</script>

    Snippet pulled from my WordPress plugin, Attachments: https://github.com/jchristopher/attachments/blob/3.3.2/classes/fields/class.field.wysiwyg.php