mdui.editor/es/menus/index.js

Material Design 样式的富文本编辑器

import $ from 'mdui.jq/es/$';
import each from 'mdui.jq/es/functions/each';
import unique from 'mdui.jq/es/functions/unique';
import 'mdui.jq/es/methods/addClass';
import 'mdui.jq/es/methods/append';
import 'mdui.jq/es/methods/appendTo';
import 'mdui.jq/es/methods/on';
import 'mdui.jq/es/methods/prop';
import 'mdui.jq/es/methods/removeClass';
import CommonAbstract from '../abstracts/commonAbstract';
import Bold from './bold';
import ClearDrafts from './clear_drafts';
import Code from './code';
import Head from './head';
import Image from './image';
import Italic from './italic';
import Link from './link';
import Ol from './ol';
import Ul from './ul';
const MenuConstructors = {
    bold: Bold,
    clear_drafts: ClearDrafts,
    code: Code,
    head: Head,
    image: Image,
    italic: Italic,
    link: Link,
    ol: Ol,
    ul: Ul,
};
class Menus extends CommonAbstract {
    constructor(editor) {
        super(editor);
        /**
         * { 按钮名称: 按钮实例 }
         */
        this.menus = {};
        this.init();
    }
    /**
     * 初始化菜单
     * @private
     */
    init() {
        this.editor.options.menus.forEach((name) => {
            // 插入分隔符
            if (name === '|') {
                this.$toolbar.append('<div class="mdui_editor-toolbar-divider"></div>');
                return;
            }
            // 插入 spacer
            if (name === ' ') {
                this.$toolbar.append('<div class="mdui-toolbar-spacer"></div>');
                return;
            }
            const MenuConstructor = MenuConstructors[name];
            if (!MenuConstructor || typeof MenuConstructor !== 'function') {
                return;
            }
            // 创建按钮
            const $button = $(`<button class="mdui-btn mdui_editor-toolbar-menu mdui_editor-toolbar-menu-${name}" type="button" title="${MenuConstructor.title}">` +
                `<i class="mdui-icon material-icons">${MenuConstructor.icon}</i>` +
                '</button>').appendTo(this.$toolbar);
            // 实例化菜单项
            const menu = new MenuConstructor(this.editor, $button);
            this.menus[name] = menu;
            const onClick = () => {
                if (this.selection.getRange() === null) {
                    return;
                }
                menu.onclick();
            };
            $button.on('click', onClick);
        });
    }
    /**
     * 修改菜单按钮状态
     */
    changeStatus() {
        let disableMenus = [];
        each(this.menus, (name, menu) => {
            setTimeout(() => {
                // 切换激活状态
                if (menu.isActive()) {
                    menu.$button.addClass('mdui_editor-toolbar-menu-active');
                    if (MenuConstructors[name].disable) {
                        disableMenus = disableMenus.concat(MenuConstructors[name].disable);
                    }
                }
                else {
                    menu.$button.removeClass('mdui_editor-toolbar-menu-active');
                }
                // 禁用按钮，遍历到最后一个按钮再统一处理
                if (name ===
                    this.editor.options.menus[this.editor.options.menus.length - 1]) {
                    disableMenus = unique(disableMenus);
                    each(this.menus, (name, menu) => {
                        menu.$button.prop('disabled', disableMenus.indexOf(name) > -1);
                    });
                }
            }, 0);
        });
    }
}
export default Menus;