document.execCommand

  1. // document.execCommand(命令名称，是否展示用户界面，命令需要的额外参数)
  2. document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
  4. // 加粗
  5. document.execCommand('bold', false, null);
  6. // 添加图片
  7. document.execCommand('insertImage', false, url || base64);
  8. // 把一段文字用 p 标签包裹起来
  9. document.execCommand('formatblock', false, '<p>');

Selection 对象

用来表示用户选择的范围或光标位置（光标可以看做是范围重合的特殊状态），一个页面用户可能选择多个范围（比如 Firefox）。也就是说 Selection 包含一个或多个 Range 对象（Selection 可以说是 Range 的集合）

  1. // 获取选中的内容信息（getRangeAt 接受一个索引值，因为会有多个 Range，而现在只有一个，所以写0）
  2. let range = window.getSelection().getRangeAt(0)

光标即选取收尾重合的特殊情况
image.png

selection 的方法API：

  • addRange
  • removeAllRanges
  • collapse
  • collapseToEnd

    ueditor

标识符
image.png
image.png
image.png
image.png
image.png
image.png 特殊字符
image.png 清除样式
image.png 复制样式
image.png

image.png

image.png
image.png 例如 a 变成 A 小写变大写
image.png 例如 A 变成 a 大写变小写
image.png

image.png
image.png 2019-11-07 直接插入字符串的时间
image.png 16:02:12 直接插入字符串的时间
image.png
撤销和恢复
image.png

image.png
image.png 聊一聊富文本 - 图23
image.png 空类1 zmblank {
box-sizing: border-box;
display: inline-block;
width: 4em;
text-align: center;
border: 1px solid #000;
user-select: none;
}
image.png 空类2 zmsubline {
box-sizing: border-box;
display: inline-block;
width: 4em;
text-align: center;
border-bottom: 1px solid #000;
}

不一致带来的问题

原本的样子：<p>√</p>
image.png

展示区样式：

  1. p, label {
  2.     font-family: "思源黑体 CN Normal","思源黑体 CN Regular","Microsoft YaHei",SourceHanSansCN,Arial,-apple-system,BlinkMacSystemFont,"sans-serif","Helvetica Neue For Number",serif;
  3.     line-height: 1.5em;
  4. }

富文本输入区样式：
**

  1. body {
  2.     margin: 8px;
  3.     font-family: sans-serif;
  4.     font-size: 16px;
  5. }

教育行业对字体的选择

React 踩坑

React 中添加 contentEditable 并且有 children 时会报错Warning: A component iscontentEditableand containschildrenmanaged by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.

  1. <div contentEditable children='1113' suppressContentEditableWarning />

解决方案：添加 suppressContentEditableWarning 属性

  1. 严格控制内容（格式规则检查、内容输入和输出过滤）
  2. 严格控制光标（劫持、检查、代理）
  3. 控制撤销重做堆栈
  4. 为一些关键操作添加生命周期钩子
  5. 富文本编辑框需要考虑很多XSS的问题，赋值粘贴时标签的过滤等
  6. 浏览器兼容性的问题,range对象操作的不同，contenteditable属性表现出来的问题
  7. 统一插入文本的样式，否则输入文字的时候会沿用前面的样式
  8. @用户高亮显示的浏览器兼容问题

资源

https://github.com/timdown/rangy
https://github.com/jaredreich/pell/blob/master/src/pell.js
contenteditable跟user-modify还能这么玩🌚 - 掘金