富文本框编辑器原理
文章目录
富文本框编辑器原理contenteditable：document.execCommand()代码演示contenteditable：
1.枚举属性
2.全局属性
document.execCommand()
1.设计模式下，允许允许命令，操纵可编辑内容区域的元素
2.三个参数（ aCommandName, aShowDefaultUI, aValueArgument）
3.命令 bold，foreColor，backColor。。。。
代码演示
在div中输入文字，div中的文字选中后可以进行操作
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>富文本框编辑器原理</title><style>/* 居中样式设置 */body {display: flex;justify-content: center;}div {margin-top: 50px;width: 600px;height: 500px;border: 1px solid;text-align: center;}button {border: 0;background: #9966cc;color: #ffffff;width: 100px;height: 40px;}</style></head><body><div contenteditable><p>使用 contenteditable枚举属性，表示元素能否被用户编辑</p><p><button onclick="bold()">加粗</button><button onclick="bigger()">加大</button><button onclick="changeColor()">变色</button></p>[外链图片转存失败(img-GAgGZArF-1562038612713)(http://img5./it/u=8685675,2171717858&fm=26&gp=0.jpg)]</div><script>function bold() {document.execCommand('bold')}function bigger() {document.execCommand('fontSize', null, '7')}function changeColor() {document.execCommand('foreColor', null, 'pink')}</script></body></html>
