Sortable WYSIWYG editor

时间:2014-02-12 作者:EHerman

我在metabox中有一组可排序的wysiwyg编辑器。不幸的是,每当我拖动一行时,我都会遇到这个错误,我不知道是什么导致了它。

Uncaught TypeError: Object [object Object] has no method \'destroy\'

这是我的可排序代码:

$( "#repeatable-fieldset-one tbody" ).sortable({
            handle: \'.jQuerySortableIcon\',
            cursor: \'move\',
            placeholder: "topTenSortablePlaceholder",
            start: function() {
                $(\'textarea\').each(function() {
                    var id = $(this).attr(\'id\');    
                    $(\'#\'+id).next().remove();
                    tinyMCE.execCommand(\'mceRemoveControl\', false, id);
                });
                // remove control from our descripiton, and title fields to preserve content
                // tinymce.EditorManager.execCommand(\'mceRemoveControl\',true, \'movie_description-1\');       
            },
            update: function() {                
                // update the ranking numbers after sorted
                $(\'.single-movie-row\').each(function() {
                    var thisIndex = ($(this).index() + 1);
                    $(this).find(\'.movie_rank_number\').val(\'# \'+thisIndex);

                });
                $(this).parents("#repeatable-fieldset-one tbody").sortable(\'refresh\');  
            }
        });
正如您所看到的,一开始,我正在从文本区域中删除控件(这在视觉上是有效的)。在出于任何原因删除控件后,所见即所得编辑器仍位于文本区域下方。

如果我去掉这一行:tinyMCE.execCommand(\'mceRemoveControl\', false, id); 我不再收到错误,但我的所见即所得编辑器不会转换回文本区域。我正在将它们转换为文本区域,以保留其中的内容。

首先,这个错误是什么?是因为运行mceRemoveControl时无法删除所见即所得编辑器吗?我认为我在早些时候就做到了这一点,但使用了另一种没有成功的方法,后来又回到了这条路线,现在遇到了这个错误。

有什么想法吗?

EDIT现在看来,它抛出错误的原因是因为它无法删除占位符。但我不知道为什么。

看起来,在我将新物品放置到位后,所有这些样式都被添加到其中,从而使所有东西都消失了:

width: 1375px; height: 263px; position: absolute; z-index: 1000;

1 个回复
最合适的回答,由SO网友:helgatheviking 整理而成

我向您指出了我在chat中的工作,但对于任何其他用户,我已经解决了repeatable, sortable tinyMCE editors (尽我所能)并在github上提供代码。

具体而言JS script 其中包括一节,介绍如何在可排序移动开始时禁用tinyMCE,并在排序完成时重新启用它。

var textareaID;
$(\'.wpa_loop\').sortable({
    handle: \'h3.handle\',
    axis: \'y\',
    opacity: 0.5,
    tolerance: \'pointer\',
    start: function(event, ui) { // turn TinyMCE off while sorting (if not, it won\'t work when resorted)
        textareaID = $(ui.item).find(\'.customEditor textarea\').attr(\'id\');
        try { tinyMCE.execCommand(\'mceRemoveControl\', false, textareaID); } catch(e){}
    },
    stop: function(event, ui) { // re-initialize TinyMCE when sort is completed
        try { tinyMCE.execCommand(\'mceAddControl\', false, textareaID); } catch(e){}
        $(this).find(\'.update-warning\').show();
    }
});
在哪里$(\'.wpa_loop\') 是与我的代码相关的选择器。

结束

相关推荐

TinyMCE编辑器删除<p>和<br>,而放入 ;

问题再现步骤:打开WordPress管理面板(我使用3.7版)添加页面</在编辑器上,选择“HTML”选项卡</写入<p>Lorem ipsum dolor sit amet</p><br> 内容区域上</选择“视觉”选项卡</选择“HTML”选项卡返回</代码<p>Lorem ipsum dolor sit amet</p><br> 格式已丢失,显示为:Lorem ipsum dolor sit ame