Custom Editor With jQuery Basic – Tự làm trình soạn thảo

Tự chế trình soạn thảo theo ý mình

Custom Editor With jQuery Basic - Tự làm trình soạn thảo


<!DOCTYPE html>
<html lang="en-US">
<!--[if lt IE 7]> <html class="ie ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="ie ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="ie ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]> <html class="ie ie9 newest" lang="en"> <![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
#text_input {
width: 500px;
min-height: 300px;
margin: 50px auto;
border: 1px solid #ddd;
padding: 10px;
}
#editcontainer {
font-size: 14px;
margin-bottom: 20px;
cursor:text;
min-height: 100px;
font-family: sans-serif;
}
#editcontainer:focus {
outline:0
}
#editcontainer:empty:before {
content:attr(data-placeholder);
color:gray
}
#button {
display:none;
position:absolute;
padding: 10px;
background: #000;
box-shadow: 0 4px 5px rgba(0,0,0,0.3);
border-radius: 5px;
}
#button button {
background: transparent;
color: #fff;
border: none;
cursor: pointer;
}
#arrow_bottom {
width: 0;
height: 0;
position: absolute;
bottom: -5px;
left: 85px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #000;
}
</style>
<script type='text/javascript'>
function getSelectedText() {
var selectedText = "";
if(window.getSelection) {
selectedText = window.getSelection().toString();
}
return selectedText;
};
//Format button
function formatDoc(Value) {
document.execCommand(Value);
}
$(document).on("mouseup","#editcontainer",function(){
var text = getSelectedText();
var current = window.getSelection().getRangeAt(0).getBoundingClientRect();
var relative = document.body.parentNode.getBoundingClientRect();
var button = $('#button');
//var sel = window.getSelection();
if(text != '') {
//button.css('display', 'block');
//alert(sel.getRangeAt(0));
button.css({top: (current.top - relative.top - button.innerHeight() - 20), left: (current.right - current.width/2 - button.innerWidth()/2), display: 'block'});
//
//ele.style.top() =(r.bottom - relative.top)+'px';//this will place ele below the selection
//ele.style.right =- (r.right-relative.right)+'px';//this will align the right edges together
}else{
button.css('display', 'none');
}
});
$(document).on("keyup","#editcontainer",function(){
var text = getSelectedText();
if(text != '') {
$('#button').css('display', 'block');
}else{
$('#button').css('display', 'none');
}
});
</script>
</head>
<body>
<div id="text_input">
<!--div id="editcontainer" contenteditable="true" data-text="Input your ideas..." width="500" height="400"></div-->
<div id="editcontainer" contenteditable="true" data-placeholder="Bạn có ý tưởng gì?..."></div>
<div id="button">
<button onclick="formatDoc('bold');" style="font-weight:bold">B</button>
<button onclick="formatDoc('italic');" style="font-style: italic;">I</button>
<button onclick="formatDoc('underline');" style="text-decoration: underline;">U</button>
<button onclick="formatDoc('justifyleft');" style="text-decoration: underline;"><img src="http://i.imgur.com/UMSvHAn.png"/></button>
<button onclick="formatDoc('justifycenter');" style="text-decoration: underline;"><img src="http://i.imgur.com/YjryS9v.png"/></button>
<button onclick="formatDoc('justifyright');" style="text-decoration: underline;"><img src="http://i.imgur.com/7iL1StO.png"/></button>
<span id="arrow_bottom"></span>
</div>
</div>
</body>
</html>

Thêm bình luận
0 Trả lời

Trả lời của bạn

Bằng cách gửi bài trả lời của bạn, bạn đồng ý với Chính sách bảo mậtđiều khoản dịch vụ.