首先动态添加了TinyMCE编辑器显示,其他编辑器则没有
First dynamically-added TinyMCE editor displays, others do not
我正在构建一个javascript应用程序,该应用程序将显示实时更新的讨论线程。它将定期轮询服务器以获取新数据,并将其写入页面。对于发布评论和回复,我们尝试使用TinyMCE所见即所得编辑器,它将文本区域转换为一个漂亮的HTML编辑器。这是我第一次接触这个编辑。该应用程序严重依赖jQuery,因此我们使用TinyMCE的jQuery插件使其更易于使用。
问题是。。。每次我们的代码生成一个新的文本区域时,我们都会给它附加一个编辑器。当我们添加更多时,TinyMCE代码会隐藏文本区域,但不会生成编辑器,我不知道为什么。
我已经在jsFiddle上构建了一个简单的工作示例:
http://jsfiddle.net/HUHKT/
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;
}
如有任何帮助,我们将不胜感激。非常感谢。
您应该为新的文本区域添加类,然后每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
http://jsfiddle.net/HUHKT/5/
`$('.tinymce-txt').tinymce(editorConfig);`
不适用于我,我将其替换为tinymce.EditorManager.execCommand('mceAddEditor', false, uniqeId);
相关文章:
- ExtJS网格单元格编辑器,防止焦点松动问题
- 可以't使用PHP使用Froala编辑器上传图像URL
- 如何在corona sdk中从CK编辑器中检索数据
- Eclipse编辑器中无法访问的代码
- 如何将拼写检查集成到密文编辑器
- 一个页面上有多个Ace编辑器,没有预先设置元素
- ACE编辑器正在删除模块,因为define是't一根绳子
- 如何从DOM中删除Aloha编辑器
- 用于用户内容的简单代码编辑器/文本格式化程序(在Rails中)
- 在plone 5中将自定义的灵活性内容类型插入到tinymce编辑器中
- 如何在tinymce编辑器中将点击事件绑定到html标签
- 扩展 ACE 编辑器,如何导入自定义文件
- dhtmlx添加新行并启动单元格编辑器
- 为现有Roslyn语言lexer/parser选择基于javascript的代码编辑器
- 地理定位在Jsfidle中工作,但不在任何其他JS编辑器中
- JQuery文本编辑器-在工具栏中添加其他下拉列表
- 简单代码仅适用于某些编辑器,而不适用于其他任何地方
- 首先动态添加了TinyMCE编辑器显示,其他编辑器则没有
- Netbeans中的正则表达式错误在其他编辑器中不存在
- 是否有Sublime或Atom代码编辑器的附加组件,可以让我快速编辑其他函数中调用的函数