操作富文本

与富文本编辑器的交互的主要方式就是使用 document.execCommand() 方法

该方法可以对文档执行自定义命令,并且可以应用大多数格式

该方法接收三个参数:

  1. 要执行命令的名称
  2. 浏览器是否应该为当前页面提供用户界面
  3. 执行命令的值

为了保证跨浏览器的兼容性,最好保证第二个参数为 false,因为Firefox会在该参数为 true 时报错

命令 值(第三个参数) 说明
backcolor 颜色字符串 设置文档的背景颜色
bold null 将选中的文本转为粗体显示
copy null 将选择文本复制到剪切板
createlink URL字符串 将选中的文本转换为一个链接,指向目标URL
cut null 将选中文本剪切到剪切板
delete null 删除选择的文本
fontname 字体名称 将选中文本修改为指定字体
fontsize 1~7 将选中文本修改为指定大小
forecolor 颜色字符串 将文本修改为指定颜色
fomatblock HTML标签 使用指定标签包裹选中文本
indent null 缩进文本
inserthorizontalrule null 在光标处插入<hr>元素
insertimage 图像URL 在光标出插入一张图片
insertorderedlist null 在光标处插入<ol>元素
insertunorderedlist null 在光标处插入<ul>元素
insertparagraph null 在光标处插入<p>元素
italic null 将选中文本转为斜体
justifycenter null 将文本居中对齐
justifyleft null 将文本居左对齐
outdent null 凸排文本
paste null 将剪切板中的文本粘贴到指定位置
removeformat null 撤销formatblock
selectall null 选择文档中的所有文本
underline null 为选中文本添加下划线
unlink  null 移除文本链接

上述命令中,与剪切板有关的命令在不同浏览器中的实现差异极大

此外虽然所有浏览器都支持这些命令,但是这些命令产生的HTML差距极大

除了这些命令之外.还有一些与这些命令相关的方法:

  • queryCommandEnabled() 用于检测是否可以针对当前位置或者选中的文本执行某个命令,接收一个参数即要检测的命令
  • queryCommandState() 用于判断是否已经将命令应用到指定文本
  • queryCommandValue() 用于获取执行命令时传入的第三个参数

Javascript高级编程学习笔记(82)—— 富文本操作(2)的更多相关文章

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

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

  2. Javascript高级编程学习笔记(81)—— 富文本(1)

    富文本编辑 富文本编辑又称为: WYSIWYG(What You See Is What You Get,所见即所得) 常用于博客等用途,虽然没有规范,但是在IE最先引入后其他的浏览器厂商也相继完成了 ...

  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. FragmentManager中Fragment的重复创建、复用问题

    当我们在Activity中使用 Fragment可以用FragmentManager去添加到对应个ViewGoup中使用 FragmentManager fragmentManager = getSu ...

  2. 有关Lambda的一些思考

    问题: What do lambda expressions do? Can we write all functions as lambda expressions? In what cases a ...

  3. 在MyEclipse中搭建spring-boot+mybatis+freemarker框架

    一.创建项目 1.右键-->New-->Project... 2.选中Maven Project,点击next 3.选中第一个 4.添写Group Id,Artifact Id,选择Com ...

  4. JSP 页面中插入图片

    第一步 在 JSP 页面中插入图片 EL 表达式 ${pageContext.request.contextPath } 的值为当前的项目名称 <html> ... <body> ...

  5. clientdataset新增append新增多条记录的时候报错 key valation

    在前面加上两句 adsDetail.Active := False; adsDetail.CreateDataSet;

  6. py3.0第四天 函数,生成器迭代器等

    1.列表生成式,迭代器&生成器 孩子,我现在有个需求,看列表[0, 1, 2, 3, 4, 5, 6, 7, 8, 9],我要求你把列表里的每个值加1,你怎么实现?你可能会想到2种方式 > ...

  7. 制作DNS字典

    1.收集字典 一般kali自带的DNS爆破工具都会有自己的字典,使用  dpkg -L dns爆破软件名 查询字典的路径.txt文件一般是字典. 合并到一个txt文件中. 2.删除字典中重复的字符串 ...

  8. IDEA鼠标显示javadoc的设置

    IDEA鼠标显示javadoc的设置 从Eclipse切换到IDEA中以后最不适用的就是鼠标放到方法上没有注释弹出来给我看,很难受,每次使用ctrl+Q来看总觉得不开心,找了一下设置,设置方法如下: ...

  9. Github使用: 本地上传, 与之同步

    很久不用Github 又忘记了怎么同步了, Git桌面前年已经部署好了. 1. 打开GitHub Desktop -- file -- clone repository --- 操作其中想要的一个文件 ...

  10. JavaScript基础视频教程总结(111-120章)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...