jsHTML编辑器示例

最新推荐文章于 2025-12-27 11:46:02 发布

原创最新推荐文章于 2025-12-27 11:46:02 发布 · 391 阅读

CC 4.0 BY-SA版权

文章标签：

#function #button #input #html #iframe #javascript

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
function getIframeData(){
$('test').value=HtmlEdit.document.body.innerHTML;
}
function sentIframeData(){
HtmlEdit.document.body.innerHTML=$('test').value;
}
function doB(){
HtmlEdit.focus();
var sel = HtmlEdit.document.selection.createRange();
insertHTML("<b>"+sel.text+"</b>");
}
function insertHTML(html) {
if (HtmlEdit.document.selection.type.toLowerCase() != "none"){
  HtmlEdit.document.selection.clear() ;
}
HtmlEdit.document.selection.createRange().pasteHTML(html) ;
}
function document.onreadystatechange()
{
HtmlEdit.document.designMode="On";
}
function addTable()
{
     HtmlEdit.focus();
     var sel = HtmlEdit.document.selection.createRange();
     insertHTML("<table width='100%' border='1' cellspacing='0' cellpadding='0'><tr><td>表格文字</td>  </tr></table>");
}
function formatLeft()
{
     HtmlEdit.focus();
     var sel = HtmlEdit.document.selection.createRange();
     insertHTML("<span style='text-align:left;'>"+sel.text+"</span>");
}
function formatRight()
{
     HtmlEdit.focus();
     var sel = HtmlEdit.document.selection.createRange();
     insertHTML("<span style='text-align:right;'>"+sel.text+"</span>");
}
function $()
{
    var obj=document.getElementById(arguments[0]);
    return obj;
}
</script>
<style type="text/css">
body{ margin:0 0 0 0 ;}
input{ width:150px;}
</style>
</head>

<body>
<form action="test.asp?act=add" method="post" name="form1">

<IFRAME id="HtmlEdit" style="WIDTH: 100%; HEIGHT: 296px" marginWidth=0 marginHeight=0>
</IFRAME>
<textarea name="test" rows="10" id="test" style="width:100%;"></textarea>
<br>
<input type="submit" name="Submit" value="提交">
<input type="button" value="iframe->textarea" onClick="getIframeData()">
<input type="button" value="textarea->iframe" onClick="sentIframeData()">
<input type="button" value="B" onClick="doB()">
<input type="button" value="左对齐" onClick="formatLeft();">
<input type="button" value="右对齐" onClick=" formatRight();">
<input type="button" style="width:50px;" onClick="addTable();" value="插入表格">
</form>
</body>
</html>