TinyMCE - несколько конфигов / юнитов с jQuery

Question

Я создаю сайт на основе jQuery и Ajax, почти каждый элемент сайта создается с помощью jQuery.

Это может быть очень эффективным, поскольку оно освобождает большую часть работы по генерации страниц изсервер.

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

tinyMCE получил версию jQuery, но он просто работает для установки и запуска сразу.

var textarea = $("<textarea/>");
and then just play with
textarea.tinymce({ 
     script_url : 'js/tiny_mce/tiny_mce.js',
     theme : "advanced"
     configs:yeah...
});

Когда я пытаюсь сделать это еще на одном, textarea2.tinymce ({ease: peace});затем он не загружается, он скрывает textarea2, но редактор не отображается, насколько я понимаю, потому что редактор уже создан в DOM.

Я не хочу удалять первый, япросто хочу инициировать один (или несколько :) больше.Я пытался использовать tinyMCE.init с editor_selector: mceAdvanced1, но когда я позже создаю $ (""). AddClass ("mceAdvanced1") с jQuery, он не хочет загружаться с редактором.

иливот так

var ed = new tinymce.Editor({
    some_setting : 1
});
var textarea = $("<textarea/>");
ed.add(textarea);

И я пытался сохранить версию jQuery в переменной, но доза не работала, если я не добавляю ее сразу, и невозможно переместить ее после ее создания или клонировать...

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

Спасибо за ваши усилия.

РЕДАКТИРОВАТЬ

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

Вот как я это делаю, запускаю редактор...

tinyMCE.init({
    mode : "exact",
    elements : "popup",
    // General optionss...
});

А где я создаю сайт с помощью jQuery, я просто применяю его таким образом ...

tinyMCE.execCommand('mceRemoveControl', false, 'popup');
dd.append($("#popupContainer"));    
$("#popupContainer").show();
tinyMCE.execCommand('mceAddControl', false, 'popup');
tinyMCE.activeEditor.setContent('');

Answer 1

Я боролся с подобной проблемой и использую для этого плагин livequery с тех пор, как нашел его.Это позволяет обойти множество проблем, связанных с добавлением новых элементов в DOM.

Пример использования будет выглядеть следующим образом:

// Using the TinyMCE jquery build
$('textarea.wysiwyg').livequery(function () {
    $(this).tinymce({/* your options */});
});

Там может быть более эффективным (и, вероятно, многословным) способы сделать это, но так как плагин livequery , поэтому полезен для сайта, полностью поддерживающего Ajax, я настоятельно рекомендую его.

Answer 2

Решение с livequery было именно тем, что мне нужно, но способ, который Уэсли сказал нам, не работает для меня после смены домена и добавления новой текстовой области. Следующее решение работает для меня после нескольких часов попыток отладки. ;) Все мои текстовые области, работающие с tinyMCE, получили класс " tinyMceEditor ", поэтому в моем случае селектором livequery является "textarea.tinyMceEditor".

$('textarea.tinyMceEditor').livequery(function () {
    tinyMCE.init({
        mode : "exact",
        elements : $(this).attr('id'),
        theme : "advanced",
    });
});

Answer 3

Я также писал здесь: TinyMCE - добавление тумблера ВКЛ / ВЫКЛ решение, которое работает для этого. Я предлагаю не использовать помощник jquery для манипулирования несколькими экземплярами tinymce на одной странице. Я не верю, что помощник jquery был создан для этого. Просто используйте объект tinyMCE, который в любом случае дает вам простой способ инициализации один раз для всех ваших экземпляров, например:

tinyMCE.init({
    theme : "advanced",mode : "exact",
    mode : "none", 
    plugins : strplgns,
    theme_advanced_buttons1 : strbtns1,
    theme_advanced_buttons2 : strbtns2,
    theme_advanced_buttons3 : strbtns3,
    content_css : "/css/hlsl.css"
});  

Обратите внимание на {mode: "none"}, что означает, что вы инициализируете объект tinyMCE, но не создаете редактор. В моем случае строки strbtnsX довольно длинные, поэтому я думаю, что инициализация один раз для каждой страницы, а не для каждого редактора, обеспечивает повышение производительности (но я вообще не тестировал производительность). После этой инициализации все редакторы, которые вы поместите на страницу с помощью mceAddControl, будут выглядеть и функционировать одинаково. Затем я просто использую простые функции показа и скрытия, чтобы переключать редакторы по мере необходимости:

function showBlogEditor(strItemId){
    var theeditor = tinyMCE.get(strItemId); //strItemId is the ID of the HTML element
    if(theeditor && theteditor.initialized){
        //you can do something here if you need
    }else{
        tinyMCE.execCommand('mceAddControl', false, strItemId);
    }
}
function hideBlogEditor(strItemId){
    if (tinyMCE.getInstanceById(strItemId))
    {
            tinyMCE.execCommand('mceFocus', false, strItemId);
            tinyMCE.execCommand('mceRemoveControl', false, strItemId);
    }           
}

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

Answer 4

Чтобы иметь несколько экземпляров tinymce, использующих другую конфигурацию, вы можете взглянуть на этот пример: http://tinymce.moxiecode.com/tryit/multiple_configs.php