javascript - TinyMCE 4 不适用于可排序的 jquery div

Question

我正在尝试制作一个应用程序，在该应用程序中，人们可以通过拖放 div 并对其进行编辑来实时构建时事通讯。 为了对 div 进行排序，我使用 jquery.sortable()，这些 div 还包含一个 TinyMce。在拖动 div 之前，它工作正常。我已经完成了 this link
但我仍然无法实现。

标记:

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

Answer 1

Tinymce 不喜欢在 dom 中移动编辑器。 之后编辑器将不再工作。

此处进行的方法是在其根元素(即 textarea 或 div)移动到 dom 中的另一个位置之前关闭 tinymce 实例。 错位后，您可以像往常一样重新启动编辑器。

// 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();