Question

我在幻灯片编辑页面上使用tinyMCE WYSIWYG，我想使用jQuery UI使它们也可以排序。标记看起来像这样：

<div class="slide-content">
    ...
    <textarea id="Slide_0_content"></textarea>
    <textarea id="Slide_1_content"></textarea>
</div>

这是启动jQuery sortable的代码：

$('#slide-list').sortable({
    start: function(event, ui){
        $('.slide-content textarea').each(function(){
            var id = $(this).attr('id');
            tinyMCE.execCommand('mceRemoveControl', false, id);
        });
    },
    stop: function(event, ui){
        $('.slide-content textarea').each(function(){
            var id = $(this).attr('id');
            tinyMCE.execCommand('mceAddControl', false, id);
        });
    }
});

当我放下幻灯片时，该幻灯片的内容区域变为空白，我甚至无法在其中单击以输入更多内容。我该如何解决这个问题？

Answer 1

这对我有用，在开始时我只用tinyMCE.triggerSave（）触发保存;并且在停止时我再次启动tinyMCE。

$("#sort").sortable({
    axis: "y",
    items: "div.tiny",
    start: function(event, ui) { 
        tinyMCE.triggerSave();
    },
    stop: function(event, ui) { 
        startTiny();
    }
});
function startTiny(){
    tinyMCE.init({
        // General options
        width : "100%",
        height: "100",
        mode : "textareas"
    });
}
startTiny();

这是小提琴http://jsfiddle.net/YfUyM/3/

jQuery UI可排序和tinyMCE

1 个答案: