核心属性 / 方法
html属性 用来设置 或 返回元素的内容是否可以被编辑
语法：
<p contentEditable = 'true | false' >...</p>
HTMLElementObject.contentEditable = true | false
HTMLElementObject.isContentEditable() // 获取元素是否是可编辑状态
操作可编辑元素的语法糖 大多数文本编辑命令都可执行
语法：
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="red" onclick="changeStyle(this.dataset)">color</button>
<button data-command="justifyCenter" onclick="changeStyle(this.dataset)">居中对齐</button>
<button data-command="justifyLeft" onclick="changeStyle(this.dataset)">左对齐</button>
<button data-command="justifyRight" onclick="changeStyle(this.dataset)">右对齐</button>
<br />
<p contentEditable='true'>犹豫就会败北</p>
<p contentEditable='true'>果断就会白给</p>
<script>
function changeStyle(data) {
var attr = data.command
var value = data.value
value ? document.execCommand(attr, false, value) : document.execCommand(attr, false, null)
}
</script>
</body>
Selection对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。
语法：
var selObj = document.getSelection() // window | document 获取Selection对象
var selStr = selObj.toString() // 获取选中区域的 ‘纯文本’
document.onselectionchange = function(){ // 监听鼠标锚点的变化
console.log( document.getSelection() )
/**
* Selection = {
* anchorNode: node 选取起点所在节点，
* anchorOffset: num 起点偏移量,
* focusNode: node 选取终点所在节点,
* focusOffset: num 终点偏移量,
* isCollapsed: bool 起始点是否在同一位置,
* rangeCount: 返回该选区所包含的连续范围的数量
*
* }
*/
}
表示一个包含节点与文本节点的一部分的文档片段
语法:
// 创建一个文档范围
var range = document.createRange()
var range = new Range()
// 获取选中的文档范围
var range = document.getSelection().getRangeAt(0)
/**
* Range = {
* collapsed : 起始点位置是否相同,
* commonAncetorContainer : 选中区域所在的完整节点, eg: <b> hhh<i>5[5</i>6]6</b> -> <b> hhh<i>55</i>66</b>
* endContainer : 包含range的终点节点, -> 66
* endOffset : 返回一个表示 Range 终点在 endContainer 中的位置的数字。 -> 1 （选中的6在66中排位第几）
* }
*
* Range.cloneContents() 返回一个包含 Range 中所有节点的文档片段
* Range.deleteContents() 移除range包含的内容
* Range.extractContents() 把 Range 的内容从文档树移动到一个文档片段中
* Range.insertNode(Node) 在range起点处插入一个节点
* Range.surroundContents(newNode) 将range内容移动到一个新的节点中
*/
利用 range & selection 接口实现的简易编辑器
有bug
<body>
<button data-command="b" onclick="changeStyle(dataset)"> B </button>
<button data-command="i" onclick="changeStyle(dataset)"> I </button>
<button data-command="h1" onclick="changeStyle(dataset)"> h1 </button>
<button data-value="textAlign:center" onclick="changeStyle(dataset)"> 居中</button>
<button data-value="textAlign:right" onclick="changeStyle(dataset)"> 居右</button>
<button data-value="textAlign:left" onclick="changeStyle(dataset)"> 居左</button>
<p contentEditable='true'>犹豫<b>就会败北<i>52</i>墨菲</b>定律</p>
<p contentEditable='true'>薛定谔的猫
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
