今天在“简书”上看到发文章的文本编辑器,觉得很神奇,很梦幻,于是想在网页上实现一下。先上一张自己实现的网页编辑器的效果:
原理:多个input文本域叠加使用
每次点击按钮的时候,都会在一行添加一个input type=text,样式值为点击相应按钮的值【也给键盘enter绑定一个值】。废话不多说,直接上代码:
<!DOCTYPE html>
<html>
<head>
<title>仿简书</title>
<meta charset='utf-8'>
<script src="jquery-1.11.1.min.js"></script>
<style >
ul{
text-align: center;
}
ul li{
display: inline;
}
input[type=text]{
border:0px;
width: 100%;
font-size: 20px;
}
input[mazhe=quote]{
background-color: rgb(192,192,192);
}
div[mazhe=quote]{
border-style: none none none solid;
background-color: rgb(192,192,192);
font-size: 2.5em;
}
</style>
</head>
<body>
<ul>
<li><button id='black'>黑体</button></li>
<li><button id='italic'>斜体</button></li>
<li><button id='quote'>引用</button></li>
<li><button id='line-through'>划掉</button></li>
</ul>
<div id='content'>
<input type='text' id="msg">
</div>
<script >
window.onload = function(){
$('#msg').focus();
}
var number = 0;
//回车
$('#br').click(function(){
string = '<br/>';
$('#content').append(string);
});
//斜体
$('#italic').click(function(){
var str = '<input style="font-style:italic" type="text" id = "num_'+number+'">';
$('#content').append(str);
$('#num_'+number).focus();
number ++;
});
//黑体
$('#black').click(function(){
var str = '<input style="font-weight:bold" type="text" id = "num_'+number+'">';
$('#content').append(str);
$('#num_'+number).focus();
number ++;
});
//引用
$('#quote').click(function(){
var str = '<div mazhe="quote"><input mazhe="quote"type="text" id = "num_'+number+'"></div>';
$('#content').append(str);
$('#num_'+number).focus();
number ++;
});
//划掉
$('#line-through').click(function(){
var str = '<input style="text-decoration:line-through" type="text" id = "num_'+number+'">';
$('#content').append(str);
$('#num_'+number).focus();
number ++;
});
//键盘enter键
document.onkeydown = function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode ==13){
var str = '<input type="text" id = "num_'+number+'">';
$('#content').append(str);
$('#num_'+number).focus();
number ++;
}
};
</script>
</body>
</html>
除了向这样很low的方法应该还有其他的方式,但是除了input我不知道html5还提供了什么可用的api,希望大家不吝赐教