mdui.editor/es/menus/head.js

Material Design 样式的富文本编辑器

import 'mdui.jq/es/methods/is';
import 'mdui.jq/es/methods/text';
import MenuAbstract from '../abstracts/menuAbstract';
import { replaceHtmlSymbol } from '../utils/str';
/**
 * 标题
 */
class Head extends MenuAbstract {
    constructor() {
        super(...arguments);
        this.active = false;
    }
    onclick() {
        const $rootElem = this.selection.getRootElem();
        if (this.active) {
            // 若当前是 h2，则转换为 p
            const text = $rootElem.text();
            this.command.do('replaceRoot', text ? `<p>${text}</p>` : '<p><br></p>');
            return;
        }
        if (!$rootElem.length) {
            const range = this.selection.getRange();
            if (range.collapsed) {
                // 没有选中任何选区，在最后添加一行
                this.command.do('appendHTML', '<h2><br></h2>');
            }
            else {
                // 选中了多行，不处理
            }
            return;
        }
        // 选中单行，需要移除选区内所有子元素的标签，然后转换为 h2
        this.command.do('replaceRoot', `<h2>${replaceHtmlSymbol($rootElem.text())}</h2>`);
    }
    isActive() {
        this.active = this.selection.getRootElem().is('h2');
        return this.active;
    }
}
Head.icon = 'title';
Head.title = '标题';
Head.disable = ['bold', 'italic', 'image'];
export default Head;