Javascript TinyMCE 4不使用可排序的jquery div

我正在尝试制作一个应用程序，通过拖放div并编辑它们，可以实时生成新闻稿。 为了对div进行排序，我使用jquery.sortable（），这些div还包含一个TinyMce。在拖动div之前，它工作正常。我已经通过了
但我仍然无法做到这一点

标记：

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

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

第一组



第2组



第3组



第4组

JS:

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

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

tinymce.init({
选择器：'.编辑文本'，
是的，
梅努巴：错，
插件：“textcolor颜色选择器”，
工具栏：[“撤消重做|样式选择|粗体斜体|左对齐中心对齐右对齐|前景色背景色”]，
});
$（函数（）{
$（“.sort List”）.sortable({
光标：“移动”，
开始：功能（e、ui）{
$（this）.find（'.edit Text'）.each（函数（）{
tinyMCE.execCommand（'mceRemoveEditor'，false，$（this.attr（'id'））；
});
},
停止：功能（e、ui）{
$（this）.find（'.edit Text'）.each（函数（）{
tinyMCE.execCommand（'mceAddEditor'，true，$（this.attr（'id'））；
});
},
});
});

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

在这里继续的方法是在tinymce实例的根元素（即textarea或div）移动到dom中的另一个位置之前关闭该实例。 错位后，你可以像往常一样重新编辑

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

---

你试过重新启动tinymce吗？我在事件中遇到了这个问题，我猜tinyMCE也是一样，只要在排序后重新运行tinyMCE脚本，我尝试了一些东西，但仍然不能正常工作。我在上面的代码中也做了同样的事情。在拖动div时，我已经关闭了tinyMCE实例。您没有执行的操作。你能展示你所有的代码吗？以上是我除了链接到jquery和tinyMCE之外的所有代码。：）问题可能是编辑器源元素在编辑器关闭之前被移动，这可能是一个计时problem@Thariama就我而言，这是因为我事先没有打电话给triggerSave。