<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>xy的简易编辑器震撼登场,兼容firefox 和 IE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
function init_edit(){
//使iframe进入编辑状态。
var editor = document.getElementById("MsgFrame").contentWindow;
//window.frames["MsgFrame"].document.designMode="On"
editor.document.open();
editor.document.writeln('<html><head>');
editor.document.writeln("</head><body></body></html>");
editor.document.onclick = "alert()";
editor.document.close();
editor.document.designMode = 'On';
editor.document.contentEditable = true;
editor.document.charset="gb2312";
}
function t(s)
{ var editor = document.getElementById("MsgFrame").contentWindow;
editor.document.execCommand(s,false,null);
}
//增高
function t2(){
var obj=window.frames["MsgFrame"].frameElement;
var height = parseInt(obj.offsetHeight);//获取iframe的高度
if (height+100 >= 100){
obj.height = height+100;
}
}
//减低
function t3(){
var obj=window.frames["MsgFrame"].frameElement;
var height = parseInt(obj.offsetHeight);
if (height-100 >= 100){
obj.height = height-100;
}
}
function ViewSource(){
document.getElementById("textarea1").value =
document.getElementById("MsgFrame").contentWindow.document.lastChild.innerHTML;
}
window.onload = init_edit;
</script>
</head>
<body>
<!-- 作为编辑区的iframe -->
<iframe style="width: 100%; height:100" marginwidth="0" marginheight="0"
frameborder="1" name="MsgFrame" id="MsgFrame" src="about:blank"></iframe>
<br />
<!-- 一排控制按钮 -->
<input type="button" onclick="t('UnderLine')" value="下划线" />
<input type="button" onclick="t('bold')" value="粗体" id="Button1" />
<input type="button" onclick="t('JustifyLeft')" value="左对齐" />
<input type="button" onclick="t('JustifyCenter')" value="居中对齐" />
<input type="button" onclick="t('JustifyRight')" value="右对齐" />
<input type="button" onclick="t2()" value="增高" />
<input type="button" onclick="t3()" value="减少" />
<input type="button" onclick="ViewSource()" value="查看源代码" />
<br/>
<!-- 用于查看输出 -->
<textarea name="textarea1" id="textarea1" rows="20" cols="100"></textarea>
</body>
</html>
分类:
17~在线编辑器
, 06~javascript
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）