核心属性 / 方法
contentEditable
html属性 用来设置 或 返回元素的内容是否可以被编辑
语法:
<p contentEditable = 'true | false' >...</p>
HTMLElementObject.contentEditable = true | false
HTMLElementObject.isContentEditable() // 获取元素是否是可编辑状态
document.execCommand()
操作可编辑元素的语法糖 大多数文本编辑命令都可执行
语法:
bool = document.execCommand( aCommandName,ashowDefaultUI,aValueArgument )
/**
* aCommandName : 命令的名称,可用命令参考mdn
* aShowDefaultUI : 是否展示用户界面 | false
* aValueArgument : 一些命令需要的额外参数如字体颜色/大小 | null
*/
借用语法糖实现的编辑器
<body>
<button data-command='bold' onclick="changeStyle(this.dataset)">B</button>
<button data-command="italic" onclick="changeStyle(this.dataset)">I</button>
<button data-command="fontSize" data-value="7" onclick="changeStyle(this.dataset)">fontSize</button>
<button data-command="foreColor" data-value=