15

私は今までエディターをすべて正常に動作させようとしていますが、div で行われた変更または div で編集されたコンテンツを検出できるハンドラーを作成する必要があります。

<?php $row="testing content" ?>
<!-- my editor section-->
<div id="editor">
    <div id="options">
        <span><a id="iimg">Insert Image from gallery</a></span>
        <span>Upload image to gallery</span>
        <span><a id="iheading">Heading</a></span>
    </div>
    <div id="product_descriptioncontent" contenteditable="true"><?php echo $row; ?>
    </div><!-- viewable editor -->
    <input type="hidden" name="textareacontent" value="" id="textareacontent" >
    <!-- hidden field to submit values -->
</div>
<!-- end of editor section -->
<div id="imc"></div> <!-- image gallery loading section -->

<script>
$(document).ready(function(){

    $('#iheading').click(function(){
    $('#product_descriptioncontent').append('<h1>Heading</h1>');
    });

    $('#iimg').click(function(){
        $('#imc').load('imagegallery.php',function(){
        $('#gallery img').on('click',function(){
            $('#product_descriptioncontent').append('<img  src="http://localhost/sites/site_pics/otherpic/1.png"><br>&nbsp;');
    });
    });
    });
    $('#product_descriptioncontent').change(function(){
    alert("pppp");// how to capture this event
    });
});
</script>

コードの一部を jsfiddle http://jsfiddle.net/bipin000/UJvxM/1/に配置し ました。貴重な時間をありがとう

4

3 に答える 3

6

DOMCharacterDataModifiedのハンドラを追加してみてください。よりクリーンなソリューションになる可能性があります。

于 2012-04-26T07:34:48.997 に答える
4

あなたはこれを好きですか？http://jsfiddle.net/Ralt/hyPQC/

document.getElementById( 't' ).onkeypress = function( e ) {
    var evt = e || window.event
    alert( String.fromCharCode( evt.which ) )
}​

changeイベントを待っているわけではありません。意味がありません。

onkeypress代わりに、イベントをリッスンしています。ユーザーがこの div のコンテンツを (文字を追加して) 変更するたびに、イベントがトリガーされます。

文字をクリックする方法も確認できます ( を使用String.fromCharCode( evt.which ))。

PS: 特定のケースの完全な jQuery ソリューションは次のようになります。

$( '#product_descriptioncontent' ).on( 'keypress', function() {
    $( '#your-hidden-input' ).val( $( this ).text() )
    // Or
    $( '#your-hidden-div' ).text( $( this ).text() )
} )
于 2012-04-26T07:20:24.253 に答える
1

カスタム イベントを div にバインドし、変更時にそのイベントをトリガーできます

Stack Snippets とjsFiddleのデモ:

$(function() {

  $('#wrapper').bind("contentchange", function() {
    console.log("Captured content change event"); 
  });

  $("#btn").click(function() {
    $('#wrapper').html("new value").trigger("contentchange");
  });
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="wrapper"></div>
<input type="button" id="btn" value="click here">

于 2012-04-26T06:41:12.563 に答える