TinyMCE - 添加事件監聽器問題

我一直在理解如何爲我的tinymce編輯器設置事件處理程序。這篇文章可能會變長，所以我很抱歉。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中。（不起作用）

我很困惑別人是如何激發他們的微型MCE編輯器，因爲我的看起來看起來不一樣。這裏是微小的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>

來源

2013-03-24 coffeemonitor

你需要做的配置：

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

來源

2013-03-24 13:51:39 Athlan

這是偉大的，但我不知道在哪裏我把那裏面是什麼我已經。 – coffeemonitor 2013-03-24 14:07:03

試着在'var tinymce_basic'對象中添加'setup'回調函數。 – Athlan 2013-03-24 14:12:43

這是我的問題，我正在使用'tinymce_basic'的單個頁面上工作，而且還有很多其他頁面。我可以在不更改'tinymce_configs.js'文件的情況下擴展它嗎？ – coffeemonitor 2013-03-24 14:17:55

TinyMCE - 添加事件監聽器問題

回答

相關問題