文件一：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>
分享到：
相关推荐
富文本框在网页开发中是不可或缺的元素，它允许用户输入和编辑带有格式的文本，如加粗、斜体、插入图片或链接等。"简单富文本框优化版" 提供了一个精简且易于使用的解决方案，特别适合那些不希望在项目中引入复杂...
富文本框插件是网页开发中常用的一种组件，主要用于提供用户在网页上编辑和格式化文本的功能。在本文中，我们将深入探讨“editor”这个富文本框插件的相关知识点。 一、富文本框概述 富文本框（Rich Text Editor）...
富文本框（Rich Text Box）是一种常见的Web开发组件，它允许用户输入并编辑格式化的文本，如加粗、斜体、插入图片、链接等。在HTML中，富文本框通常通过`<textarea>`标签结合JavaScript库来实现。"简单富文本框"指的...
在本场景下，你提到的"java web 富文本框"很可能是指一个已经封装好的Java Web组件或库，可以直接在项目中使用，无需进行复杂的配置或编码。 富文本框在Java Web中的实现通常涉及JavaScript库（如TinyMCE, CKEditor...
富文本框是一种在网页上提供用户输入和编辑富格式文本的控件，它允许用户插入文字、图片、链接、表格等元素，同时还能支持表情的插入，极大地提升了用户体验。在这个场景下，我们讨论的是一个名为“xhEditor”的富...
富文本框是网页设计中不可或缺的一部分，它允许用户在网页上编辑和格式化文本，而不仅仅是输入纯文本。"最强的Web在线富文本框"显然是一款功能强大的富文本编辑器，具备图片上传、文件上传等功能，并且兼容多种...
JavaScript 富文本框是一种网页开发中的重要元素，它允许用户在网页上进行格式化文本输入，比如编辑文章、填写表单等。相比简单的文本输入框，富文本框提供了更多的功能，如字体选择、字号调整、颜色设置、插入图片...
标题中的“文本编辑器”指的是用于在网页中进行文本编辑的交互界面，而“富文本框”则是指这种编辑器的一个具体实现形式。富文本框通常提供一个可视化的编辑区域，用户可以在这个区域内进行文字输入，并能够享受到...
富文本框控件是网页开发中常用的一种组件，主要用于提供比普通文本输入框更加强大的编辑功能。在网页设计中，我们常常需要用户输入带有格式的文本，如加粗、斜体、插入图片、链接等，这时富文本框就显得尤为重要。富...
在ASP.NET中，富文本框（Rich Text Box）是一种常见的控件，它允许用户输入和编辑带有格式化的文本，如加粗、斜体、插入图片、链接等。然而，ASP.NET的标准库并没有提供内置的富文本框控件，因此开发人员通常会借助...
开发者们常常寻找功能丰富的控件来增强用户界面，其中富文本框（RichTextBox）是常见的一种，它允许用户输入、编辑和格式化文本。然而，标准的WinForms RichTextBox控件对于HTML的支持相对有限。为了解决这个问题，...
富文本框（Rich Text Box）是编程中常见的一种控件，尤其在Windows应用程序开发中，如.NET Framework的WinForms和WPF平台。它允许用户输入并格式化文本，包括字体、大小、颜色、对齐方式等多种样式。这篇博客可能是...
第二种则是通过esaypoi进行word模板导出，但是遇到有富文本框的数据，则就不咋好使了 第三种，则是今天要分享给大家的，也是我项目里所用的，通过poi-tl组件进行word导出。 ， 资源为导出所需要的maven依赖及本身...
.NET框架为开发者提供了丰富的控件库，其中包括了富文本框控件，这在创建具有交互性和多样性的应用程序时尤其有用。本文将详细探讨.NET富文本框控件的优点及其在C#编程中的应用。 富文本框控件（RichTextBox）是...
富文本框在网页开发中扮演着重要的角色，它允许用户以类似Word的方式编辑文本，包括字体、字号、颜色、对齐方式、插入图片、链接等多样化的格式设置。"漂亮的富文本框"这个主题，主要涉及到的是网页界面设计中富文本...
在IT领域，富文本框（RichTextBox）是一种常见的控件，广泛应用于Windows应用程序开发中，如Visual Basic或C#等编程环境。它允许用户输入、编辑和显示包含各种格式的文本，包括字体、颜色、大小、对齐方式，以及更...
富文本框的用法详细. 富文本框的用法详细.
在“KindEditor富文本框图片上传”这一主题中，主要涉及到的技术点是图片的上传功能。在网页应用中，用户可能需要在编辑内容时插入自己的图片。KindEditor通过内置的图片上传插件，实现了这一功能。该功能通常由两...
这个项目"基于SSM框架的登录注册和富文本框加Excel的导出"是一个典型的企业级应用功能模块，它涵盖了用户认证、内容编辑和数据导出等关键点。下面将详细阐述这些知识点。 首先，**Spring框架** 是一个全面的后端...
富文本框（Rich Text Box）在IT行业中是一个常见的组件，特别是在Windows应用程序开发中，它允许用户编辑和格式化文本，支持多种字体、颜色、样式以及插入图片和其他对象。富文本框1.4.3.3可能是一个特定版本的富...