我一直在理解如何为tinymce
编辑器设置事件处理程序。
这篇文章可能会变长,所以我很抱歉。
我正在阅读this post,这正是我想要做的事情:
我可能会以一种令我困惑的方式实例化我的TinyMCE编辑器实例。
在我的网站上,我主要让我的编辑做最简单,最简单的工作。
现在我在一个页面上,我希望反映onkeyup
更改显示在<div id="displayHtml">
(类似于SOF正在做的事情)
以下是我在大多数页面中通常拥有的内容:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tinymce_configs.js"></script>
</head>
<body>
<div id="displayHtml"></div>
<textarea name="notecomments" id="notecomments" tinymce="tinymce_basic" style="width:650px;height:555px;"></textarea>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$('textarea[tinymce]').each(function(){
var tinymceopts = $(this).attr('tinymce');
$(this).tinymce(window[tinymceopts]);
});
// my failed attempt to add an event
$(".mceContentBody").on('keyup',function(){
var htmltxt = $(this).val();
$("#displayHtml").html(htmltxt);
});
});
</script>
</body>
</html>
您会在tinymce="tinymce_basic"
中看到textarea
。我通过这种方式全球化地调用了tinymce主题和插件。对我来说也很有用。
在我的tinymce_configs.js文件中,这是我定义的内容:
// JavaScript Document
var tinymce_basic =
{
script_url : '/tinymce/tiny_mce.js',// Location of TinyMCE script
// General options
theme : "advanced",
plugins : "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,advlist",
force_p_newlines : false,
force_br_newlines : true,
forced_root_block : false, // Needed for 3.x
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,hr,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect,|,styleprops,forecolor,backcolor,|,link,unlink,image,|,bullist,numlist,removeformat,code,|,preview",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal: false
}
/* more var options below */
所以你有它。以上所有内容适用于所有具有属性tinymce="tinymce_basic"
的textareas的页面。
现在是时候专注于一个页面,看起来很棒,所有的变化都反映在<div id="displayHtml">
内。
我上面的尝试是寻找.mceContentBody
,我认为它会起作用,因为tinymce编辑器似乎将html保存在它的iframe中。 (不起作用)
我对其他人如何解雇他们的小MCE编辑感到困惑,因为我看起来看起来并不相同。这是Tiny MCE的onKeyUp example
我从来没有用tinyMCE.init({....
我是否需要更改我调用每个tinymce编辑器的方式? 凭借我所拥有的,我如何将我的TinyMCE的内容反映到另一个元素中?
以下某些帖子的修改:
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$('textarea[tinymce]').each(function(){
var tinymceopts = $(this).attr('tinymce');
$(this).tinymce(window[tinymceopts]);
});
// This was added
$(".mceContentBody").on('keyup',function(){
tinymce_basic["setup"] = function(ed) {
ed.onKeyUp.add(function(ed, e) {
console.debug('Key up event: ' + e.keyCode); });
}
});
});
</script>
答案 0 :(得分:4)
您需要在配置中执行此操作:
tinyMCE.init({
mode : ...,
...,
setup : function (ed) {
ed.onKeyPress.add(
function (ed, evt) {
alert("Editor-ID: "+ed.id+"\nEvent: "+evt);
//....
}
);
},
...
});