富文本编辑

富文本编辑又称为: 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实现,可以应用于页面中的任何元素,然后用户就可以编辑该元素

这种方式的优点在于:

  1. 不用 iframe,空白页,JS
  2. 只需要为元素设置 contenteditable 属性即可

该属性允许三种值:

  1. "true" 打开富文本编辑器
  2. "false" 表示关闭富文本编辑器
  3. "inherit" 表示该值从父元素继承

Javascript高级编程学习笔记（81）—— 富文本(1)的更多相关文章

  1. Javascript高级编程学习笔记（83）—— 富文本选区(3)

    富文本选区 在富文本编辑器中使用 iframe 的 getSelection() 方法可以获取选中的文本 该方法是 window 对象和 document 对象的属性,调用后会返回一个当前选选择文本的 ...

  2. Javascript高级编程学习笔记（82）—— 富文本操作(2)

    操作富文本 与富文本编辑器的交互的主要方式就是使用 document.execCommand() 方法 该方法可以对文档执行自定义命令,并且可以应用大多数格式 该方法接收三个参数: 要执行命令的名称 ...

  3. Javascript高级编程学习笔记（88）—— Canvas(5)绘制文本

    绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...

  4. Javascript高级编程学习笔记（76）—— 表单（4）选择文本

    文本框脚本 在HTML中文本框有两种实现方式: <input> <textarea> 这两种实现方式虽然在多数情况下表现一致,但是两者之间仍存在许多重要区别 对于<inp ...

  5. Javascript高级编程学习笔记（64）—— 事件（8）键盘与文本事件

    键盘与文本事件 用户在使用键盘时会触发键盘事件 “DOM2级事件”最初规定了键盘事件,但是最后在定稿时又删除了相应内容 所以键盘事件被放入了DOM3级事件的规范中 总的来说有三个键盘事件: keydo ...

  6. Javascript高级编程学习笔记（53）—— DOM2和DOM3（5）遍历

    遍历 “DOM2级遍历和范围” 定义了两个用于辅助完成顺序遍历的DOM结构类型 NodeIterator 和 TreeWalk 上述两种类型可以基于给定起点的DOM结构执行深度优先的遍历操作 对于检测 ...

  7. Javascript高级编程学习笔记（37）—— DOM（3）Element

    Element类型 除了Document类型之外,Element类型应该就是web编程中最常用的类型了 Element类型主要用于表现XML.HTML元素,提供对元素标签名.子节点以及特性的访问 特性 ...

  8. Javascript高级编程学习笔记（35）—— DOM（1）节点

    DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...

  9. Javascript高级编程学习笔记（15）—— 引用类型（4）RegExp类型

    JS中处理字符串最常用的应该就是正则了 同样正则(RegExp)类型也是JS中引用类型的一种 ECMAScript通过 RegExp类型 来支持正则表达式 创建正则 var expression = ...

随机推荐

  1. sftp免密登录

    最近在linux服务器上搭建了一个sftp服务器,在做免密登录时,因为理解的问题,走了些弯路,在此记录一下. 先来说一下服务器端,在服务端的每一个用户的根目录下都有一个.ssh目录,在这个下面放的公私 ...

  2. 基于SRS+OBS搭建直播系统

    这段时间与视频,直播相关的技术不可谓不热,今天我们就近距离接触下,尽早搭上这班车! 我们先看一张效果图 左边是OBS 推流端,右边是VLC播放器,稍微有延迟! 本文是基于VMware(12.5.7)+ ...

  3. 基于SoftRoCE 了解RDMA

    RDMA是基于IB技术的内存直接传送,无需内核参与,硬件网卡搞定.IB需要HPC领域的专用硬件,ROCE则是RDMA协议在普通以太网卡的实现,RoCEv1是在MAC上的二层封装,局域网内可以,要通过路 ...

  4. 面试简单整理之zookeeper

    157.zookeeper 是什么? ZooKeeper 是一个开源的分布式协调服务,由雅虎创建,是 Google Chubby 的开源实现. 分布式应用程序可以基于 ZooKeeper 实现诸如数据 ...

  5. Netsharp系列文章目录结构

    作者:秋时  转载须说明出处  Netsharp交流群:338963050(请有详细的请求说明) ->. 总体介绍 Netsharp总体介绍 一. Netsharp快速入门系列 Netsharp ...

  6. 解决win系统无法安装.NET Framework 4.0 4.6 原因是HRESULT0xc8000222

    1.开始----- 运行------- cmd ----- 键入net stop WuAuServ回车(停止windows update服务) 2.开始----- 运行----键入%windir%回车 ...

  7. css关于浮动的高度塌陷

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 前端js收藏

    1 爱心特效 <script type="text/javascript"> (function(window,document,undefined){ var hea ...

  9. 关于python-flask中规范创建项目的几个关键py项目文件

    1.config.py——配置文件 DEBUG = True DIALECT = 'mysql' DRIVER = 'mysqldb' USERNAME = 'root' PASSWORD = '' ...

  10. 关于下载calipso数据集以及用python将其读到记事本小结

    今天终于把老板交代的事情忙完了,对于我这位计算机语言的小白来说,其中的艰辛不用说,一把辛酸泪啊!在有计算机语言经验的老手而言,我这些问题似乎也不能算是问题,但我却卡了很久,对此,想把自己所遇到的困难和 ...