使用 TinyMCE 编辑器在 div 上进行 jquery-ui 排序会导致文本消失

Question

请按照以下网址的说明进行操作： http://www.farinspace.com/multiple-wordpress-wysiwyg-visual- editors/

我的元框中有一些不错的所见即所得编辑器，

我的标记如下：

 <div class="sortable">
 <div class="sortme">
<?php $mb->the_field('extra_content2'); ?>
        <div class="customEditor"><textarea name="<?php $mb->the_name(); ?>"><?php echo wp_richedit_pre($mb->get_the_value()); ?></textarea></div>
</div>
 <div class="sortme"
<?php $mb->the_field('extra_content3'); ?>
        <div class="customEditor"><textarea name="<?php $mb->the_name(); ?>"><?php echo wp_richedit_pre($mb->get_the_value()); ?></textarea></div>
</div>
</div>

这只是 WP_alchemy （也来自 farinspace.com），用于包装在 div 中的文本区域

以及告诉tinymce 启动的脚本：

function my_admin_print_footer_scripts()
{
    ?><script type="text/javascript">/* <![CDATA[ */

        jQuery(function($)
        {
            var i=1;
            $('.customEditor textarea').each(function(e)
            {
                var id = $(this).attr('id');

                if (!id)
                {
                    id = 'customEditor-' + i++;
                    $(this).attr('id',id);
                }
                tinyMCE.execCommand('mceAddControl', false, id);

            });
        });
    /* ]]> */</script><?php
}

// important: note the priority of 99, the js needs to be placed after tinymce loads
add_action('admin_print_footer_scripts','my_admin_print_footer_scripts',99);

那部分工作正常。但是当我尝试启动 jqueryUI sortable:

$('.sortable').sortable();

它可以让我对多个 .sortme div 进行排序，但编辑器中的内容消失了。我怎样才能让文本持续存在？它在没有tinymce编辑器的情况下工作得很好，所以我认为这是一个冲突。

Answer 1

此（ $('.sortable').sortable(); ）不适用于tinymce编辑器。 Tinymce 不喜欢在 dom 中被拖着走。为了使其工作，您首先需要关闭 Tinymce

tinyMCE.execCommand('mceRemoveControl', false, id);

然后排序，然后重新初始化它们

tinyMCE.execCommand('mceAddControl', false, id);