主题
富文本编辑器
contenteditable
- 可一个元素添加
contenteditable属性，则该元素可以被用户编辑，类似于 textarea - 但其可以接受
document.execCommand()的富文本修改
html
<div contenteditable>默认值</div>与富文本交互
1. execCommand
- 使用
document.execCommand()方法进行交互，第一个值是命令，第二个值应该永远为 false，第三个值是命令必需的参数 - 执行控制样式的命令时，如果当前有选中的内容，则设置选中内容的样式。否则是设置光标所在位置的样式，让此位置的后续输入都应用这个样式。
| 命令 第一个参数 | 值 第三个参数 | 说明 |
|---|---|---|
| backColor | 颜色字符串 | 修改文档的背景颜色 |
| bold | null | 切换文本为粗体样式 |
| copy | null | 将选中文本复制到剪贴板 |
| createLink | URL 字符串 | 将命令内容创建为一个锚链接 |
| cut | null | 将选中文本剪切到剪切板 |
| delete | null | 删除选中文本 |
| fontName | 字体名 | 改为指定字体 |
| fontSize | 1~7 | 改变字体大小 |
| foreColor | 颜色字符串 | 改变字体颜色 |
| formatBlock | HTML标签名 | 添加一个标签，或将选中文本添加到标签中 |
| indent | null | 缩进文本 |
| insertHorizontalRule | null | 在插入点插入一个水平线 |
| insertImage | 图片 URL | 在光标位置插入图片 |
| insertOrderedList | null | 在光标位置插入<ol> |
| insertParagraph | null | 在光标位置插入<p> |
| insertUnorderedList | null | 在光标位置插入<ul> |
| italic | null | 切换文本为斜体样式 |
| justifyCenter | null | 对光标插入位置或选中内容进行文字居中 |
| justifyLeft | null | 对光标插入位置或选中内容进行文字左对齐 |
| outdent | null | 减少缩进 |
| paste | null | 在光标位置粘贴的内容，如果有被替换的内容，会被替换 |
| removeFormat | null | 对选中内容去除所有格式 |
| selectAll | null | 选中全部文本 |
| underline | null | 在光标插入点开启或关闭下划线 |
| unlink | null | 移除文本链接 |
2. queryCommandEnabled
- 确定对当前选中文本或光标所在为宗旨是否可以执行相关命令
3. queryCommandState
- 确定相关命令是否应用到当前文本选区
4. queryCommandValue
- 可以返回执行命令时使用的值（即第三个参数）
通过表单提交富文本
- 需要自己获取值（innerHTML）