2

tinymceエディターのイベント ハンドラーをセットアップする方法を理解することに行き詰まっています。この投稿は長くなる可能性があります。申し訳ありません。

私はこの投稿を読んでいます。これはまさに私がやりたいことです:

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 */

それで、あなたはそれを持っています。上記のすべては、属性を持つ textareas を持つすべてのページでうまく機能します: tinymce="tinymce_basic"。ここで、tinymce のすべての変更が .xml 内に反映された見栄えの良い 1 つのページに焦点を当てます<div id="displayHtml">。

上記の私の試みは、を探してい.mceContentBodyますが、tinymce エディターはそのクラスの iframe 内に html を保持しているように見えるため、これはうまくいくと思います。(動作しません)

他の人が Tiny MCE エディタをどのように起動しているのか、私は混乱しています。Tiny MCE のonKeyUp の例を次に示します。
私は何も始めたことがない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>
4

1 に答える 1

4

構成でそれを行う必要があります：

tinyMCE.init({
    mode : ...,
    ...,
    setup : function (ed) {
        ed.onKeyPress.add(
            function (ed, evt) {
                alert("Editor-ID: "+ed.id+"\nEvent: "+evt);
                //....
            }
        );
    },
    ...
});
于 2013-03-24T13:51:39.627 に答える