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]-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="utf-8">
<script src=""></script>
#text_input {
width: 500px;
min-height: 300px;
margin: 50px auto;
border: 1px solid #ddd;
padding: 10px;
#editcontainer {
font-size: 14px;
margin-bottom: 20px;
min-height: 100px;
font-family: sans-serif;
#editcontainer:focus {
#editcontainer:empty:before {
#button {
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;
<script type='text/javascript'>
function getSelectedText() {
var selectedText = "";
if(window.getSelection) {
selectedText = window.getSelection().toString();
return selectedText;
//Format button
function formatDoc(Value) {
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');
button.css({top: ( - - button.innerHeight() - 20), left: (current.right - current.width/2 - button.innerWidth()/2), display: 'block'});
// =(r.bottom -'px';//this will place ele below the selection
// =- (r.right-relative.right)+'px';//this will align the right edges together
button.css('display', 'none');
var text = getSelectedText();
if(text != '') {
$('#button').css('display', 'block');
$('#button').css('display', 'none');
<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=""/></button>
<button onclick="formatDoc('justifycenter');" style="text-decoration: underline;"><img src=""/></button>
<button onclick="formatDoc('justifyright');" style="text-decoration: underline;"><img src=""/></button>
<span id="arrow_bottom"></span>

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ụ.