mdui.editor/es/menus/link.js

Material Design 样式的富文本编辑器

import 'mdui.jq/es/methods/after';
import 'mdui.jq/es/methods/attr';
import 'mdui.jq/es/methods/find';
import 'mdui.jq/es/methods/is';
import { returnFalse } from 'mdui.jq/es/utils';
import 'mdui/es/components/dialog/prompt';
import 'mdui/es/components/textfield';
import mdui from 'mdui/es/mdui';
import MenuAbstract from '../abstracts/menuAbstract';
/**
 * 添加链接
 */
class Link extends MenuAbstract {
    onclick() {
        const $curElem = this.selection.getContainerElem();
        let defaultUrl = '';
        if ($curElem.is('a')) {
            // 当前选区为 a 元素，则选中整个 a 元素
            this.selection.createRangeByElem($curElem, false, true);
            defaultUrl = $curElem.attr('href') || '';
        }
        const dialog = mdui.prompt('请输入链接地址', (url, dialog) => {
            if (!url) {
                // 链接为空，移除链接
                this.command.do('unlink');
                dialog.close();
                return;
            }
            const input = dialog.$element.find('.mdui-textfield-input')[0];
            if (input.validity && input.validity.valid) {
                this.command.do('createLink', url);
                dialog.close();
                return;
            }
        }, returnFalse, {
            confirmText: '确认',
            cancelText: '取消',
            defaultValue: defaultUrl,
            confirmOnEnter: true,
            closeOnConfirm: false,
        });
        dialog.$element
            .find('.mdui-textfield-input')
            .attr('type', 'text')
            .attr('pattern', '^(https?|ftp|file)://[\\S]+\\.[\\S]+$')
            .after('<div class="mdui-textfield-error">链接格式错误</div>');
        mdui.updateTextFields(dialog.$element.find('.mdui-textfield'));
        dialog.handleUpdate();
    }
    isActive() {
        return this.selection.getContainerElem().is('a');
    }
}
Link.icon = 'link';
Link.title = '插入链接';
Link.disable = ['image'];
export default Link;