动态添加受影响的文本区域后使用 TinyMCE答案

【问题标题】：TinyMCE use after dynamically added affected textarea动态添加受影响的文本区域后使用 TinyMCE
【发布时间】：2011-07-13 17:41:07
【问题描述】：

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

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

这也很好用，编辑器显示正确。

当 textarea 从页面中删除时，我也手动删除了编辑器。

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

我在创建并手动添加文本后尝试将文本加载到该编辑器时出现问题。

例如：

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

当我这样做时，编辑器是空的。如果你看，很快，文本在编辑器中，然后消失。有关如何解决此问题的任何建议？

【问题讨论】：

标签： c# javascript asp.net dynamic tinymce

【解决方案1】：

假设您在调用 execCommand 后立即尝试在“EditNote”编辑器上设置内容，我怀疑问题是时间问题。换句话说，在你调用 setContent 的时候，TinyMCE 实例还没有完成加载，所以它没有渲染它。

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

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

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

【讨论】：