CODEWITHSUNDEEP
c#javascriptasp.netdynamictinymce
Steph
Steph

Reputation: 409

TinyMCE use after dynamically added affected textarea

My page uses tinyMCE editors in quite a few places. Most of the are loaded when the page loads. There are two separate inits currently as below for the different types of editors that are needed:

// 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' }
  });

The editors loaded by default when the page loads work great. No problems there.

I think add a textbox dynamically via javascript.

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

by the research i've done, i need to add the editor manually to tinyMCE

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

this also works great, the editor displays correctly.

I also manually remove the editor when the textarea is removed from the page.

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

My problem comes when I try to load text into this editor after it has been created and manually added.

For example: 

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

When I do this, the editor is empty. If you watch, very quickly, the text is in the editor, and then disappears. Any suggestions as to how to fix this problem??

Upvotes: 1

Views: 2699

Answers (1)

Brett Henderson
Brett Henderson

Reputation: 1684

Assuming you are trying to set the content on the "EditNote" editor immediately after you call the execCommand, I suspect the problem is a timing issue. In other words, at the time you call setContent, the TinyMCE instance hasn't completed loading, so it doesn't render it.

If you are setting the content immediately, why not simply add it to your dynamic textarea creation. That way TinyMCE would pick it up when loading.

Alternatively, you could use a JavaScript timeout. For example

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

Upvotes: 3

Related Questions