Экземпляры TinyMCE в jquery сортируются - PullRequest
Новая
       57

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

15 голосов
/ 13 октября 2010

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

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

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

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

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

В приведенном ниже коде я просто нацеливаюсь на определенную область текстаid для тестирования. 

$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" );
                            }
                    });

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

Ответы [ 11 ]

22 голосов
/ 03 октября 2011

Эй, если у вас уже есть данные в ваших экземплярах 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

15 голосов
/ 04 сентября 2014

Для версии 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'));
  });
}
2 голосов
/ 12 ноября 2016

Что ж, стабильное решение этой проблемы для 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) перед каждым сбросомв противном случае последний примененный будет применяться ко всем.

Простой способ изменить настройки - установить флаг типа настроек в текстовой области, например:

<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;
}
2 голосов
/ 19 января 2011

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

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

tinyMCE.execCommand( 'mceRemoveControl', false,  $('textarea',ui.item)[0].id );
1 голос
/ 28 июля 2017

Я закончил тем, что просто уничтожил и пересоздал редактирование события сортируемого 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());
  });
}

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

1 голос
/ 18 октября 2010

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

0 голосов
/ 07 февраля 2017 
start: function (e, ui) {
  tinyMCE.execCommand( 'mceRemoveEditor', false, editor_id );
},
stop: function (e, ui) {
  tinymce.execCommand('mceAddEditor', true, editor_id);
}

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

0 голосов
/ 08 июля 2016

я сделал 

$("#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});
        }

    });
0 голосов
/ 28 июня 2016

Я смог решить подобную проблему с:

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

и

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

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

0 голосов
/ 07 февраля 2016

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

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

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

Итак, я пришел к этому окончательному решению после объединения некоторых из вышеуказанных решений. Благодаря @ Honor 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 );
    }
Страница:
...