TinyMCE 4 not working with sortable jquery divs

问题

I am trying to make an application where one can build newsletters in real time by dragging dropping divs and editing them. To sort divs I am using jquery.sortable(), these divs also contain a TinyMce. Which is working fine until divs are dragged.I have gone through this link
but still I am unable to achieve that.

Markup:

<div class="container">
    <div class="sort-List">
        <li>
            <div class="edit-Text">
                <p>Div 1</p>
            </div>
        </li>
        <li>
            <div class="edit-Text">
                <p>Div 2</p>
            </div>
        </li>
        <li>
            <div class="edit-Text">
                <p>Div 3</p>
            </div>
        </li>
        <li>
            <div class="edit-Text">
                <p>Div 4</p>
            </div>
        </li>
    </div>
</div>

JS:

<!--Tiny Mce-->
<script>
    tinymce.init({
        selector: '.edit-Text',
        inline: true,
        menubar: false,
        plugins: "textcolor colorpicker",
        toolbar: ["undo redo | styleselect | bold italic | alignleft aligncenter alignright | forecolor backcolor"],
    });
</script>
<!--Tiny Mce-->    
<!--MAKE DIVS SORTABLE-->
<script>
    $(function () {
        $(".sort-List").sortable({
            cursor: 'move',
            start: function (e, ui) {
                $(this).find('.edit-Text').each(function () {
                    tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id'));
                });
            },
            stop: function (e, ui) {
                $(this).find('.edit-Text').each(function () {
                    tinyMCE.execCommand('mceAddEditor', true, $(this).attr('id'));
                });
            },
        });
    });
</script>
<!--MAKE DIVS SORTABLE-->

回答1:

Tinymce does not like it to have an editor moved around in the dom. Afterwards the editor won't work anymore.

The way to proceed here is to shut down a tinymce instance before its root element (i.e. textarea or div) gets moved to another location in the dom. After the dislocation you may reinit the editor as usual.

// Save the tinymce content to Textarea
tinyMCE.triggerSave();

//Disabling the text area
var textareaId = [PUT YOUR TEXTAREA ID HERE]; 
tinyMCE.execCommand("mceRemoveEditor", false, textareaId);

// Moving code - Your code may be different
$(this).insertAfter($(this).next());

//reinitiate tinyMCE - custom initTinyMCE function, you can do your way
initTinyMCE();

来源：https://stackoverflow.com/questions/34850038/tinymce-4-not-working-with-sortable-jquery-divs

标签

javascript

jquery

html

css

tinymce