我正在构建一个javascript应用程序,它将显示一个实时更新的讨论主题。它将定期轮询服务器以获取新数据,并将其写入页面。对于发表评论和回复,我们正在尝试使用TinyMCE WYSIWYG编辑器,该编辑器将textarea转换为漂亮的HTML编辑器。这是我第一次使用这个编辑器。该应用程序在很大程度上依赖于jQuery,因此我们使用TinyMCE的jQuery插件使其更易于使用。
这就是问题......每当我们的代码生成一个新的textarea时,我们都会附加一个编辑器。第一个出现并完美地运作。当我们添加更多时,TinyMCE代码将隐藏textarea,但不会生成编辑器,我不知道为什么。
我已经在jsFiddle上构建了一个简单的工作示例:
function addTextArea(){
// find where the textareas will be placed
var container = $('#textareaContainer');
container.append( newTextArea() );
container.append( $(document.createElement('hr')) );
}
// define some configuration settings for the editor
var editorConfig = {
// Location of TinyMCE script
script_url: 'http://tinymce.cachefly.net/4.0/tinymce.min.js',
// setup parameters
menubar: false,
statusbar: false,
toolbar: 'bold italic underline | bullist numlist | undo redo | removeformat'
}
function newTextArea(){
var textarea = $(document.createElement('textarea'))
.attr('id',(new Date()).getTime()) // give it a unique timestamp ID
.val( 'This text area added @ ' + new Date() )
.tinymce(editorConfig); // apply the WYSIWYG editor
return textarea;
}
任何帮助将不胜感激。谢谢。
答案 0 :(得分:4)
您应该为新文本区域添加类,然后每隔5秒在该类上应用tinymce 以下是适用于您的jsfiddle的更新
function timerElapsed(){
// limit this example so we don't fill up the page with too many textareas
if( $('#textareaContainer').find('textarea').length < 4 ){
addTextArea();
}
// define some configuration settings for the editor
var editorConfig = {
// Location of TinyMCE script
script_url: 'http://tinymce.cachefly.net/4.0/tinymce.min.js',
// setup parameters
menubar: false,
statusbar: false,
toolbar: 'bold italic underline | bullist numlist | undo redo | removeformat'
}
$('.tinymce-txt').tinymce(editorConfig);
}
function addTextArea(){
// find where the textareas will be placed
var container = $('#textareaContainer');
container.append( newTextArea() );
container.append( $(document.createElement('hr')) );
}
function newTextArea(){
var textarea = $(document.createElement('textarea'))
.attr('id',(new Date()).getTime()) // give it a unique timestamp ID
.val( 'This text area added @ ' + new Date() )
.attr('class', 'tinymce-txt');// apply the WYSIWYG editor
return textarea;
}
$('#btnAdd').click( function(){ addTextArea(); } );
// set up the regular "polling" code
setInterval(function () {
timerElapsed();
}, 5000);
// NOTE: I also tried a repeating setTimeout function and had the same problem
答案 1 :(得分:0)
`$('.tinymce-txt').tinymce(editorConfig);`
没有和我合作,我换了
tinymce.EditorManager.execCommand('mceAddEditor', false, uniqeId);