求一个简单的textarea编辑器

只要能简单渲染文本域，例如字体，换行、颜色等就好了，不要太复杂的。... 只要能简单渲染文本域，例如字体，换行、颜色等就好了，不要太复杂的。 展开
 我来答
3个回答
#热议# 生活中有哪些实用的心理学知识？
芯杰夜小熙
2012-10-02
知道答主
回答量：20
采纳率：0%
帮助的人：3.1万
我也去答题访问个人页
展开全部
kindeditor
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
百度网友46b53cf
2012-09-30
知道答主
回答量：14
采纳率：0%
帮助的人：8.4万
我也去答题访问个人页
展开全部
notepad++
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
百度网友46760c320e
2017-10-18 · TA获得超过1272个赞
知道小有建树答主
回答量：1569
采纳率：33%
帮助的人：208万
我也去答题访问个人页
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>万维导航</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator[生产者]" content="动态 Web编辑器.exe">
<meta name="Author[代码创作者]" content="wwwip.net">
<meta name="Keywords[关键字]" content="万维导航,绿芽黑洞">
<meta name="Description[描述与说明]" content="">
<meta http-equiv="Expires[网页过期时间]" content="Wed, 26 Feb 2100 08:21:57 GMT">
<link href="images/2.ico" mce_href="favicon.ico" rel="bookmark" type="image/x-icon" >
<link href="images/2.ico" mce_href="favicon.ico" rel="icon" type="image/x-icon" >
<link href="images/2.ico" mce_href="favicon.ico" rel="shortcut icon" type="image/x-icon" >
<style type="text/css">
body{
font-size: 14px;
color: #333333;
}
p{
text-indent:30px;
text-shadow:5px 5px 10px #00FF00;
}
li{list-style-type:circle;}

#txt_ln{
color: #fff;
z-index:1;
overflow:visible;
width:100%;
height:99%;
filter:alpha(opacity=50);
position:absolute;
top:0px;
left:0px;
overflow-y:hidden;
border:0px;
padding-left:3px;
box-shadow:50px 50px 50px 5px black;
background-color:#ff8800;
}
#txt_main{
z-index:2;
width:100%;
height:99%;
filter:alpha(opacity=90);
word-wrap:break-word;
margin-left:43px;
border-left:1px;
position:absolute;
top:0px;
left:4px;
BORDER-LEFT: #CCC 2px solid;
BORDER-TOP: #CCC 1px solid;
BORDER-RIGHT: #CCC 1px solid;
BORDER-BOTTOM: #CCC 0px solid;
box-shadow:50px 50px 50px 5px black;
word-break:break-all;
background-color:#fff;
display:inline;

}
#logo{
z-index:3;
filter:alpha(opacity=50);
position:absolute;
bottom:12px;
right:4px;

}
#liveclock{
z-index:3;
filter:alpha(opacity=50);
position:absolute;
bottom:25px;
right:55px;
color:#ff0000;
font-family:arial,verdanna,sans-serif,"宋体","黑体";
}
</style>

</head>
<!-- ================================================================== -->
<body onload=showclock()><span id="logo"onclick='show_s()'><br><a href="http://www.wwwip.net"
target="_blank"onclick="CSS('format');">http://www.wwwip.net</a></span>
<textarea id='txt_ln' name='content' readonly></textarea>
<textarea contenteditable='true' id='txt_main' name='content' onclick='show_s()'onkeydown='editTab()'onscroll='show_ln()' draggable="false"wrap="virtual">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<META NAME="Generator[生产者]" CONTENT="动态 Web编辑器.exe">
<META NAME="Author[代码创作者]" CONTENT="">
<META NAME="Keywords[关键字]" CONTENT="">
<META NAME="Description[描述与说明]" CONTENT="">
<META HTTP-EQUIV="Expires[网页过期时间]" CONTENT="Wed, 26 Feb 2100 08:21:57 GMT">
<LINK HREF="images/2.ico" mce_HREF="favicon.ico" rel="bookmark" TYPE="image/x-icon" >
<LINK HREF="images/2.ico" mce_HREF="favicon.ico" rel="icon" TYPE="image/x-icon" >
<LINK HREF="images/2.ico" mce_HREF="favicon.ico" rel="shortcut icon" TYPE="image/x-icon" >
<script type="text/javascript" src="jq/tool.js"></script>
<script type="text/javascript" src="jq/base.js"></script>
<script type="text/javascript" src="jq/base_drag.js"></script>
<script type="text/javascript" src="jq/jq.js"></script>
<script type="text/javascript" src="jq2/index.js"></script>
<link rel="stylesheet" type="text/css" href="styles/index.css" />

<STYLE TYPE="text/css">
body{
font-family: 'Whitney SSm A','Whitney SSm B',"Whitney SSm A","Whitney SSm B",Arial,Helvetica,sans-serif;
font-size:22px;
color: #000000;
background-color:#FEFEFF;
background-image:url("images/bg4.png")
}
li{list-style-type:circle;}
div,p{
height:40px;
text-indent:30px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
padding-top:10px;
margin-top:5px;
margin-bottom:5px;
LINE-HEIGHT:30px;
font-family:"Times New Roman",serif;
text-shadow:5px 5px 10px #00FF00;
}
span{
color:#000000;
//background-color:#FEFEFF;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
margin-bottom:5px;
LINE-HEIGHT:30px;
font-family:"Times New Roman",serif;

}

</STYLE>
<SCRIPT TYPE="text/javascript">
<!--//您的浏览器不支持javascript或者您未开启javascript
//脚本内容

-->
</SCRIPT>
<noscript> 您没有开启javascript功能</noscript>
</HEAD>

<!-- ================================================================== -->
<BODY contenteditable='true'>
<p>123</p>
<DIV ID='box'ONCLICK="ss()">box_text</DIV>

<SCRIPT TYPE="text/javascript">
<!--//您的浏览器不支持javascript或者您未开启javascript
//脚本内容
var box=document.getElementById("box");
box.style.backgroundColor="#65C61E";
box.style.color="#ffffff";
function ss(){window.close()}
$("p").text("Hello world!").css({color:"#ffffff", background: "#099FFF" });

-->
</SCRIPT>

</BODY>
</HTML>
</textarea>
<script type="text/javascript">
<!--//您的浏览器不支持javascript或者您未开启javascript
//脚本内容
var box2=document.getElementById("txt_main");
box2.ondblclick=function(){

window.defaultStatus=("alert???")

}
-->
</script>
<noscript> 您没有开启javascript功能</noscript>

<script>for(var i=1; i<=299; i++) document.getElementById('txt_ln').value += i + '\n';</script>

<script type="text/javascript">
<!--//您的浏览器不支持javascript或者您未开启javascript
//脚本内容
var txt_ln = document.getElementById('txt_ln');
var txt_main = document.getElementById('txt_main');

function show_ln(){
//txt_ln.scrollTop = txt_main.scrollTop;
with(txt_ln.scrollTop != txt_main.scrollTop){
// while(txt_ln.scrollTop != txt_main.scrollTop) {
txt_ln.scrollTop = txt_main.scrollTop;
//txt_ln.value += (i++) + '\n';
//document.getElementById('txt_ln').value += i + '\n';
// }
}
return false;
};
function show_s(){
//txt_ln.scrollTop = txt_main.scrollTop;
with(txt_ln.scrollTop != txt_main.scrollTop){
// while(txt_ln.scrollTop != txt_main.scrollTop) {
txt_ln.scrollTop = txt_main.scrollTop;
txt_ln.value += (i++) + '\n';
//document.getElementById('txt_ln').value += i + '\n';
// }
}
return false;
};

function editTab(){
show_s()
//为什么把这个函数里的内容,把函数取掉,用里面的语句反而会使取值出错呢,这是为什么.

var code, sel, tmp, r
var tabs=''
event.returnValue = false
sel =event.srcElement.document.selection.createRange()
r = event.srcElement.createTextRange()

switch (event.keyCode){
case (8) :
if (!(sel.getClientRects().length > 1)){
event.returnValue = true
return
}
code = sel.text
tmp = sel.duplicate()
tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top)
sel.setEndPoint('startToStart', tmp)
sel.text = sel.text.replace(/^\t/gm, '')
code = code.replace(/^\t/gm, '').replace(/\r\n/g, '\r')
r.findText(code)
r.select()
break
case (9) :
if (sel.getClientRects().length > 1){
code = sel.text
tmp = sel.duplicate()
tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top)
sel.setEndPoint('startToStart', tmp)
sel.text = '\t'+sel.text.replace(/\r\n/g, '\r\t')
code = code.replace(/\r\n/g, '\r\t')
r.findText(code)
r.select()
}else{
sel.text = '\t'
sel.select()
}
break
case (13) :
tmp = sel.duplicate()
tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top)
tmp.setEndPoint('endToEnd', sel)

for (var i=0; tmp.text.match(/^[\t]+/g) && i<tmp.text.match(/^[\t]+/g)[0].length; i++) tabs += '\t'
sel.text = '\r\n'+tabs
sel.select()
break
default :
event.returnValue = true
break
}

}

function showclock() {if(!document.layers&&!document.all)
return
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="AM"
if(hours>12){dn="PM"
hours=hours-12
}if(hours==0)
hours=12
if(minutes<=9)
minutes="0"+minutes
if(seconds<=9)
seconds="0"+seconds
<!-- [Step2]:这里可以改变时钟的大小 -->
myclock="<font size='2'>"+hours+":"+minutes+":"
+seconds+" "+dn+"</font>"
if(document.layers){document.layers.liveclock.document.write(myclock)
document.layers.liveclock.document.close()
}else if(document.all)
liveclock.innerHTML=myclock
setTimeout("showclock()",1000)
}

var lCSSCoder={
format : function(s){//格式化代码
s=s.replace(/\s*([\{\}\:\;\,])\s*/g,"$1");
s=s.replace(/;\s*;/g,";");//清除连续分号
s=s.replace(/\,[\s\.\#\d]*{/g,"{");
s=s.replace(/([^\s])\{([^\s])/g,"$1 {\n\t$2");
s=s.replace(/([^\s])}([^\s]*)/g,"$1}\n$2");
s=s.replace(/([^\s]);([^\s\}])/g,"$1;\n\t$2");
return s;
},
pack :function(s){//压缩代码
s=s.replace(/\/\*(.|\n)*?\*\//g,"");//删除注释
s=s.replace(/\s*([\{\}\:\;\,])\s*/g,"$1");
s=s.replace(/\,[\s\.\#\d]*\{/g,"{");//容错处理
s=s.replace(/;\s*;/g,";");//清除连续分号
s = s.match(/^\s*(\S+(\s+\S+)*)\s*$/);//去掉首尾空白
return (s == null)?"": s[1];
}
};

function CSS(s){
document.getElementById("txt_main").value=lCSSCoder[s](document.getElementById("txt_main").value);
}

-->
</script>
<span id="liveclock"onclick="CSS('format');"></span>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
收起 1条折叠回答
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

下载百度知道APP，抢鲜体验
使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2025Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式