c# - TinyMCE 在动态添加受影响的文本区域后使用

Question

我的页面在很多地方使用了 tinyMCE 编辑器。大多数是在页面加载时加载的。对于所需的不同类型的编辑器，目前有两个单独的 inits:

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

当我这样做时，编辑器是空的。如果您很快看到，文本就在编辑器中，然后消失了。关于如何解决这个问题有什么建议吗？？

Answer 1

假设您尝试在调用execCommand 后立即在“EditNote”编辑器上设置内容，我怀疑问题是时间问题。换句话说，在您调用 setContent 时，TinyMCE 实例尚未完成加载，因此不会呈现它。

如果您要立即设置内容，为什么不直接将其添加到您的动态 textarea 创建中。这样 TinyMCE 就会在加载时拾取它。

或者，您可以使用 JavaScript 超时。例如

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