Экземпляры TinyMCE в jquery сортируются

Ответ 1

Эй, если у вас уже есть данные в экземплярах MCE, чтобы не потерять его, вы можете попробовать следующее:

start: function(e, ui){
    $(this).find('.tinyMCE').each(function(){
        tinyMCE.execCommand( 'mceRemoveControl', false, $(this).attr('id') );
    });
},
stop: function(e,ui) {
    $(this).find('.tinyMCE').each(function(){
        tinyMCE.execCommand( 'mceAddControl', true, $(this).attr('id') );
        $(this).sortable("refresh");
    });
}

В моем случае я классифицировал все экземпляры MCE с .tinyMCE

Ответ 2

Для версии 4 TinyMCE

start: function (e, ui) {
  $(ui.item).find('textarea').each(function () {
     tinymce.execCommand('mceRemoveEditor', false, $(this).attr('id'));
  });
},
stop: function (e, ui) {
  $(ui.item).find('textarea').each(function () {
     tinymce.execCommand('mceAddEditor', true, $(this).attr('id'));
  });
}

Ответ 3

Для тех, кто пытается динамически назначать "textarea1", draggable находится в объекте ui как ui.item. Для одного текстового поля на каждый сортируемый:

tinyMCE.execCommand( 'mceAddControl', false,  $('textarea',ui.item)[0].id );

tinyMCE.execCommand( 'mceRemoveControl', false,  $('textarea',ui.item)[0].id );

Ответ 4

Нет, другого решения нет. Это то, как это нужно сделать. Когда элементы манипулинта dom, содержащие экземпляры tinymce, вам необходимо дезактивировать их и активировать их, когда вы закончите операцию dom с помощью mceRemoveControl и mceAddControl.

Ответ 5

У меня есть динамическая форма с несколькими абзацами, которые можно редактировать с помощью TinyMCE. Чтобы разрешить повторную сортировку абзацев, я добавил кнопки, которые перемещают текстовые области вверх и вниз.

Мне удалось заставить его работать с помощью alt= "textareaid" на кнопке, которая перемещает текстовое поле вверх или вниз, и используя этот textareaid для команд mceRemoveEditor и mceAddEditor. Текстовое поле должно находиться в div с class= "textarea_container".

$('.move_textarea_up').click(function(){
    var tinymceid= $(this).attr("alt");
    tinyMCE.execCommand('mceRemoveEditor', false, tinymceid);
    $(this).closest('div.textarea_container').insertBefore($(this).closest('div.textarea_container').prev());
    tinyMCE.execCommand('mceAddEditor', false, tinymceid);
}); 
$('.move_textarea_down').click(function(){
    var tinymceid= $(this).attr("alt");
    tinyMCE.execCommand('mceRemoveEditor', false, tinymceid);
    $(this).closest('div.textarea_container').insertAfter($(this).closest('div.textarea_container').next());
    tinyMCE.execCommand('mceAddEditor', false, tinymceid);
});

Ответ 6

Для меня работающее решение здесь. Для версии 4 TinyMCE

Мой случай: я использую сортировку jquery с полем повторителя для мета-окна внутри wordpress. Каждый сортируемый элемент имеет textarea, преобразованный в редактор tinyMCE.

Когда я перемещал один элемент из сортируемых элементов, редактор внутри только одного элемента разбился и содержимое не отображалось на визуальном Я использовал mceRemoveEditor и mceAddEditor, чтобы предотвратить проблему.

Итак, я пришел к этому окончательному решению после объединения некоторых из вышеперечисленных решений. Благодаря @Honorable Chow, @pragmar @Sonicdesign Ну, ваши решения не работали для меня так, как они есть, поэтому я их модифицировал. Вот мой код, который отлично работает для меня.

start: function(e, ui){
        tinyMCE.execCommand( 'mceRemoveEditor', false,  jQuery('textarea',ui.item)[0].id );
    },
    stop: function(e,ui) {
        tinyMCE.execCommand( 'mceAddEditor', false,  jQuery('textarea',ui.item)[0].id );
    }

Ответ 7

У меня есть возможность решить аналогичную проблему:

tinymce.activeEditor.setMode( 'только для чтения');

и

tinymce.activeEditor.setMode( 'дизайн');

это работает для версии 4.3.x

Ответ 8

Я сделал

$("#stores-container").sortable({

        stop: function(event, ui) {

            textareaID = $(ui.item).find(' textarea').attr('id');

            textareaVal=$(ui.item).find(' textarea').val();

            editorID=$(ui.item).find('.mce-container').attr('id');

            $( "#"+editorID ).remove();

            $('#'+textareaID).show();
            tinymce.init({selector: '#'+textareaID});
        }

    });

Ответ 9

Хорошо, устойчивое решение этой проблемы для TinyMce v.4 +:

start: function(e, ui){
        tinyMCE.triggerSave();
    },
    stop: function(e,ui) {

        $(this).find('textarea').each(function(){
            tinyMCE.execCommand( 'mceRemoveEditor', false, $(this).attr('id') );

            // if your tinymce instance have different settings
            tinymce.init(tinymce_settings($(this).attr('data-type')));

            tinyMCE.execCommand( 'mceAddEditor', false, $(this).attr('id') );
        });
    }

Если в вашем текстовом поле применяется более одного типа настроек, вы должны объявить tinymce.init(settings) перед каждым reset, в противном случае последнее применимое будет применяться ко всем.

Простым способом изменения параметров является установка флага типа настроек в вашем текстовом поле, например:

<textarea data-type="settings_one"></textarea> <textarea data-type="settings_two"></textarea>

а затем используйте функцию загрузчика, которая будет распределять необходимую информацию:

function tinymce_settings(type) {

var settings;

switch(type) {

  case 'settings_one' :
    settings = {...}
    break;
  }    
 return settings;
}

Ответ 10

start: function (e, ui) {
  tinyMCE.execCommand( 'mceRemoveEditor', false, editor_id );
},
stop: function (e, ui) {
  tinymce.execCommand('mceAddEditor', true, editor_id);
}

Это отлично работает, я использовал только для одного редактора. Большое спасибо:).

Ответ 11

В итоге я просто уничтожил и воссоздал редактирование на сортируемом событии stop():

stop: function (e, ui) {
  $(this).find('textarea').each(function () {
    tinyMCE.get($(this).attr('id')).destroy();
    // the code below locates and evals the editor init script
    eval($(this).parents('.item').find('script').html());
  });
}

Работает как шарм и, вероятно, является лучшим вариантом, чем другие предложения по уничтожению редактора при запуске(), а затем воссоздавать на stop() - потому что таким образом вы по-прежнему перетаскиваете визуально привлекательный редактор. Постскриптум Использование TinyMCE 4.5.2