使用IFrame框架做成文本编辑器。
需要两个页面：default.html和editInfo.aspx页面，其中default.aspx作为主控页面，editInfo.html作为编辑页面。
default.aspx页面中要包括一个iframe框架，以包含编辑页面。
下面给出两个页面的代码：
default.aspx -------------
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Visual Studio 2005 WEB控件功能说明及演示</title>
<link href="css/styles.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript">
<!--
function ShowExample(pageName)
{
document.getElementById('examplePage').src = "WebControlExample/" + pageName + ".aspx";
}
// 将IFrame包含的页面设置为可编辑
function ToLoad()
{
document.getElementById("examplePage").contentWindow.document.body.contentEditable = true;
}
// 将编辑页面中的内容显示到文本框中
function ToShowTextFromIFrame()
{
document.getElementById("SaveText").value = document.getElementById("examplePage").contentWindow.document.body.innerText;
}
// 将编辑页面中的HTML代码显示到文本框中
function ToShowHTMLFromIFrame()
{
document.getElementById("SaveHTML").value = document.getElementById("examplePage").contentWindow.document.body.innerHTML;
}
// 将文本框中的内容写入编辑页面中
function ToWriteTextToIFrame()
{
document.getElementById("examplePage").contentWindow.document.body.innerText = document.getElementById("WriteText").value;
}
// 将文本框中的HTML代码写入编辑页面中
function ToWriteHTMLToIFrame()
{
document.getElementById("examplePage").contentWindow.document.body.innerHTML = document.getElementById("WriteHTML").value;
}
//-->
</script>
</head>
<body>
<form id="form1" runat="server">
<iframe id="examplePage" src="comm/fristpage.html" style="width: 100%; height: 100%"
scrolling="auto" onload="ToLoad();"></iframe>
<input id="SaveText" type="text" /><input type="button" id="bttnSaveText" value="显示IFrame文本"
onclick="ToShowTextFromIFrame();" />
<input id="WriteText" type="text" /><input type="button" id="bttnWriteText" value="写入IFrame文本"
onclick="ToWriteTextToIFrame();" />
<br />
<input id="SaveHTML" type="text" /><input type="button" id="bttnSaveHTML" value="显示IFrameHTML文本"
onclick="ToShowHTMLFromIFrame();" />
<input id="WriteHTML" type="text" /><input type="button" id="bttnWriteHTML" value="写入IFrameHTML文本"
onclick="ToWriteHTMLToIFrame();" />
</form>
</body>
</html>
editInfo.html -----------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 100%; height: 100%">
<tr>
<td align="center" valign="middle">
Hello everyone !</td>
</tr>
</table>
</div>
</form>
</body>
</html>
注意：编辑页面最好选用HTML的静态页面，如果选用动态页面的话，编辑页面被设置为可编辑后将会自动增加一个文本框以保存StateView内容。
分享到：
相关推荐
手撸简单版前端富文本编辑器。基本原理：由于富文本内容不想收到所在页面或者前端框架的影响，或者说写一个完全单独的纯编辑器，采用原生iframe+js+jquery实现。
新浪文本编辑器，很不错的编辑器，做网站有很多地方都可能会用到 1，要下载文本编辑器。请点击新浪文本编辑器下载， 2，解压后，把文件夹中Edit文件夹夹复制到网站的根目录下， 3，在界面上引用编辑器 <iframe ID=...
整个富文本编辑器是通过iframe嵌入到网页中的，手动尝试输入内容，发现内容是输入到iframe页面的body中的， 这种富文本框怎么输入呢？ 我们也可以直接在body的源码上点击右键选择Edit HTML,输入相应的html代码，...
前段时间有个需求是开发富文本编辑器，这个之前随做过，但看了需求，发现有些地方还需google
用在线编辑器或许都会存在一个问题，即内容发表后呈现的样式会与编辑时的不一样，原因是编辑器其实是个内嵌的iframe，它里面用的大多是浏览器默认的样式（ckeditor 在其中另外定义了字体以及ul, ol 的缩进值），而...
相关联的保存编辑内容的表单项名，也就是提交保存页要引用的表单项名 style 使用的样式名，可以是标准的样式名或自定义的样式名，如果使用默认的 coolblue 可留空 originalfilename 相关联的保存上传原文件名列表的...
一个非常基本的网页内容编辑功能。不使用 iframe ，不要一个功能特别多的复杂编辑器，只需要很基本的内容编辑功能，例如粗体，斜体，列表，对齐等等。
主要介绍了JS实现iframe编辑器光标位置插入内容的方法,可实现文本与图片的插入功能,并兼容IE和Firefox浏览器,需要的朋友可以参考下
你可以使用iframe来实现，修改iframe的designMode属性使其可以被编辑。 代码如下:<iframe id=”myEditer” width=”100%” height=”150px”></iframe> [removed]myEditer.document.designMode = ‘on’...
全版本的代码量为125k，而且放弃了使用传统的Iframe模式，采用了Div的加载方式， 以达到更快的加载速度和零加载失败率。现在UM的第一个使用者是百度贴吧，贴吧每天几亿的Pv是对UM各种指标的最好测试**台。 当然随着...
Android-所见即所得编辑器一个iframe自由文本编辑器，它使用内容树中的本机组件。 动机是创建一个像media.com一样的纯净所见即所得的所见即所得编辑器。变更日志[3.0.4-2019年7月30日] 滑行更新至4.9.0[3.0.3-2018年...
今天忽然想着复习一下富文本编辑器的制作原理。于是二话不说将手把手地做了起来。因为一年前写过一个简单的富文本编辑器，所以大概还是有点印象。可是当我把写出来的代码跑一下的时候，发现了问题： 复制代码代码...
VUE TEST BY Sjerrys文件上传器，用户身份验证，文本编辑器，引导程序。 可以与任何种类的vuetest一起使用。此项目仅适用于普通话。VUE TEST BY Sjerrys文件上传器，用户身份验证，文本编辑器，引导程序。 可以与...
请注意，draw.io是一项在线服务，尽管此插件使用iframe集成了编辑器并仅在浏览器中本地与之通信（javascript postMessage），但它不能保证从draw.io加载的代码不会上传任何数据到外国服务器。 这可能是隐私问题。 ...
设置iframe的document.designMode为On可以让其可编辑，一般用在富文本编辑器组件中。这里仅列出各浏览器差异
UEditor富文本编辑器 iframe使用 <iframe class="ueditor" id="ueditor" src="index.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></...
iframe、fullPage 和使用 CodeMirror 图片管理 用户功能 选项模板 自定义插件 文档 执照 浏览器支持 Chrome合金 火狐 歌剧 苹果浏览器 边缘 IE浏览器 是的 是的 是的 是的 是的 11+ 安装 新产品经理 $ npm ...
UM的主要特点就是容量和加载速度上的改变，主文件的代码量为139k，而且放弃了使用传统的iframe模式，采用了div的加载方式， 以达到更快的加载速度和零加载失败率。现在UM的第一个使用者是百度贴吧，贴吧每天几亿的...
Atom-mastofeed.zip,mastodon atom feed => iframe embed. https://www.mastofeed.com乳香,atom是一个用web技术构建的开源文本编辑器。
UM的主要特点就是容量和加载速度上的改变，主文件的代码量为139k，而且放弃了使用传统的iframe模式，采用了div的加载方式， 以达到更快的加载速度和零加载失败率。 现在UM的第一个使用者是百度贴吧，贴吧每天几...