通过浏览器原生上下文菜单粘贴自定义div

Question

我有一个<div>块，我希望用户能够通过浏览器本机上下文菜单粘贴数据。 contenteditable="true"不是一个可接受的解决方案。 Ace editor（http://ace.ajax.org/build/kitchen-sink.html）将<textarea>置于mousedown事件的鼠标光标下。我试图做这样的事情：

<div class="container"> 
<div id="editor"></div> 
<textarea id="paste-container"></textarea> 
</div> 

#container { 
position: relative; 
} 

#editor { 
width: 100px; 
height: 100px; 
} 

#paste-container { 
position: absolute; 
width: 100px; 
height: 100px; 
display: none; 
opacity: 0; 
} 

var editor = document.querySelector('#editor'), 
    paste = document.querySelector('#paste-container'); 

editor.onmousedown = function() { 
paste.style.display = "block"; 
setTimeout(function() { 
    paste.style.display = "none"; 
}, 0); 
} 

但我没有得到textarea的菜单。请告诉我，如何以这种方式获取用户的粘贴数据？

Answer 1

所以我找到了解决方案。您需要为contextmenu事件设置<textarea>的选择。类似这样的：

editor.onmousedown = function() { 
paste.style.display= 'block'; 
}; 

editor.onmouseup = function() { 
setTimeout(function() { 
    paste.style.display = 'none'; 
}, 0); 
}; 

editor.oncontextmenu = function() { 
paste.setSelectionRange(0, 0); 
};