Question

我的网页在很多地方使用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');

这也很有效，编辑器可以正确显示。

当从页面中删除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');

当我这样做时，编辑器是空的。如果您非常快速地观看文本在编辑器中，然后消失。关于如何解决这个问题的任何建议??

Answer 1

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

如果您要立即设置内容，为什么不将其添加到动态 textarea 创建中。那样TinyMCE会在加载时拿起它。

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

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

动态添加受影响的textarea后使用TinyMCE

1 个答案: