可编辑的有序列表

需求就是用js模拟word的有序列表键盘操作，那种全选加序号的还没实现。
提取几个比较明显的特征：

• 列表项回车生成新列表项
• 数字前删除只会删除数字，而不会换到上一行
• 删除中间列表项会导致后面的重排序

还有很多细节，暂时不讨论，光是上面这些，隐藏的东西就够做了。

思路

• 可编辑区域可以用contenteditable处理
• 序号用属性+伪类的方式实现
• 在数字前删除只删除序号，有两种方法，一是重写delete的keydown，阻止默认行为，对所有情形进行判断；二是在列表项最前面加一个隐式字符​，这个charCodeAt()输出的是8203，而编辑的空格是 ，code是160，后面会用到。
  我是用第二种思路写的，但我感觉第一种更好，原因是隐式字符对删除、左右键的影响较大，这个实现的版本还没有对左右键进行重写。
• enter的keydown要加stop和prevent，完全重写。主要考虑：
  • 字符中间截断
  • 序号行回车，如有文本内容，新增序号行；否则删除当前序号
  • 非序号行回车新增非序号行
• enter的keyup不用修饰，只做序号重排处理
• delete的keydown比较复杂，prevent需要在内部分情况主动调用。
  • 前面是占位符
    • 如果是序号行，删除序号，序号重排
    • 非序号行要看上一行的状态，如果有文本内容，删除当前行，光标移到上一行末尾；如果没有文本内容，把当前行的内容移至上一行，并把光标移至上一行开头，删除当前行，且都需要阻止默认行为。
  • 还有一种情况，如果通过键盘操作越过了占位符，那么前面就什么都没有了，非序号行默认行为即可，序号行则与前面是占位符的逻辑一样

Range

这里面多次用到了光标的判断和设置，用到的是Range API，不做多介绍，详细可以参考文档。
值得一提的是，如果序号行用的是<li>some text</li>的结构，设置光标时需要将textNode作为参数而不是li。
这点坑了我好久，关系到光标的位置设置，li作为rangeContent，其offset范围只有0~1，而textNode的范围是0~text.length。

code

只上js部分，html思路里提到过，结构：ol > <li class="number" index="1、">&#8203;some text</li>

const isFst = () => {
    return getSelection().getRangeAt(0).startOffset == 1
}

const isZero = () => {
    return getSelection().getRangeAt(0).startOffset == 0
}

export default {
    methods: {
        // 获取当前行
        getCurLi() {
            return $(getSelection().getRangeAt(0).commonAncestorContainer).closest('li')
        },
        // 设置光标
        setRange(el, isStart = false) {
            let textNode = el.childNodes[0]
            let range = document.createRange()
            range.selectNodeContents(textNode)
            range.collapse()
            // isStart用来处理是否设置到首部，1是因为前面还有占位符
            if (isStart) {
                range.setStart(textNode, 1)
                range.setEnd(textNode, 1)
            }
            let sel = getSelection()
            sel.removeAllRanges()
            sel.addRange(range)
        },
        enterKeydown() {
            let li = this.getCurLi()
            let offset = getSelection().getRangeAt(0).startOffset
            let text = li.text()
            let slice
            // 中间截断
            if (isZero) {
                slice = text.substr(1)
                li.text(text.substr(0, 1))
            } else {
                slice = text.substr(offset)
                li.text(text.substr(0, offset))
            }
            // 有文本
            if (text.length > 1 && li.hasClass('number')) {
                let newLi = $(`<li class="number" index="">&#8203;${slice}</li>`).get(0)
                li.after(newLi)
                this.setRange(newLi, true)
            } else {
                // 空文本
                if (li.hasClass('number')) {
                    let preLi = li.prev()
                    li.remove()
                    let newLi = $(`<li>&#8203;</li>`).get(0)
                    preLi.after(newLi)
                    this.setRange(newLi)
                } else {
                    // 非序号行
                    let newLi = $(`<li>&#8203;${slice}</li>`).get(0)
                    li.after(newLi)
                    this.setRange(newLi, true)
                }
            }
        },
        // 设置序号
        enterKeyup() {
            let lis = $('ol > li.number')
            for (let i = 0; i < lis.length; i++) {
                lis.eq(i).attr('index', `${j + 1}、`)
            }
        },
        deleteKeydown(e) {
            let li = this.getCurLi()

            // 删到占位 防止第一位是空格
            if (isFst() && li.text()[0].charCodeAt() !== 160) {
                // 序号行删序号 重排序
                if (li.hasClass('number')) {
                    li.removeClass('number')
                    li.attr('index', '')
                    this.enterKeyup()
                } else {
                    let pre = li.prev()
                    // 前一行有文本
                    if (pre.text().length != 1) {
                        this.setRange(pre.get(0))
                        li.remove()
                        e.preventDefault()
                    } else {
                        // 无文本
                        pre.text(li.text())
                        this.setRange(pre.get(0), true)
                        li.remove()
                        e.preventDefault()
                    }
                }
            } else if (isZero()) {
                if (li.hasClass('number')) {
                    li.removeClass('number')
                    li.attr('index', '')
                    this.enterKeyup()
                    li.text(li.text().substr(1))
                    e.preventDefault()
                }
            }
        }
    }
}