mdui.editor/es/index.d.ts

Material Design 样式的富文本编辑器

import { JQ } from 'mdui.jq/es/JQ';
import 'mdui.jq/es/methods/addClass';
import 'mdui.jq/es/methods/append';
import 'mdui.jq/es/methods/attr';
import 'mdui.jq/es/methods/children';
import 'mdui.jq/es/methods/first';
import 'mdui.jq/es/methods/html';
import 'mdui.jq/es/methods/is';
import 'mdui.jq/es/methods/last';
import 'mdui.jq/es/methods/off';
import 'mdui.jq/es/methods/on';
import 'mdui.jq/es/methods/removeClass';
import 'mdui.jq/es/methods/text';
import Selector from 'mdui.jq/es/types/Selector';
import Command from './command/index';
import Menus from './menus/index';
import Selection from './selection/index';
/**
 * 菜单项
 */
declare type MENUS = 'bold' | 'italic' | 'head' | 'code' | 'ol' | 'ul' | 'link' | 'image' | 'clear_drafts' | ' ' | '|';
/**
 * 标签白名单
 */
declare type TAGS_WHITELIST = 'p' | 'strong' | 'b' | 'em' | 'i' | 'h2' | 'pre' | 'code' | 'ol' | 'ul' | 'li' | 'a' | 'img' | 'figure' | 'figcaption';
/**
 * 配置参数
 */
declare type OPTIONS = {
    /**
     * 编辑器内容变化时的回调函数
     */
    onchange?: (editor: Editor) => void;
    /**
     * 舍弃草稿后的回调
     */
    onClearDrafts?: () => void;
    /**
     * onchange 回调的延迟，单位为毫秒
     */
    onchangeTimeout?: number;
    /**
     * 编辑器的占位文本
     */
    placeholder?: string;
    /**
     * 工具栏按钮，`|` 表示纵向分割线，空格表示将两侧的内容挤向两边
     */
    menus?: MENUS[];
    /**
     * 标签白名单，不在白名单中的标签都将被过滤
     */
    tagsWhiteList?: TAGS_WHITELIST[];
    /**
     * 是否自动实时保存编辑器内容到 localStorage
     */
    autoSave?: boolean;
    /**
     * 保存编辑器内容到 localstorage 中的键名，仅 autoSave 为 true 时有效
     */
    autoSaveKey?: string;
    /**
     * 图片上传服务器的链接
     */
    imageUploadUrl?: string;
    /**
     * 允许上传的图片的最大体积，设置为 0 表示不限制
     */
    imageUploadMaxSize?: number;
    /**
     * 允许上传的图片的后缀
     */
    imageUploadSuffix?: string[];
    /**
     * 图片上传的键名，用于服务端获取图片
     */
    imageUploadName?: string;
    /**
     * 上传接口的响应值必须符合该格式。若不符合，可以使用该函数进行转换
     */
    imageUploadResponseTransform?: ((response: any) => {
        code: number;
        message?: string;
        data: {
            url: string;
        };
    }) | false;
};
/**
 * 编辑器
 */
declare class Editor {
    /**
     * 配置参数
     */
    options: OPTIONS;
    /**
     * 工具栏元素
     */
    $toolbar: JQ;
    /**
     * 内容区域元素
     */
    $container: JQ;
    /**
     * 命令实例
     */
    command: Command;
    /**
     * 选区实例
     */
    selection: Selection;
    /**
     * 菜单实例
     */
    menus: Menus;
    /**
     * 输入内容时执行的函数
     */
    change: (() => void) | null;
    /**
     * 初始化编辑器
     * @param toolbar 工具栏的 CSS 选择器、或 DOM 元素、或 JQ 对象
     * @param container 编辑器内容的 CSS 选择器、或 DOM 元素、或 JQ 对象
     * @param options 配置参数
     */
    constructor(toolbar: Selector | HTMLElement | HTMLElement[], container: Selector | HTMLElement | HTMLElement[], options?: OPTIONS);
    /**
     * 初始化选区，将光标定位到内容尾部
     * @param newLine 是否在内容后面添加一个空行
     */
    initSelection(newLine?: boolean): void;
    /**
     * 获取编辑器 html
     */
    getHTML(): string;
    /**
     * 设置编辑器 html
     * @param html
     */
    setHTML(html: string): void;
    /**
     * 获取编辑器纯文本内容
     */
    getText(): string;
    /**
     * 设置编辑器纯文本内容
     * @param text
     */
    setText(text: string): void;
    /**
     * 清空编辑器内容
     */
    clear(): void;
    /**
     * 聚焦到输入框
     */
    focus(): void;
    /**
     * 绑定事件
     * @private
     */
    private bindEvent;
    /**
     * 更新 placeholder 显示状态
     */
    private updatePlaceholder;
    /**
     * 绑定 onchange 事件
     * @private
     */
    private bindChange;
    /**
     * 实时保存选区
     */
    private saveRangeRealTime;
    /**
     * 粘贴文字、图片事件
     */
    private pasteHandler;
    /**
     * 按删除键时的处理
     */
    private deleteHandler;
    /**
     * 在 $container 上点击的处理
     * @private
     */
    private containerClickHandler;
    /**
     * 拖拽事件
     */
    private dragHandler;
    /**
     * Ctrl + Z 处理
     */
    private undoHandler;
}
export default Editor;