Использование TinyMCE после динамически добавленной затронутой текстовой области - PullRequest
Новая
       13

Использование TinyMCE после динамически добавленной затронутой текстовой области

1 голос
/ 11 марта 2011

Моя страница использует редакторы tinyMCE во многих местах. Большинство из них загружаются при загрузке страницы. В настоящее время существует два отдельных блока, как показано ниже, для различных типов редакторов: 

// Register script that will initialize all the compact tinyMCE editors (textareas) on the page.
tinyMCE.init({
    mode: 'textareas',
    editor_deselector: /(mceNoEditor|tinymce_simple)/,
    theme: 'advanced',
    cleanup_callback: 'myCustomCleanup',
    save_callback: 'myCustomSaveContent',
    plugins: '-tabfocus,-safari,-pagebreak,-style,-layer,-table,-save,-advhr,-advimage,-advlink,-emotions,-iespell,-inlinepopups,-insertdatetime,-preview,-media,-searchreplace,-print,-contextmenu-,paste,-directionality,-fullscreen,-noneditable,-visualchars,-nonbreaking,-xhtmlxtras,-template',
    //theme_advanced_buttons1: 'save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,fontselect,fontsizeselect',
    //theme_advanced_buttons2: 'cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,forecolor,backcolor',
    //theme_advanced_buttons3: 'tablecontrols,|,link,unlink,image,code,|,fullscreen',
    theme_advanced_buttons1: 'bold,italic,underline,|,fontselect,fontsizeselect,forecolor,backcolor',
    theme_advanced_buttons2: '',
    theme_advanced_buttons3: '',
    theme_advanced_toolbar_location: 'top',
    theme_advanced_toolbar_align: 'left',
    content_css: 'css/content.css',
    template_external_list_url: 'lists/template_list.js',
    external_link_list_url: 'lists/link_list.js',
    external_image_list_url: 'lists/image_list.js',
    media_external_list_url: 'lists/media_list.js',
    template_replace_values: { username: 'Some User', staffid: '991234' }
  });

  tinyMCE.init({
    mode: 'specific_textareas',
    editor_selector: 'tinymce_simple',
    theme: 'advanced',
    cleanup_callback: 'myCustomCleanup',
    save_callback: 'myCustomSaveContent',
    plugins: '-tabfocus,-safari,-pagebreak,-style,-layer,-table,-save,-advhr,-advimage,-advlink,-emotions,-iespell,-inlinepopups,-insertdatetime,-preview,-media,-searchreplace,-print,-contextmenu,-paste,-directionality,-fullscreen,-noneditable,-visualchars,-nonbreaking,-xhtmlxtras,-template',
    theme_advanced_buttons1: 'bold,italic,underline,|,fontselect,fontsizeselect,forecolor,backcolor',
    theme_advanced_buttons2: '',
    theme_advanced_buttons3: '',
    theme_advanced_toolbar_location: 'top',
    theme_advanced_toolbar_align: 'left',
    content_css: 'css/content.css',
    template_external_list_url: 'lists/template_list.js',
    external_link_list_url: 'lists/link_list.js',
    external_image_list_url: 'lists/image_list.js',
    media_external_list_url: 'lists/media_list.js',
    template_replace_values: { username: 'Some User', staffid: '991234' }
  });

Редакторы, загруженные по умолчанию при загрузке страницы, работают отлично. Там нет проблем.

Я думаю, что добавить текстовое поле динамически с помощью JavaScript. 

<textarea cols='1' rows='1' id='EditNote' class='tinymce_simple' style='width: 100%;' />

по результатам проведенного исследования мне нужно вручную добавить редактор для tinyMCE 

tinyMCE.execCommand('mceAddControl', false, 'EditNote');

это также прекрасно работает, редактор отображается правильно.

Я также вручную удаляю редактор, когда текстовая область удаляется со страницы. 

if (tinyMCE.getInstanceById('EditNote')) {
    tinyMCE.execCommand('mceFocus', false, 'EditNote');                    
    tinyMCE.execCommand('mceRemoveControl', false, 'EditNote');
    tinyMCE.triggerSave();
}

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

Например: 

var editor = tinyMCE.get('EditNote');               
editor.setContent('SomeText');

Когда я это делаю, редактор пуст. Если вы смотрите, очень быстро, текст находится в редакторе, а затем исчезает. Любые предложения относительно того, как решить эту проблему ??

1 Ответ

3 голосов
/ 15 марта 2011

Если вы пытаетесь установить содержимое в редакторе "EditNote" сразу после вызова execCommand , я подозреваю, что проблема связана с синхронизацией.Другими словами, во время вызова setContent экземпляр TinyMCE не завершил загрузку, поэтому он не отображает его.

Если вы устанавливаете содержимое немедленно, почему бы и нетпросто добавьте его в свое динамическое textarea создание.Таким образом, TinyMCE подхватит его при загрузке.

В качестве альтернативы вы можете использовать тайм-аут JavaScript.Например 

var t=setTimeout(function () {
        var editor = tinyMCE.get('EditNote');               
        editor.setContent('SomeText');
    },100);
...