javascript動態textarea和nicedit

在這裏幾個人的大力幫助下，我設法創建了一個可動態調整大小/可拖動textareas的頁面。我現在正試圖將nicedit整合到這些textareas中。它的工作到一定程度。雙擊textarea會變成niceit區域，但不幸的是可拖動的事件甚至會覆蓋nicedit，所以無法編輯textarea。javascript動態textarea和nicedit

我的JavaScript是有限的，所以我希望有人能指出我的方式

提前感謝錯誤。

這裏是的jsfiddle鏈接http://jsfiddle.net/JVhpJ/9/

繼承人的代碼

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset = "utf-8">  
    <script src = "http://js.nicedit.com/nicEdit-latest.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 
    <script> 
     window.onload = function() { 
      var body = document.body; 
      // The magic 
      body.addEventListener ("dblclick", function (event) { 
       var target = event.target; 

       if (target.nodeName === "TEXTAREA") { 
        var area = new nicEditor ({fullPanel : true}).panelInstance (target); 

        area.addEvent ("blur", function() { 
         this.removeInstance (target); 
        }); 
       } 
      }, false); 
     } 
    var i=0;  
    var p=25; 
    function creatediv1(id) 
    { 
     id=id+i; 
     var xp=xp+i; 
     var newdiv = document.createElement('div'); 
     newdiv.setAttribute('id', id); 
     newdiv.setAttribute('class', 'dragbox'); 
     newdiv.setAttribute('iterate',i); 
     newdiv.style.position = "relative"; 
     newdiv.style.top = p; 
     newdiv.style.left = p; 
     newdiv.style.cursor='move'; 
     newdiv.innerHTML = "<div id='handle'>Drag me into position</div></div><br><textarea id="+i +" name='textarea["+i +"]' class='textarea1' width='300' style='position:absolute; top:0px;left:0px;overflow-y: auto;background-color:transparent;border: 2px dashed #000; '>some text here</textarea>"; 
     newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='300' name='width["+i+"]' id='width"+i+"'><br><input type='hidden' value='300' name='height["+i+"]' id='height"+i+"'>";    
     newdiv.innerHTML=newdiv.innerHTML+"<br><input type='hidden' value='0' name='left["+i+"]' id='left"+i+"'><br><input type='hidden' value='0' name='top["+i+"]' id='top"+i+"'>";   

     document.getElementById("frmMain").appendChild(newdiv); 
     $(function() 
     { 

      $("#"+i).resizable(
      { 
       stop: function(event, ui) 
       { 
        var width = ui.size.width; 
        var height = ui.size.height; 
        // alert("width="+width+"height="+height); 
        ValProportions(width,height,ui.element.context.id);   
       } 
      }); 

      $("#"+id).draggable(
      { 
       stop: function(event, ui) 
       { 
        Stoppos = $(this).position(); 
        $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top); 
         // alert("left="+Stoppos.left+"top="+Stoppos.top); 
        ValPostion(Stoppos.left,Stoppos.top,$(this).attr('iterate')); 
       } 
      }); 
      $("#"+i).draggable({handle:"#handle"}); 
     }); 

     function ValProportions(defaultwidth, defaultheight,id) { 
      $('#width'+id).val(defaultwidth); 
      $('#height'+id).val(defaultheight); 
      } 
     function ValPostion(defaultleft,defaulttop,id) { 
      $('#left'+id).val(defaultleft); 
      $('#top'+id).val(defaulttop); 
      } 
     i++; 
     p=p+25; 

    } 
    </script> 
    <style> 
     textarea { 
      height: 100px; 
      margin-bottom: 20px; 
      width: 1000px; 
     } 
    </style> 
</head> 

<body> 
    <form id="frmMain" name="frmMain" enctype="multipart/form-data" action="test.php" method="post"> 
    <input id="btn1" type="button" value="Add New textbox" onclick="creatediv1('draggable');" />    
    <input type="submit" value="Submit" > 
    </form> 
</body>

來源

2013-03-11 Barry Watts

試着把它放在一個[fiddle]（http://jsfiddle.net）上，這樣人們就可以幫助你你快一點。 – Shouvik 2013-03-11 09:07:44

確定添加jsfiddle鏈接到上面的文本謝謝你，我不知道jsfiddle – 2013-03-11 09:29:53

我設法解決通過在div的mousedown事件使用stoppropagation（）這個問題，這讓我然後編輯沒有可拖動覆蓋編輯功能的文本

來源

2013-06-04 08:16:38

javascript動態textarea和nicedit

回答

相關問題