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

我的页面在很多地方使用tinyMCE编辑器。大多数页面在页面加载时加载。目前有两种不同类型的编辑器需要使用不同类型的编辑器：动态添加受影响的文本区后使用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');

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

来源

2011-03-11 Steph

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

如果您立即设置内容，为什么不简单地将它添加到您的动态textarea创建。这种方式TinyMCE会在加载时提取它。

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

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

来源

2011-03-15 01:49:22

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

回答

相关问题