TinyMCE - 添加事件监听器问题答案

【问题标题】：TinyMCE - Adding Event Listeners IssueTinyMCE - 添加事件监听器问题
【发布时间】：2013-03-24 13:49:52
【问题描述】：

我一直坚持理解如何为我的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>

您会在我的textarea 中看到tinymce="tinymce_basic"。我以这种方式全球化调用 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 */

所以你有它。以上所有内容都适用于我所有具有以下属性的 textareas 页面：tinymce="tinymce_basic"。现在是时候专注于单个页面，该页面看起来很棒，tinymce 中的所有更改都反映在 <div id="displayHtml"> 中。

我在上面的尝试是寻找.mceContentBody，我认为它会起作用，因为tinymce 编辑器似乎将html 保存在它的iframe 中与该类。（不工作）

我对其他人如何启动他们的 Tiny 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>

【问题讨论】：

标签： jquery tinymce onkeyup

【解决方案1】：

您需要在配置中进行：

tinyMCE.init({
    mode : ...,
    ...,
    setup : function (ed) {
        ed.onKeyPress.add(
            function (ed, evt) {
                alert("Editor-ID: "+ed.id+"\nEvent: "+evt);
                //....
            }
        );
    },
    ...
});

【讨论】：

太好了，但我不知道我把它放在我已经拥有的东西的什么地方了。
尝试将setup 回调函数添加到您的var tinymce_basic 对象中。
这是我的问题，我正在处理使用tinymce_basic 的单个页面，并且许多其他页面也是如此。我可以在不更改tinymce_configs.js 文件的情况下扩展它吗？
只需添加：tinymce_basic["setup"] = function(ed) { ... };应该这样做。
实现它，随心所欲。我刚刚解决了你的配置问题。