<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<style type="text/css">
.txt{
}
.judge{
border-bottom: 5px solid red;
cursor: n-resize;
}
</style>
<script type="text/javascript">
function aa(a,b,c){
a=this
if($(a).data("ddTimes")==1){
$(a).data("ddTimes",0)
return ;
}
if( $(a).data("edit")==false){
$(a).data("edit",true)
var val=$(a).html( )
var child=$(a).children();
$(a).html( "")
var editor=$(a).attr("editor")
if(editor=="input"){
$("<input />").val(val).on("blur",function(){
var val=$(this).val();
$(this).remove()
$(a).data("edit",false)
$(a).html(val)
} ).appendTo($(a)).focus()
}else if (editor=="rich") {
$("<textarea id='mytextarea'> </textarea>").html(val).on("blur",function(){
} ).appendTo($(a)).focus()
tinymce.init({
selector: '#mytextarea',
setup:function (editor) {
editor.on('focus',function(){
})
editor.on('blur',function(){
var val=tinymce.get('mytextarea').getContent();
$(a).empty();
$(a).html( val)
$(a).data("edit",false)
})
}
});
}
}
// $("#zhangsan").html('');
}
function load(){
$("[editor]").data("edit",false)
$("[editor]").each(function(i,item){
$(item).on("click", aa)
} )
$("[dd]").each(function(i,item){
var allowDd=false;//是否可以拖动
var dragSrcY=0;
var dragtargetY=0;
$(item).data("ddTimes",0) //判断当拖拽次数为2时
$(item).on("mousedown",function(e){
if (allowDd) {
dragSrcY= e.pageY;
//$(item).css('overflow','hidden');
$(item).data("ddTimes",1)
}
e.stopPropagation();
return false;
}
)
$(item).on("mousemove",function(e){
//得到div 底部 线 的位置
var bottomHeight= $(item).offset().top+ $(item).height();
console.log("bottomHeight"+bottomHeight)
console.log("e.pageY"+e.pageY)
if ( e.pageY > ( bottomHeight-10) && e.pageY < (bottomHeight+10 )) {
$(item).attr("class", "txt judge" )
allowDd=true
dragtargetY=e.pageY;
if (dragSrcY>0) {
$(item).height( $(item).height()+(dragtargetY-dragSrcY ) )
}
}else{
$(item).attr("class", "txt" )
allowDd=false
}
}
)
$(item).on("mouseout",function(e){
//清理鼠标拖动的垃圾数据
dragSrcY=0;
dragtargetY=0;
$(item).attr("class", "txt" )
$(item).data("ddTimes",0)
allowDd=false
}
)
$(item).on("mouseup",function(e){
if (dragSrcY>0) {
$(item).height( $(item).height()+(dragtargetY-dragSrcY ) )
}
dragSrcY=0;
dragtargetY=0;
//清理鼠标拖动的垃圾数据
$(item).attr("class", "txt" )
}
)
})
/* tinymce.init({
selector: '#mytextarea'
}); */
}
</script>
</head>
<body οnlοad="load()">
<table>
<tr>
<td>張三</td>
<td editor="input">李四</td>
</tr>
<tr>
<td>張三</td>
<td editor="input">李四</td>
</tr>
<tr>
<td>張三</td>
<td editor="input">李 </td>
</tr>
<tr>
<td>工商</td>
<td >
<div>
<div editor="rich" dd class="txt">
Hello, World!
</div>
</div>
</td>
</tr>
</table>
<button>ss</button>
</body>
</html>