富文本编辑,又称为WYSIWYG(What You See Is What You Get,所见即所得)。在网页中编辑富文本内容,是人们对Web 应用程序最大的期待之一。虽然也没有规范,但在IE 最早引入的这一功能基础上,已经出现了事实标准。而且,Opera、Safari、Chrome 和Firefox 都已经支持这一功能。这一技术的本质,就是在页面中嵌入一个包含空HTML 页面的iframe。通过设置designMode 属性,这个空白的HTML 页面可以被编辑,而编辑对象则是该页面<body>元素的HTML 代码。designMode 属性有两个可能的值:"off"(默认值)和"on"。在设置为"on"时,整个文档都会变得可以编辑(显示插入符号),然后就可以像使用字处理软件一样,通过键盘将文本内容加粗、变成斜体,等等。
可以给iframe 指定一个非常简单的HTML 页面作为其内容来源。例如:
<!DOCTYPE html> <html> <head> <title>Blank Page for Rich Text Editing</title> </head> <body> </body> </html>
这个页面在iframe 中可以像其他页面一样被加载。要让它可以编辑,必须要将designMode 设置为"on",但只有在页面完全加载之后才能设置这个属性。因此,在包含页面中,需要使用onload 事件处理程序来在恰当的时刻设置designMode,如下面的例子所示:
<iframe name="richedit" style="height:100px;width:100px;" src="blank.htm"> </iframe> <script type="text/javascript"> EventUtil.addHandler(window, "load", function() { frames["richedit"].document.designMode = "on"; }); </script>
等到以上代码执行之后,你就会在页面中看到一个类似文本框的可编辑区字段。这个区字段具有与其他网页相同的默认样式;不过,通过为空白页面应用CSS 样式,可以修改可编辑区字段的外观。
14.5.1 使用contenteditable属性
另一种编辑富文本内容的方式是使用名为contenteditable 的特殊属性,这个属性也是由IE 最早实现的。可以把contenteditable 属性应用给页面中的任何元素,然后用户立即就可以编辑该元素。
这种方法之所以受到欢迎,是因为它不需要iframe、空白页和JavaScript,只要为元素设置contenteditable 属性即可。
<div class="editable" id="richedit" contenteditable></div>
这样,元素中包含的任何文本内容就都可以编辑了,就好像这个元素变成了<textarea>元素一样。
通过在这个元素上设置contenteditable 属性,也能打开或关闭编辑模式。
var div = document.getElementById("richedit"); div.contentEditable = "true";
contenteditable 属性有三个可能的值:"true"表示打开、"false"表示关闭,"inherit"表示从父元素那里继承(因为可以在contenteditable 元素中创建或删除元素)。支持contenteditable属性的元素有IE、Firefox、Chrome、Safari 和Opera。在移动设备上,支持contenteditable 属性的浏览器有iOS 5+中的Safari 和Android 3+中的WebKit。
14.5.2 操作富文本
与富文本编辑器交互的主要方式,就是使用document.execCommand()。这个方法可以对文档执行预定义的命令,而且可以应用大多数格式。可以为document.execCommand()方法传递3 个参数:要执行的命令名称、表示浏览器是否应该为当前命令提供用户界面的一个布尔值和执行命令必须的一个值(如果不需要值,则传递null)。为了确保跨浏览器的兼容性,第二个参数应该始终设置为false,因为Firefox 会在该参数为true 时抛出错误。
不同浏览器支持的预定义命令也不一样。下表列出了那些被支持最多的命令。
其中,与剪贴板有关的命令在不同浏览器中的差异极大。Opera 根本没有实现任何剪贴板命令,而Firefox 在默认情况下会禁用它们(必须修改用户的首选项来启用它们)。Safari 和Chrome 实现了cut 和copy,但没有实现paste。不过,即使不能通过document.execCommand()来执行这些命令,但却可以通过相应的快捷键来实现同样的操作。
可以在任何时候使用这些命令来修改富文本区域的外观,如下面的例子所示。
//转换粗体文本 frames["richedit"].document.execCommand("bold", false, null); //转换斜体文本 frames["richedit"].document.execCommand("italic", false, null); //创建指向www.wrox.com 的链接 frames["richedit"].document.execCommand("createlink", false, "http://www.wrox.com"); //格式化为1 级标题 frames["richedit"].document.execCommand("formatblock", false, "<h1>");
同样的方法也适用于页面中contenteditable 属性为"true"的区块,只要把对框架的引用替换成当前窗口的document 对象即可。
//转换粗体文本 document.execCommand("bold", false, null); //转换斜体文本 document.execCommand("italic", false, null); //创建指向www.wrox.com 的链接 document.execCommand("createlink", false, "http://www.wrox.com"); //格式化为1 级标题 document.execCommand("formatblock", false, "<h1>");
运行一下
需要注意的是,虽然所有浏览器都支持这些命令,但这些命令所产生的HTML 仍然有很大不同。例如,执行bold 命令时,IE 和Opera 会使用<strong>标签包围文本,Safari 和Chrome 使用<b>标签,而Firefox 则使用<span>标签。由于各个浏览器实现命令的方式不同,加上它们通过innerHTML 实现转换的方式也不一样,因此不能指望富文本编辑器会产生一致的HTML。
除了命令之外,还有一些与命令相关的方法。第一个方法就是queryCommandEnabled(),可以用它来检测是否可以针对当前选择的文本,或者当前插入字符所在位置执行某个命令。这个方法接收一个参数,即要检测的命令。如果当前编辑区域允许执行传入的命令,这个方法返回true,否则返回false。例如:
var result = frames["richedit"].document.queryCommandEnabled("bold");
如果能够对当前选择的文本执行"bold"命令,以上代码会返回true。需要注意的是,query-CommandEnabled()方法返回true,并不意味着实际上就可以执行相应命令,而只能说明对当前选择的文本执行相应命令是否合适。例如,Firefox 在默认情况下会禁用剪切操作,但执行queryCommand-Enabled("cut")也可能会返回true。
另外,queryCommandState()方法用于确定是否已将指定命令应用到了选择的文本。例如,要确定当前选择的文本是否已经转换成了粗体,可以使用如下代码。
var isBold = frames["richedit"].document.queryCommandState("bold");
运行一下
如果此前已经对选择的文本执行了"bold"命令,那么上面的代码会返回true。一些功能全面的富文本编辑器,正是利用这个方法来更新粗体、斜体等按钮的状态的。
最后一个方法是queryCommandValue(),用于取得执行命令时传入的值(即前面例子中传给document.execCommand()的第三个参数)。例如,在对一段文本应用"fontsize"命令时如果传入了7,那么下面的代码就会返回"7":
var fontSize = frames["richedit"].document.queryCommandValue("fontsize");
运行一下
通过这个方法可以确定某个命令是怎样应用到选择的文本的,可以据以确定再对其应用后续命令是否合适。
14.5.3 富文本选区
在富文本编辑器中,使用框架(iframe)的getSelection()方法,可以确定实际选择的文本。
这个方法是window 对象和document 对象的属性,调用它会返回一个表示当前选择文本的Selection对象。每个Selection 对象都有下列属性。
- anchorNode:选区起点所在的节点。
- anchorOffset:在到达选区起点位置之前跳过的anchorNode 中的字符数量。
- focusNode:选区终点所在的节点。
- focusOffset:focusNode 中包含在选区之内的字符数量。
- isCollapsed:布尔值,表示选区的起点和终点是否重合。
- rangeCount:选区中包含的DOM 范围的数量。
Selection 对象的这些属性并没有包含多少有用的信息。好在,该对象的下列方法提供了更多信息,并且支持对选区的操作。
- addRange(range):将指定的DOM 范围添加到选区中。
- collapse(node, offset):将选区折叠到指定节点中的相应的文本偏移位置。
- collapseToEnd():将选区折叠到终点位置。
- collapseToStart():将选区折叠到起点位置。
- containsNode(node):确定指定的节点是否包含在选区中。
- deleteFromDocument():从文档中删除选区中的文本,与document.execCommand("delete",false, null)命令的结果相同。
- extend(node, offset):通过将focusNode 和focusOffset 移动到指定的值来扩展选区。
- getRangeAt(index):返回索引对应的选区中的DOM范围。
- removeAllRanges():从选区中移除所有DOM 范围。实际上,这样会移除选区,因为选区中至少要有一个范围。
- reomveRange(range):从选区中移除指定的DOM 范围。
- selectAllChildren(node):清除选区并选择指定节点的所有子节点。
- toString():返回选区所包含的文本内容。
Selection 对象的这些方法都极为实用,它们利用了(第12 章讨论过的)DOM范围来管理选区。
由于可以直接操作选择文本的DOM 表现,因此访问DOM范围与使用execCommand()相比,能够对富文本编辑器进行更加细化的控制。下面来看一个例子。
var selection = frames["richedit"].getSelection(); //取得选择的文本 var selectedText = selection.toString(); //取得代表选区的范围 var range = selection.getRangeAt(0); //突出显示选择的文本 var span = frames["richedit"].document.createElement("span"); span.style.backgroundColor = "yellow"; range.surroundContents(span);
运行一下
以上代码会为富文本编辑器中被选择的文本添加黄色的背景。这里使用了默认选区中的DOM 范围,通过surroundContents()方法将选区添加到了带有黄色背景的<span>元素中。
HTML5 将getSelection()方法纳入了标准,而且IE9、Firefox、Safari、Chrome 和Opera 8 都实现了它。由于历史原因,在Firefox 3.6+中调用document.getSelection()会返回一个字符串。为此,可以在Firefox 3.6+中改作调用window.getSelection(),从而返回selection 对象。Firefox 8 修复了document.getSelection()的bug,能返回与window.getSelection()相同的值。
IE8 及更早的版本不支持DOM范围,但我们可以通过它支持的selection 对象操作选择的文本。
IE 中的selection 对象是document 的属性,本章前面曾经讨论过。要取得富文本编辑器中选择的文本,首先必须创建一个文本范围(请参考第12 章中的相关内容),然后再像下面这样访问其text 属性。
var range = frames["richedit"].document.selection.createRange(); var selectedText = range.text;
虽然使用IE 的文本范围来执行HTML 操作并不像使用DOM 范围那么可靠,但也不失为一种有效的途径。要像前面使用DOM 范围那样实现相同的文本高亮效果,可以组合使用htmlText 属性和pasteHTML()方法。
var range = frames["richedit"].document.selection.createRange(); range.pasteHTML("<span style=\"background-color:yellow\"> " + range.htmlText +"</span>");
以上代码通过htmlText 取得了当前选区中的HTML,然后将其放在了一对<span>标签中,最后又使用pasteHTML()将结果重新插入到了选区中。
14.5.4 表单与富文本
由于富文本编辑是使用iframe 而非表单控件实现的,因此从技术上说,富文本编辑器并不属于表单。换句话说,富文本编辑器中的HTML 不会被自动提交给服务器,而需要我们手工来提取并提交HTML。为此,通常可以添加一个隐藏的表单字段,让它的值等于从iframe 中提取出的HTML。具体来说,就是在提交表单之前,从iframe 中提取出HTML,并将其插入到隐藏的字段中。下面就是通过表单的onsubmit 事件处理程序实现上述操作的代码。
EventUtil.addHandler(form, "submit", function(event) { event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); target.elements["comments"].value = frames["richedit"].document.body.innerHTML; });
运行一下
在此,我们通过文档主体的innerHTML 属性取得了iframe 中的HTML,然后将其插入到了名为"comments"的表单字段中。这样可以确保恰好在提交表单之前填充"comments"字段。如果你想在代码中通过submit()来手工提交表单,那么一定不要忘记事先执行上面的操作。对于contenteditable元素,也可以执行类似操作。
EventUtil.addHandler(form, "submit", function(event) { event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); target.elements["comments"].value = document.getElementById("richedit").innerHTML; });
相关推荐
ASP.NET 4高级程序设计(第4版)》【原版书为:Pro ASP.NET 4 in C# 2010】是ASP.NET领域的鸿篇巨制,全面讲解了ASP.NET4的各种特性及其背后的工作原理,并给出了许多针对如何构建复杂、可扩展的网站从实践中得出的...
《ASP.NET 4高级程序设计(第4版)》是ASP.NET领域的鸿篇巨制,全面讲解了ASP.NET4的各种特性及其背后的工作原理,并给出了许多针对如何构建复杂、可扩展的网站从实践中得出的建议。书中还深入讲述了其他ASP.NET图书...
资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。
《基于YOLOv8的智慧社区独居老人生命体征监测系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计
Android Studio Meerkat 2024.3.1 Patch 1(android-studio-2024.3.1.14-mac.dmg)适用于macOS Intel系统,文件使用360压缩软件分割成两个压缩包,必须一起下载使用: part1: https://download.csdn.net/download/weixin_43800734/90557060 part2: https://download.csdn.net/download/weixin_43800734/90557056
侧轴承杯加工工艺编制及夹具设计.zip
NASA数据集锂电池容量特征提取(Matlab完整源码和数据) 作者介绍:机器学习之心,博客专家认证,机器学习领域创作者,2023博客之星TOP50,主做机器学习和深度学习时序、回归、分类、聚类和降维等程序设计和案例分析,文章底部有博主联系方式。从事Matlab、Python算法仿真工作8年,更多仿真源码、数据集定制私信。
板料折弯机液压系统设计.zip
C6150车床的设计.zip
机器学习之KNN实现手写数字
python爬虫;智能切换策略,反爬检测机制
mpls-vpn-optionA-all
56tgyhujikolp[
GB 6442-86企业职工伤亡事故调查分析规则.pdf
汽车液压式主动悬架系统的设计().zip
2000-2024年各省专利侵权案件结案数数据 1、时间:2000-2024年 2、来源:国家知识产权J 3、指标:专利侵权案件结案数 4、范围:31省 5、用途:可用于衡量知识产权保护水平
资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。
内容概要:本文档详细复现了金融数学课程作业,涵盖欧式看涨期权定价和投资组合优化两大部分。对于欧式看涨期权定价,分别采用Black-Scholes模型和蒙特卡洛方法进行了计算,并对彩虹期权进行了基于最大值的看涨期权定价。投资组合优化部分则探讨了最小方差组合、给定收益的最小方差组合、最大效用组合以及给定风险的最大收益组合四种情形,还对比了拉格朗日乘数法和二次规划求解器两种方法。文中不仅提供了详细的MATLAB代码,还有详尽的中文解释,确保每一步骤清晰明了。 适合人群:金融工程专业学生、量化分析师、金融数学爱好者。 使用场景及目标:①帮助学生理解和掌握金融衍生品定价的基本原理和方法;②为从事量化分析的专业人士提供实用工具和技术支持;③作为教学材料辅助高校教师讲授相关内容。 其他说明:文档还包括了完整的论文结构建议,从封面页到结论,再到附录,涵盖了所有必要元素,确保提交的作业符合学术规范。此外,还特别强调了数据预处理步骤,确保代码可以顺利运行。