Javascript高级编程学习笔记(81)—— 富文本(1)
富文本编辑
富文本编辑又称为: WYSIWYG(What You See Is What You Get,所见即所得)
常用于博客等用途,虽然没有规范,但是在IE最先引入后其他的浏览器厂商也相继完成了对应功能的实现
该技术的本质就是在 HTML 页面中嵌入<iframe>
通过设置页面的 designMode 属性,使该页面可以被编辑
将该属性设置为 on 后文档就会变得可编辑 "off" 是默认值
以下方的 HTML 代码为例
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>
该页面在 iframe 中可以像其它页面一样被加载
如果要让该页面可编辑,则需要将 designMode 设置为 on
但是该属性只有在页面加载完成后才可以访问,所以需要借用 onload 事件在合适的时候设置该属性
如下代码所示:
<iframe name="richedit" style="height:500px;width:100px;" src="blank.html"></iframe> <script>
window.onload=function(){
frames["richedit"].document.designMode = "on";
}
</script>
该代码片段执行后,页面中则会出现类似文本框的可编辑区字段,该字段具有与其他网页一一致的默认样式,但是通过对 blank.html 的 CSS 进行设置就可以修改可编辑区域的外观
contenteditable属性
除了使用 iframe 这种方式之外,另一种富文本内容的方式是使用名为: contenteditable 的特殊属性
该属性最早由IE实现,可以应用于页面中的任何元素,然后用户就可以编辑该元素
这种方式的优点在于:
- 不用 iframe,空白页,JS
- 只需要为元素设置 contenteditable 属性即可
该属性允许三种值:
- "true" 打开富文本编辑器
- "false" 表示关闭富文本编辑器
- "inherit" 表示该值从父元素继承
Javascript高级编程学习笔记(81)—— 富文本(1)的更多相关文章
- Javascript高级编程学习笔记(83)—— 富文本选区(3)
富文本选区 在富文本编辑器中使用 iframe 的 getSelection() 方法可以获取选中的文本 该方法是 window 对象和 document 对象的属性,调用后会返回一个当前选选择文本的 ...
- Javascript高级编程学习笔记(82)—— 富文本操作(2)
操作富文本 与富文本编辑器的交互的主要方式就是使用 document.execCommand() 方法 该方法可以对文档执行自定义命令,并且可以应用大多数格式 该方法接收三个参数: 要执行命令的名称 ...
- Javascript高级编程学习笔记(88)—— Canvas(5)绘制文本
绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...
- Javascript高级编程学习笔记(76)—— 表单(4)选择文本
文本框脚本 在HTML中文本框有两种实现方式: <input> <textarea> 这两种实现方式虽然在多数情况下表现一致,但是两者之间仍存在许多重要区别 对于<inp ...
- Javascript高级编程学习笔记(64)—— 事件(8)键盘与文本事件
键盘与文本事件 用户在使用键盘时会触发键盘事件 “DOM2级事件”最初规定了键盘事件,但是最后在定稿时又删除了相应内容 所以键盘事件被放入了DOM3级事件的规范中 总的来说有三个键盘事件: keydo ...
- Javascript高级编程学习笔记(53)—— DOM2和DOM3(5)遍历
遍历 “DOM2级遍历和范围” 定义了两个用于辅助完成顺序遍历的DOM结构类型 NodeIterator 和 TreeWalk 上述两种类型可以基于给定起点的DOM结构执行深度优先的遍历操作 对于检测 ...
- Javascript高级编程学习笔记(37)—— DOM(3)Element
Element类型 除了Document类型之外,Element类型应该就是web编程中最常用的类型了 Element类型主要用于表现XML.HTML元素,提供对元素标签名.子节点以及特性的访问 特性 ...
- Javascript高级编程学习笔记(35)—— DOM(1)节点
DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...
- Javascript高级编程学习笔记(15)—— 引用类型(4)RegExp类型
JS中处理字符串最常用的应该就是正则了 同样正则(RegExp)类型也是JS中引用类型的一种 ECMAScript通过 RegExp类型 来支持正则表达式 创建正则 var expression = ...
随机推荐
- 探究osg中的程序设计模式【目录】
前序 探究osg中的程序设计模式---开篇 探究osg中的程序设计模式---创造性模式 探究osg中的程序设计模式---创造型模式---Factory(工厂)模式 探究osg中的程序设计模式---创造 ...
- 《笨方法学Python》加分题32
注意一下 range 的用法.查一下 range 函数并理解它在第 22 行(我的答案),你可以直接将 elements 赋值为 range(0, 6) ,而无需使用 for 循环?在 python ...
- n的m划分 整数拆分问题
n的m划分 将n划分成若干个不超过m的数(正整数)的和,问有几种划分情况. 现在根据n和m的关系,考虑下面几种情况: 当n=1时,不论m的值为多少,只有一种划分,即{1}: 当m=1时,不论n的值为多 ...
- ci框架nginx访问
url:http://localhost:20082/index.php/welcome/index 问题:apache环境下可以访问,nginx环境下不可以
- ----constructor 与 object----
CONSTRUCTOR constructor是一种特殊的object,同样是用来创建和声明一个类 语法规则: constructor([arguments]) { ... } 注意: 1.在类中,只 ...
- Filter的介绍及使用
转:http://blog.csdn.net/zhaozheng7758/article/details/6105749 一.Filter的介绍及使用 什么是过滤器? 与Servlet相似,过滤器是一 ...
- .net数据库实现Excel的导入与导出
.net数据库实现Excel的导入与导出 参考路径:https://www.cnblogs.com/splendidme/archive/2012/01/05/2313314.html 1.defau ...
- AHOI——Day1个人感悟
今天,是个bilibili的日子.(嗯?什么意思?) 洛谷已经尽力了: 于是我带着洛谷的祝福,来到了AHOI的考场--合肥一中. 其实我是考完才签到的,我一大早五点多就起来了,到考场后,在肯德基吃了早 ...
- Sorl 4.10 入门合集
Sorl4.10 + Tomcat 7.0 win7环境下的安装 1.首先是到apache官网下载sorl 4.10 ,解压 2.进入路径\solr-4.10.4\example\webapps,拷 ...
- 对java web开发的理解
写完后发现自己好像很多都不知道,管它的,只要自己了解就行了,以后有时间再把这个完善一下吧 感觉就是三层架构翻来覆去的用,以这个为基础不停的扩展,前提是数据量一定要大,不然这些扩展就没啥意思 这是数据量 ...