Подтвердить что ты не робот

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

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

У меня есть целая куча div, которые можно сортировать с помощью сортировки Jquery, некоторые из div содержат экземпляр TinyMCE. Что все нормально, пока вы не попытаетесь переместить div, содержащий экземпляр TinyMCE, - когда вы делаете TinyMCE, кажется, обновляется и создает новый экземпляр, который затем вы теряете данные и т.д. И тогда вся страница ломается, поскольку javascript больше не работает работает:). За это время я получаю ошибки конструктора javascript и т.д. В Firebug.

То, что я решил, лучший способ пойти, - это когда div начинает перетаскивать удаление tinymce из текстовой области, и когда он помещается в него, новая позиция вставляет tinymce обратно.

Я могу удалить это нормально, но не могу добавить его обратно, поскольку я получаю больше ошибок конструктора.

Примечание. TinyMCE автоматически добавляется ко всем моим текстовым областям в системе, которую я использую, поэтому стараюсь избегать возиться с TinyMCE.

В приведенном ниже коде я просто нацелен на определенный идентификатор textarea для целей тестирования.

$cols.sortable({
                            cursor: 'move',
                            revert: true,
                            opacity: 0.6,
                            placeholder: 'widgetplaceholder',
                            forcePlaceholderSize: true,
                            connectWith: cols,
                            zIndex:9000,
                            cancel: ".collapsable_box_editpanel_groups, .collapsable_box_content",
                            start: function(e, ui) {
                                     // removes tinymce ok from textarea
                                     tinyMCE.execCommand( 'mceRemoveControl', false, 'textarea1' );

                            },
                            stop: function(e,ui) {
                                    // breaks here - constructor error
                                    tinyMCE.execCommand( 'mceAddControl', true, 'textarea1' );
                                    $(this).sortable( "refresh" );
                            }
                    });

У кого-нибудь есть другие решения? Если вам нужна дополнительная информация, пожалуйста, позвольте мне:)

4b9b3361

ОТВЕТЫ

Ответ 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