为动态加载的新元素添加 tinymce
Posted
技术标签:
【中文标题】为动态加载的新元素添加 tinymce【英文标题】:add tinymce for new element loaded dynamicaly 【发布时间】:2013-06-06 13:31:52 【问题描述】:我的页面包含 5 个 div,可以通过 Tinymce 内联编辑器进行编辑。通过单击一个按钮(如此动态地),我对 Jquery loding 5 个新的感到满意。但是当然新的不受 Tinymce 的影响,因为 init 已经加载...请问如何为新的 div 激活 tinymce?
我的 html:
<div id=\"billetdroit\">
<div id=\"divtitre\"><h1 class=\"editable\">blablabla</h1></div>
<div class=\"editable\" id=\"tiny_01\">blablabla2</div>
</div>
<div id=\"billetdroit\">
<div id=\"divtitre\"><h1 class=\"editable\">blablabla</h1></div>
<div class=\"editable\" id=\"tiny_02\">blablabla2</div>
</div>
<div id=\"billetdroit\">
<div id=\"divtitre\"><h1 class=\"editable\">blablabla</h1></div>
<div class=\"editable\" id=\"tiny_03\">blablabla2</div>
</div>
...
...
还有一个按钮:当你点击时,它会动态显示 5 个 div "billetdroit"
我的 tinymce 初始化:
tinymce.init(
selector: "textarea",
language: 'fr_FR',
image_advtab: true,
menubar:false,
forced_root_block: false,
plugins: ["link","code","media","image","textcolor", "emoticons"],
toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons"
);
tinymce.init(
selector: "h1.editable",
language: 'fr_FR',
inline: true,
toolbar: "undo redo",
menubar: false
);
tinymce.init(
selector: "div.editable",
language: 'fr_FR',
image_advtab: true,
menubar:false,
inline: true,
forced_root_block: false,
plugins: ["link","code","media","image","textcolor", "emoticons"],
toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons"
);
有什么解决办法吗? 谢谢
编辑:
我试过了:
$(document).ready(function()
var track_click = 1; //track user click on "load more" button, righ now it is 0 click
var total_pages = Globals.total_pages;
// $('#results').load("loadmore.php", 'page':track_click, function() track_click++;); //initial data to load
$(".load_more").click(function (e) //user clicks on button
$(this).hide(); //hide load more button on click
$('.animation_image').show(); //show loading image
if(track_click <= total_pages) //user click number is still less than total pages
//post page number and load returned data into result element
$.post('loadmore.php','page': track_click, function(data)
$(".load_more").show(); //bring back load more button
$("#results").append(data); //append data received from server
//scroll page smoothly to button id
$("html, body").animate(scrollTop: $("#load_more_button").offset().top, 500);
//hide loading image
$('.animation_image').hide(); //hide loading image once data is received
track_click++; //user click increment on load button
).fail(function(xhr, ajaxOptions, thrownError) //any errors?
alert(thrownError); //alert with HTTP error
$(".load_more").show(); //bring back load more button
$('.animation_image').hide(); //hide loading image once data is received
);
if(track_click >= total_pages-1) //compare user click with page number
//reached end of the page yet? disable load button
$(".load_more").attr("disabled", "disabled");
$.getScript('include/tinymce/tinymce.min.js', function()
tinymce.init(
selector: "textarea",
language: 'fr_FR',
image_advtab: true,
menubar:false,
forced_root_block: false,
plugins: ["link","code","media","image","textcolor", "emoticons"],
toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons"
);
tinymce.init(
selector: "h1.editable",
language: 'fr_FR',
inline: true,
toolbar: "undo redo",
menubar: false
);
tinymce.init(
selector: "div.editable",
language: 'fr_FR',
image_advtab: true,
menubar:false,
inline: true,
forced_root_block: false,
plugins: ["link","code","media","image","textcolor", "emoticons"],
toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons"
);
);
);
);
但是没有成功...
【问题讨论】:
为什么你不只是在新添加的元素上调用 tinymce init?! 这就是我想要的...但是如何? 与静态元素相同,只需在添加这些元素后在单击按钮处理程序中调用它 你能给出确切的语法吗? 首先,ID 在上下文页面上必须是唯一的!您在此处的代码无效,请修复此问题,否则许多事情将无法正常工作。其次,试试自己,然后告诉我你在哪里卡住了。但我讨厌 tinymce,我不使用它也不想使用它。 【参考方案1】:有一种简单的方法可以初始化 tinymce 编辑器:
tinyMCE.execCommand("mceAddControl", false, 'your_div_id');
【讨论】:
谢谢。我采用了另一种方式:我将 tinymceinit() 放在每个新 div 生成之后。它有效...以上是关于为动态加载的新元素添加 tinymce的主要内容,如果未能解决你的问题,请参考以下文章