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?

Before dragstart:

before dragstart

After dragstop:

after dragstop


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:

(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


        // initialize the applicable TinyMCE instances

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

            // a flag for this instance

            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;


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

  • Can you elaborate? Maybe some sample code? Link only answers are discouraged. If that link goes bad this answer becomes useless. – s_ha_dum Feb 20 '13 at 14:24
  • Absolutely! That makes perfect sense, sorry, new to StackExchange! Added a code sample from the link. – Jonathan Christopher Feb 20 '13 at 14:59
  • Originally, you had a link to the source. Please add that back in addition to the code posted so that the code posted is properly attributed. – s_ha_dum Feb 20 '13 at 15:05
  • Sure thing, just added it back in. – Jonathan Christopher Feb 20 '13 at 16:08
  • This is cool ! but this solution made WP to save the content as html rather than the raw text, do you know the workaround to this? Thanks! – ayublin Jul 2 '13 at 10:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.