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

TinyMCE 4无法使用可排序的jquery div

1 个答案: