how to use TinyMCE(rich text editor) in google-maps info window..(i made a demo.)

this is the demo rar file:demo.rar
when i drag the red block to the google-maps ,it will be changed to a marker,
and it will has TinyMCE when you click the info window, but my program is :
it can not be written when i click it the second time,
the first time: alt text the second time(can not be written):
and my code is :
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <meta name="viewport" content="width=device-width,minimum-scale=0.3,maximum-scale=5.0,user-scalable=yes">

    </head>
<body onload="initialize()" onunload="GUnload()">

<style type="text/css">
*{
    margin:0;
    padding:0;
    }
</style>
<!--<div style="width:100px;height:100px;background:blue;"> </div>-->
<div id="map_canvas" style="width: 500px; height: 300px;"></div>


<div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div>
<div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div>


<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript" src="tiny_mce.js"></script>
<script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>

<script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA&amp;sensor=false"type="text/javascript"&gt;&lt;/script&gt;

<script type="text/javascript">
var aFn;
//**********
function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        var center=new GLatLng(39.9493, 116.3975);
        map.setCenter(center, 13);

aFn=function(x,y){
            var point =new GPoint(x,y)
            point = map.fromContainerPixelToLatLng(point);
            //console.log(point.x+"   "+point.y)
            var marker = new GMarker(point,{draggable:true});

            var a=$(
            '<form method="post" action="" style="height:100px;overflow:hidden;width:220px;">'+
                '<textarea id="" class="mce" name="content" cols="22" rows="5" style="border:none">sss</textarea>'+
            '</form>')

            a.click(function(){
                //
            })
            GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(a[0]);
        });
      /******************
      GEvent.addListener(marker, 'click', function() {
               marker.openInfoWindowHtml('<div contentEditable="true" ' +
                                         'style="height: 100px; overflow: auto;">' +
                                         'wwww</div>');
            });
            ***************/
            map.addOverlay(marker);


/**********

        var marker = new GMarker(point, {draggable: true});

        GEvent.addListener(marker, "dragstart", function() {
        map.closeInfoWindow();
        });

        GEvent.addListener(marker, "dragend", function() {
        marker.openInfoWindowHtml("正在反弹...");
        });
        map.addOverlay(marker);
        //*/
    }
$(".b").draggable({
    revert: true,
    revertDuration: 0
    });
$("#map_canvas").droppable({
drop: function(event,ui) {
    //console.log(ui.offset.left+'   '+ui.offset.top)
    aFn(event.pageX-$("#map_canvas").offset().left,event.pageY-$("#map_canvas").offset().top);
    }
});
}
}



//**********
$(".mce").live("click", function(){
  var once=0;
  mce();
});

function mce(once){
    if(once)return;
    tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "safari,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",
        // Theme options
        theme_advanced_buttons1 : "bold,forecolor,|,justifyleft,justifycenter,justifyright,|,fontsizeselect",
        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,
        // Example content CSS (should be your site CSS)
        content_css : "css/example.css",
        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "js/template_list.js",
        external_link_list_url : "js/link_list.js",
        external_image_list_url : "js/image_list.js",
        media_external_list_url : "js/media_list.js",
        // Replace values for the template plugin
        template_replace_values : {
            username : "Some User",
            staffid : "991234"
        }
    }); 
    once=1;
}
//**********

</script>
</body>
</html>
ansaurus

tags:

views:

answers:

how to use TinyMCE(rich text editor) in google-maps info window..(i made a demo.)

related questions
