lsiten-editor-v2/src/js/menus/head/index.js

/*
    menu - header
*/
import $ from '../../util/dom-core.js'
import DropList from '../droplist.js'

// 构造函数
function Head(editor) {
    this.editor = editor
    this.$elem = $('<div class="lsiten-e-menu"><i class="lsiten-e-icon-header"></i></div>')
    this.type = 'droplist'

    // 当前是否 active 状态
    this._active = false

    // 初始化 droplist
    this.droplist = new DropList(this, {
        width: 100,
        $title: $('<p>设置标题</p>'),
        type: 'list', // droplist 以列表形式展示
        list: [
            { $elem: $('<h1>标题</h1>'), value: '<h1>' },
            { $elem: $('<h4>副标题</h4>'), value: '<h4>' },
            { $elem: $('<h2>标题1</h2>'), value: '<h2>' },
            { $elem: $('<h3>标题2</h3>'), value: '<h3>' },
            { $elem: $('<h5>标题3</h5>'), value: '<h5>' },
            { $elem: $('<p>正文</p>'), value: '<div class="para-text">' }
        ],
        onClick: (value) => {
            // 注意 this 是指向当前的 Head 对象
            this._command(value)
        }
    })
}

// 原型
Head.prototype = {
    constructor: Head,

    // 执行命令
    _command: function (value) {
        const editor = this.editor

        const $selectionElem = editor.selection.getSelectionContainerElem()
        if (editor.$textElem.equal($selectionElem)) {
            // 不能选中多行来设置标题，否则会出现问题
            // 例如选中的是 <p>xxx</p><p>yyy</p> 来设置标题，设置之后会成为 <h1>xxx<br>yyy</h1> 不符合预期
            return
        }

        editor.cmd.do('formatBlock', value)
    },

    // 试图改变 active 状态
    tryChangeActive: function (e) {
        const editor = this.editor
        const $elem = this.$elem
        const reg = /^h/i
        const cmdValue = editor.cmd.queryCommandValue('formatBlock')
        if (reg.test(cmdValue)) {
            this._active = true
            $elem.addClass('lsiten-e-active')
        } else {
            this._active = false
            $elem.removeClass('lsiten-e-active')
        }
    }
}

export default Head