文件一:blank.html
<html>
<body topmargin="10" leftmargin="10" bgColor="#f6f6f6">
<div id="RTC" contenteditable = true>
</div>
</body>
</html>
文件二:editor.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
var contentHTML;
function exeCommand(command, value)
{
document.execCommand(command, false, value);
}
// 加粗
function Black()
{
var obj = frames['ifRTC'].RTC;
obj.focus();
exeCommand('Bold', '');
}
// 斜体
function Italic()
{
var obj = frames['ifRTC'].RTC;
obj.focus();
exeCommand('Italic', '');
}
// 下划线
function UnderLine()
{
var obj = frames['ifRTC'].RTC;
obj.focus();
exeCommand('Underline', '');
}
// 向里缩进
function Indent()
{
var obj = frames['ifRTC'].RTC;
obj.focus();
exeCommand('Indent', '');
}
// 向外缩进
function Outdent()
{
var obj = frames['ifRTC'].RTC;
obj.focus();
exeCommand('Outdent', '');
}
// 无序列表
function UnorderList()
{
var obj = frames['ifRTC'].RTC;
obj.focus();
exeCommand('InsertUnorderedList', '');
}
// 有序列表
function OrderList()
{
var obj = frames['ifRTC'].RTC;
obj.focus();
exeCommand('InsertOrderedList', '');
}
// 插入图片
function Image()
{
var obj = frames['ifRTC'].RTC;
obj.focus();
ImagePath = window.prompt('请输入图片路径:', '');
exeCommand('InsertImage', ImagePath);
}
// 预览效果
function Preview()
{
var htmlContent = frames['ifRTC'].RTC.innerHTML;
var open = window.open('');
open.document.write(htmlContent);
}
// 查看编辑框里的HTML源代码
function Source()
{
var htmlContent = frames['ifRTC'].RTC.innerHTML;
if (document.all.iframeDiv.style.display == 'block')
{
document.all.iframeDiv.style.display = 'none';
document.all.htmlText.value = htmlContent;
document.all.textDiv.style.display = 'block';
document.all.htmlText.focus();
document.all.Source.value='HTML';
}
else
{
document.all.iframeDiv.style.display = 'block';
document.all.textDiv.style.display = 'none';
frames['ifRTC'].RTC.innerHTML = document.all.htmlText.value;
frames['ifRTC'].RTC.focus();
document.all.Source.value=' 源代码 ';
}
}
// 增加编辑框的高度
function Add()
{
document.all.ifRTC.height = document.all.ifRTC.height*1 + 50;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE width="400"border="0">
<TR>
<TD><input type="button" value="B" name="Black" onclick="Black()" /></TD>
<TD><input type="button" value="I" name="Italic" onclick="Italic()" /></TD>
<TD><input type="button" value="U" name="UnderLine" onclick="UnderLine()" /></TD>
<TD><input type="button" value="UL" name="UnorderList" onclick="UnorderList()" /></TD>
<TD><input type="button" value="OL" name="OrderList" onclick="OrderList()" /></TD>
<TD><input type="button" value="左" name="Outdent" onclick="Outdent()" /></TD>
<TD><input type="button" value="右" name="Indent" onclick="Indent()" /></TD>
<TD><input type="button" value="图" name="Image" onclick="Image()" /></TD>
</TR>
</TABLE>
<div id="iframeDiv" style="display:block">
<iframe id="ifRTC" width="400" height="200" border="1" src="blank.html" ></iframe>
</div>
<div id="textDiv" style="display:none">
<textarea id="htmlText" cols="50" rows="10"></textarea>
</div>
<br>
<input type="button" value=" + " name="Add" onclick="Add()" />
<input type="button" value=" 预 览 " name="Preview" onclick="Preview()" />
<input type="button" value=" 源代码 " name="Source" onclick="Source()" />
</BODY>
</HTML>
分享到:
相关推荐
简单富文本框,非常精简,非常简单的使用方法,可以直接导入使用!
简单富文本框,设置一次,只要在同样的class下都会自动生成富文本框
editor 富文本框插件
经过测试 可以使用的富文本框插件 需要初始化 代码较多 建议将div 加hidden 样式
在MVC项目中,可以实现富文本框(编辑器),功能齐全,可以改变字体大小,图片。。且使界面漂亮美观大方!
富文本框的用法详细. 富文本框的用法详细.
文本编辑器 富文本框 功能比较简单,但是麻雀虽小五脏俱全,纯JQ脚本实现,兼容性比较好!
非常好用的富文本框编辑器,大家顶起 非常好用的富文本框编辑器,大家顶起 非常好用的富文本框编辑器,大家顶起
ASP.NET第三方控件(富文本框) ASP.NET第三方控件(富文本框) ASP.NET第三方控件(富文本框)
kindeditor富文本框编辑器 script type="text/javascript"> var validator = null; $(function(){ KE.show({ id : 'content', imageUploadJson : 'upload_json.jsp', fileManagerJson...
我在网上找了很久都没找到一个漂亮点的富文本框,现在找到了,很开心,很漂亮,很实用哦,分享给大家下载
强大开源 Winform富文本框编辑器支持HTML
kindeditor富文本框
KindEditor富文本框图片上传 文件上传 json-simple-1.1.1.jar 和 kindeditor.zip
百度富文本框(Ueditor)自定义图片上传接口,并解决单图片上传的跨域问题,Ueditor官方说不支持跨域上传,我想说呵呵o(* ̄︶ ̄*)o
使用JavaScript实现的富文本框,使整个界面看起来更加漂亮且功能齐全!
是一个自由度很高的富文本, 可以基于一个页面多个富文本不串门, 任意上传图片
富文本框
Android用最简单的方法实现富文本框效果,可以同时文字变化和插入图片的效果,如果不会用可以看一下我的博客地址为https://blog.csdn.net/qq_45137584/article/details/111174861。
网上有很多富文本框,可是看来看去都不适合自己,所以自己做了个富文本框,简单实用!使用说明比较详细,码砖调试花了三天,请大家珍惜梅花的汗水,请保留梅花150版权信息。感谢!ws:150_4566_6310。去掉下划线就...