提交 c7ff500a authored 作者: 钟是志's avatar 钟是志

使用WangEditor 作为富文本编辑器

上级 63928918
/**
* @description 命令配置项
* @author wangfupeng
*/
declare const _default: {
styleWithCSS: boolean;
};
export default _default;
/**
* @description 事件配置
* @author wangfupeng
*/
import { EMPTY_FN } from '../utils/const';
declare const _default: {
onchangeTimeout: number;
onchange: typeof EMPTY_FN;
onfocus: typeof EMPTY_FN;
onblur: typeof EMPTY_FN;
};
export default _default;
/**
* @description 历史记录 - 数据缓存的模式
* @author fangzhicong
*/
/**
* 是否为兼容模式。返回 true 表示当前使用兼容(内容备份)模式,否则使用标准(差异备份)模式
*/
declare function compatibleMode(): boolean;
declare const _default: {
compatibleMode: typeof compatibleMode;
historyMaxSize: number;
};
export default _default;
/**
* @description 图片相关的配置
* @author wangfupeng
*/
import { EMPTY_FN } from '../utils/const';
export declare type UploadImageHooksType = {
before?: Function;
success?: Function;
fail?: Function;
error?: Function;
timeout?: Function;
customInsert?: Function;
};
declare const _default: {
showLinkImg: boolean;
linkImgCallback: typeof EMPTY_FN;
uploadImgServer: string;
uploadImgShowBase64: boolean;
uploadImgMaxSize: number;
uploadImgMaxLength: number;
uploadFileName: string;
uploadImgParams: {};
uploadImgParamsWithUrl: boolean;
uploadImgHeaders: {};
uploadImgHooks: {};
uploadImgTimeout: number;
withCredentials: boolean;
customUploadImg: null;
};
export default _default;
/**
* @description 编辑器配置
* @author wangfupeng
*/
import { EmotionsType, FontSizeConfType, IndentationType } from './menus';
import { UploadImageHooksType } from './image';
export declare type DicType = {
[key: string]: string;
};
export declare type ConfigType = {
height: number;
languageType: string[];
languageTab: string;
menus: string[];
fontNames: string[];
lineHeights: string[];
indentation: IndentationType;
fontSizes: FontSizeConfType;
colors: string[];
emotions: EmotionsType[];
zIndex: number;
onchange: Function;
onfocus: Function;
onblur: Function;
onchangeTimeout: number;
pasteFilterStyle: boolean;
pasteIgnoreImg: boolean;
pasteTextHandle: Function;
styleWithCSS: boolean;
linkImgCallback: Function;
placeholder: string;
zIndexFullScreen: number;
showFullScreen: boolean;
showLinkImg: boolean;
uploadImgServer: string;
uploadImgShowBase64: boolean;
uploadImgMaxSize: number;
uploadImgMaxLength: number;
uploadFileName: string;
uploadImgParams: DicType;
uploadImgParamsWithUrl: boolean;
uploadImgHeaders: DicType;
uploadImgHooks: UploadImageHooksType;
uploadImgTimeout: number;
withCredentials: boolean;
customUploadImg: Function | null;
customAlert: Function | null;
lang: string;
languages: Resource;
linkCheck: Function;
linkImgCheck: Function;
compatibleMode: () => boolean;
historyMaxSize: number;
focus: boolean;
};
export declare type Resource = {
[language: string]: ResourceLanguage;
};
export declare type ResourceLanguage = {
[namespace: string]: ResourceKey;
};
export declare type ResourceKey = string | {
[key: string]: any;
};
declare const defaultConfig: any;
export default defaultConfig;
declare const _default: {
lang: string;
languages: {
'zh-CN': {
wangEditor: {
插入: string;
默认: string;
创建: string;
修改: string;
: string;
请输入正文: string;
menus: {
dropListMenu: {
设置标题: string;
背景颜色: string;
文字颜色: string;
设置字号: string;
设置字体: string;
设置缩进: string;
对齐方式: string;
设置行高: string;
序列: string;
head: {
正文: string;
};
indent: {
增加缩进: string;
减少缩进: string;
};
justify: {
靠左: string;
居中: string;
靠右: string;
两端: string;
};
list: {
无序列表: string;
有序列表: string;
};
};
panelMenus: {
emoticon: {
默认: string;
新浪: string;
emoji: string;
手势: string;
};
image: {
图片链接: string;
上传图片: string;
网络图片: string;
};
link: {
链接: string;
链接文字: string;
取消链接: string;
查看链接: string;
};
video: {
插入视频: string;
};
table: {
: string;
: string;
: string;
表格: string;
添加行: string;
删除行: string;
添加列: string;
删除列: string;
设置表头: string;
取消表头: string;
插入表格: string;
删除表格: string;
};
code: {
删除代码: string;
修改代码: string;
插入代码: string;
};
};
};
validate: {
张图片: string;
大于: string;
图片链接: string;
不是图片: string;
返回结果: string;
上传图片超时: string;
上传图片错误: string;
上传图片失败: string;
插入图片错误: string;
一次最多上传: string;
下载链接失败: string;
图片验证未通过: string;
服务器返回状态: string;
上传图片返回结果错误: string;
请替换为支持的图片类型: string;
您插入的网络图片无法识别: string;
您刚才插入的图片链接未通过编辑器校验: string;
};
};
};
en: {
wangEditor: {
插入: string;
默认: string;
创建: string;
修改: string;
: string;
请输入正文: string;
menus: {
dropListMenu: {
设置标题: string;
背景颜色: string;
文字颜色: string;
设置字号: string;
设置字体: string;
设置缩进: string;
对齐方式: string;
设置行高: string;
序列: string;
head: {
正文: string;
};
indent: {
增加缩进: string;
减少缩进: string;
};
justify: {
靠左: string;
居中: string;
靠右: string;
两端: string;
};
list: {
无序列表: string;
有序列表: string;
};
};
panelMenus: {
emoticon: {
默认: string;
新浪: string;
emoji: string;
手势: string;
};
image: {
图片链接: string;
上传图片: string;
网络图片: string;
};
link: {
链接: string;
链接文字: string;
取消链接: string;
查看链接: string;
};
video: {
插入视频: string;
};
table: {
: string;
: string;
: string;
表格: string;
添加行: string;
删除行: string;
添加列: string;
删除列: string;
设置表头: string;
取消表头: string;
插入表格: string;
删除表格: string;
};
code: {
删除代码: string;
修改代码: string;
插入代码: string;
};
};
};
validate: {
张图片: string;
大于: string;
图片链接: string;
不是图片: string;
返回结果: string;
上传图片超时: string;
上传图片错误: string;
上传图片失败: string;
插入图片错误: string;
一次最多上传: string;
下载链接失败: string;
图片验证未通过: string;
服务器返回状态: string;
上传图片返回结果错误: string;
请替换为支持的图片类型: string;
您插入的网络图片无法识别: string;
您刚才插入的图片链接未通过编辑器校验: string;
};
};
};
};
};
export default _default;
/**
* @description 菜单配置
* @author wangfupeng
*/
export declare type EmotionsContentType = {
alt: string;
src: string;
};
export declare type EmotionsType = {
title: string;
type: string;
content: Array<EmotionsContentType | string>;
};
export declare type FontSizeConfType = {
[key: string]: {
name: string;
value: string;
};
};
export interface IndentationOptions {
value: number;
unit: string;
}
export declare type IndentationType = string | IndentationOptions;
declare const _default: {
menus: string[];
fontNames: string[];
fontSizes: {
'x-small': {
name: string;
value: string;
};
small: {
name: string;
value: string;
};
normal: {
name: string;
value: string;
};
large: {
name: string;
value: string;
};
'x-large': {
name: string;
value: string;
};
'xx-large': {
name: string;
value: string;
};
'xxx-large': {
name: string;
value: string;
};
};
colors: string[];
languageType: string[];
languageTab: string;
/**
* 表情配置菜单
* 如果为emoji表情直接作为元素插入
* emoticon:Array<EmotionsType>
*/
emotions: ({
title: string;
type: string;
content: {
alt: string;
src: string;
}[];
} | {
title: string;
type: string;
content: string[];
})[];
lineHeights: string[];
undoLimit: number;
indentation: string;
};
export default _default;
/**
* @description 粘贴,配置文件
* @author wangfupeng
*/
declare const _default: {
pasteFilterStyle: boolean;
pasteIgnoreImg: boolean;
pasteTextHandle: (content: string) => string;
};
export default _default;
/**
* @description 样式配置
* @author wangfupeng
*/
declare const _default: {
zIndex: number;
};
export default _default;
/**
* @description 默认常量配置
* @author xiaokyo
*/
declare const _default: {
focus: boolean;
height: number;
placeholder: string;
zIndexFullScreen: number;
showFullScreen: boolean;
};
export default _default;
/**
* @description 编辑器 change 事件
* @author fangzhicong
*/
import Editor from '../index';
import Mutation from '../../utils/observer/mutation';
/**
* Change 实现
*/
export default class Change extends Mutation {
editor: Editor;
/**
* 变化的数据集合
*/
private data;
/**
* 异步保存数据
*/
private asyncSave;
constructor(editor: Editor);
/**
* 保存变化的数据并发布 change event
*/
private save;
/**
* 发布 change event
*/
emit(): void;
observe(): void;
}
/**
* @description 封装 document.execCommand
* @author wangfupeng
*/
import { DomElement } from '../utils/dom-core';
import Editor from './index';
declare class Command {
editor: Editor;
constructor(editor: Editor);
/**
* 执行富文本操作的命令
* @param name name
* @param value value
*/
do(name: string): void;
do(name: string, value: string): void;
do(name: string, value: DomElement): void;
/**
* 插入 html
* @param html html 字符串
*/
private insertHTML;
/**
* 插入 DOM 元素
* @param $elem DOM 元素
*/
private insertElem;
/**
* 执行 document.execCommand
* @param name name
* @param value value
*/
private execCommand;
/**
* 执行 document.queryCommandValue
* @param name name
*/
queryCommandValue(name: string): string;
/**
* 执行 document.queryCommandState
* @param name name
*/
queryCommandState(name: string): boolean;
/**
* 执行 document.queryCommandSupported
* @param name name
*/
queryCommandSupported(name: string): boolean;
}
export default Command;
/**
* @description disable 内容编辑
* @author lichunlin
*/
import Editor from '../index';
import '../../assets/style/disable.less';
declare function disable(editor: Editor): void;
declare function enable(editor: Editor): void;
declare const _default: {
disable: typeof disable;
enable: typeof enable;
};
export default _default;
/**
* @description 整合差异备份和内容备份,进行统一管理
* @author fangzhicong
*/
import NodeCache from './node';
import HtmlCache from './html';
import Editor from '../../index';
export default class ContentCache {
editor: Editor;
/**
* 内容备份的管理器
*/
cache?: HtmlCache | NodeCache;
constructor(editor: Editor);
/**
* 初始化绑定
*/
observe(): void;
/**
* 保存
*/
save(mutations: MutationRecord[]): void;
/**
* 撤销
*/
revoke(): boolean | undefined;
/**
* 恢复
*/
restore(): boolean | undefined;
}
/**
* @description 完整的内容备份,每次变化都将备份整个编辑器的内容
* @author fangzhicong
*/
import Editor from '../../../index';
export default class HtmlCache {
editor: Editor;
private data;
constructor(editor: Editor);
/**
* 初始化绑定
*/
observe(): void;
/**
* 保存
*/
save(): this;
/**
* 撤销
*/
revoke(): boolean;
/**
* 恢复
*/
restore(): boolean;
}
/**
* @description 数据整理
* @author fangzhicong
*/
import { Compile } from '../type';
/**
* 将 MutationRecord 转换成自定义格式的数据
*/
export default function compile(data: MutationRecord[]): Compile[];
/**
* @description 撤销 - 逆向操作,删除节点
* @author fangzhicong
*/
import { Compile } from '../type';
export declare function revoke(data: Compile[]): void;
export declare function restore(data: Compile[]): void;
/**
* @description 差异备份
* @author fangzhicong
*/
import Cache from '../../../../utils/data-structure/cache';
import { Compile } from '../type';
import Editor from '../../../index';
export default class NodeCache extends Cache<Compile[]> {
editor: Editor;
constructor(editor: Editor);
observe(): void;
/**
* 编译并保存数据
*/
compile(data: MutationRecord[]): this;
/**
* 撤销
*/
revoke(): boolean;
/**
* 恢复
*/
restore(): boolean;
}
/**
* @description 记录 range 变化
* @author fangzhicong
*/
import Cache from '../../../../utils/data-structure/cache';
import Editor from '../../../index';
import { RangeItem } from '../type';
/**
* 编辑区 range 缓存管理器
*/
export default class RangeCache extends Cache<[RangeItem, RangeItem]> {
editor: Editor;
/**
* 变化前的 Range 数据
*/
private lastRange;
/**
* 有效选区的根节点
*/
private root;
updateLastRange: Function;
constructor(editor: Editor);
/**
* 获取 Range 对象
*/
get rangeHandle(): Range;
/**
* 初始化绑定
*/
observe(): void;
/**
* 保存 Range
*/
save(): this;
/**
* 设置 Range,在 撤销/恢复 中调用
* @param range 缓存的 Range 数据
*/
set(range: RangeItem | undefined): boolean;
/**
* 撤销
*/
revoke(): boolean;
/**
* 恢复
*/
restore(): boolean;
}
/**
* @description 记录 scrollTop
* @author fangzhicong
*/
import Cache from '../../../../utils/data-structure/cache';
import Editor from '../../../index';
import { ScrollItem } from '../type';
export default class ScrollCache extends Cache<ScrollItem> {
editor: Editor;
/**
* 上一次的 scrollTop
*/
private last;
/**
* 编辑区容器元素节点
*/
private target;
constructor(editor: Editor);
/**
* 给编辑区容器绑定 scroll 事件
*/
observe(): void;
/**
* 保存 scrollTop 值
*/
save(): this;
/**
* 撤销
*/
revoke(): boolean;
/**
* 恢复
*/
restore(): boolean;
}
/**
* @description 定义数据类型
* @author fangzhicong
*/
/**
* 差异备份:节点相对位置信息
*/
export interface TargetPosition {
type: 'before' | 'after' | 'parent';
target: Node;
}
/**
* 差异备份:Node 节点
*/
export interface DiffNodes {
add?: Node[];
remove?: Node[];
}
/**
* 差异备份:处理后的 MutationRecord 对象
*/
export interface Compile {
type: 'node' | 'text' | 'attr';
target: Element | Node;
attr: string;
value: string;
oldValue: string;
nodes: DiffNodes;
position: TargetPosition;
}
/**
* Range 缓存
*/
export interface RangeItem {
start: [Node, number];
end: [Node, number];
root: Node;
collapsed: boolean;
}
/**
* scroll 数据。[last-scrollTop, current-scrollTop]
*/
export declare type ScrollItem = [number, number];
/**
* @description 历史记录
* @author fangzhicong
*/
import Editor from '../index';
/**
* 历史记录(撤销、恢复)
*/
export default class History {
editor: Editor;
private content;
private scroll;
private range;
constructor(editor: Editor);
/**
* 获取缓存中的数据长度。格式为:[正常的数据的条数,被撤销的数据的条数]
*/
get size(): number[];
/**
* 初始化绑定。在 editor.create() 结尾时调用
*/
observe(): void;
/**
* 保存数据
*/
save(mutations: MutationRecord[]): void;
/**
* 撤销
*/
revoke(): void;
/**
* 恢复
*/
restore(): void;
}
/**
* @description 编辑器 class
* @author wangfupeng
*/
import { DomElement } from '../utils/dom-core';
import { ConfigType } from '../config';
import SelectionAndRangeAPI from './selection';
import CommandAPI from './command';
import Text from '../text/index';
import Menus from '../menus/index';
import ZIndex from './z-index';
import Change from './change/index';
import History from './history/index';
import BtnMenu from '../menus/menu-constructors/BtnMenu';
import DropList from '../menus/menu-constructors/DropList';
import DropListMenu from '../menus/menu-constructors/DropListMenu';
import Panel from '../menus/menu-constructors/Panel';
import PanelMenu from '../menus/menu-constructors/PanelMenu';
import Tooltip from '../menus/menu-constructors/Tooltip';
declare class Editor {
static $: Function;
static BtnMenu: typeof BtnMenu;
static DropList: typeof DropList;
static DropListMenu: typeof DropListMenu;
static Panel: typeof Panel;
static PanelMenu: typeof PanelMenu;
static Tooltip: typeof Tooltip;
id: string;
toolbarSelector: string;
textSelector: string | undefined;
config: ConfigType;
$toolbarElem: DomElement;
$textContainerElem: DomElement;
$textElem: DomElement;
toolbarElemId: string;
textElemId: string;
isFocus: boolean;
isComposing: boolean;
isCompatibleMode: boolean;
selection: SelectionAndRangeAPI;
cmd: CommandAPI;
txt: Text;
menus: Menus;
i18next: any;
highlight: any;
zIndex: ZIndex;
change: Change;
history: History;
private beforeDestroyHooks;
/**
* 构造函数
* @param toolbarSelector 工具栏 DOM selector
* @param textSelector 文本区域 DOM selector
*/
constructor(toolbarSelector: string, textSelector?: string);
/**
* 初始化选区
* @param newLine 新建一行
*/
initSelection(newLine?: boolean): void;
/**
* 创建编辑器实例
*/
create(): void;
/**
* 提供给用户添加销毁前的钩子函数
* @param fn 钩子函数
*/
beforeDestroy(fn: Function): Editor;
/**
* 销毁当前编辑器实例
*/
destroy(): void;
/**
* 将编辑器设置为全屏
*/
fullScreen(): void;
/**
* 将编辑器退出全屏
*/
unFullScreen(): void;
/**
* 禁用api
*/
disable(): void;
/**
* 启用api
*/
enable(): void;
}
export default Editor;
/**
* @description 绑定编辑器事件 change blur focus
* @author wangfupeng
*/
import Editor from '../index';
declare function bindEvent(editor: Editor): void;
export default bindEvent;
/**
* @description 国际化 初始化
* @author tonghan
* i18next 是使用 JavaScript 编写的国际化框架
* i18next 提供了标准的i18n功能,例如(复数,上下文,插值,格式)等
* i18next 文档地址: https://www.i18next.com/overview/getting-started
*/
import Editor from '../index';
declare function i18nextInit(editor: Editor): void;
export default i18nextInit;
/**
* @description 初始化编辑器 DOM 结构
* @author wangfupeng
*/
import Editor from '../index';
export default function (editor: Editor): void;
/**
* @description 初始化编辑器选区,将光标定位到文档末尾
* @author wangfupeng
*/
import Editor from '../index';
/**
* 初始化编辑器选区,将光标定位到文档末尾
* @param editor 编辑器实例
* @param newLine 是否新增一行
*/
declare function initSelection(editor: Editor, newLine?: boolean): void;
export default initSelection;
/**
* @description 全屏功能
* @author xiaokyo
*/
import Editor from '../index';
import '../../assets/style/full-screen.less';
/**
* 设置全屏
* @param editor 编辑器实例
*/
export declare const setFullScreen: (editor: Editor) => void;
/**
* 取消全屏
* @param editor 编辑器实例
*/
export declare const setUnFullScreen: (editor: Editor) => void;
/**
* 初始化全屏功能
* @param editor 编辑器实例
*/
declare const initFullScreen: (editor: Editor) => void;
export default initFullScreen;
/**
* @description 选取范围所有顶级(段落)节点
* @author tonghan
*/
import { DomElement } from '../../utils/dom-core';
import Editor from '../index';
declare class SelectionRangeTopNodes {
editor: Editor;
$nodeList: DomElement[];
$startElem: DomElement | undefined;
$endElem: DomElement | undefined;
/**
* 构造函数
* @param editor
*/
constructor(editor: Editor);
/**
* 初始化
*/
init(): void;
/**
* 添加 节点 到nodeList
* @param $node 节点
*/
private addNodeList;
/**
* 是否是 选区结束 节点
* @param $node 节点
*/
private isEndElem;
/**
* 获取当前节点的下一个兄弟节点
* @param $node 节点
*/
private getNextSibling;
/**
* 记录节点 - 从选区开始节点开始 一直到匹配到选区结束节点为止
* @param $node 节点
*/
private recordSelectionNodes;
/**
* 获取 选中节点列表
*/
getSelectionNodes(): DomElement[];
}
/**
* 导出
*/
export default SelectionRangeTopNodes;
/**
* @description selection range API
* @author wangfupeng
*/
import { DomElement } from '../utils/dom-core';
import Editor from './index';
declare class SelectionAndRange {
editor: Editor;
private _currentRange;
constructor(editor: Editor);
/**
* 获取当前 range
*/
getRange(): Range | null | undefined;
/**
* 保存选区范围
* @param _range 选区范围
*/
saveRange(_range?: Range): void;
/**
* 折叠选区范围
* @param toStart true 开始位置,false 结束位置
*/
collapseRange(toStart?: boolean): void;
/**
* 获取选区范围内的文字
*/
getSelectionText(): string;
/**
* 获取选区范围的 DOM 元素
* @param range 选区范围
*/
getSelectionContainerElem(range?: Range): DomElement | undefined;
/**
* 选区范围开始的 DOM 元素
* @param range 选区范围
*/
getSelectionStartElem(range?: Range): DomElement | undefined;
/**
* 选区范围结束的 DOM 元素
* @param range 选区范围
*/
getSelectionEndElem(range?: Range): DomElement | undefined;
/**
* 选区是否为空(没有选择文字)
*/
isSelectionEmpty(): boolean;
/**
* 恢复选区范围
*/
restoreSelection(): void;
/**
* 创建一个空白(即 &#8203 字符)选区
*/
createEmptyRange(): void;
/**
* 根据 DOM 元素设置选区
* @param $elem DOM 元素
* @param toStart true 开始位置,false 结束位置
* @param isContent 是否选中 $elem 的内容
*/
createRangeByElem($elem: DomElement, toStart?: boolean, isContent?: boolean): void;
/**
* 获取 当前 选取范围的 顶级(段落) 元素
* @param $editor
*/
getSelectionRangeTopNodes(editor: Editor): DomElement[];
/**
* 移动光标位置
* @param {Node} node 元素节点
*/
moveCursor(node: Node): void;
}
export default SelectionAndRange;
/**
* @description 上传进度条
* @author wangfupeng
*/
import Editor from '../../editor/index';
declare class Progress {
private editor;
private $bar;
private $textContainer;
private isShow;
private time;
private timeoutId;
constructor(editor: Editor);
/**
* 显示进度条
* @param progress 进度百分比
*/
show(progress: number): void;
/**
* 隐藏
*/
private hide;
}
export default Progress;
/**
* @description 上传的核心方法
* @author wangfupeng
*/
import { DicType } from '../../config/index';
declare type PostOptionType = {
timeout?: number;
formData?: FormData;
headers?: DicType;
withCredentials?: boolean;
onTimeout?: Function;
onProgress?: Function;
beforeSend?: Function;
onError?: Function;
onFail?: Function;
onSuccess: Function;
};
/**
* 发送 post 请求(用于文件上传)
* @param url url
* @param option 配置项
*/
declare function post(url: string, option: PostOptionType): XMLHttpRequest | string;
export default post;
/**
* @description z-index 管理器
* @author fangzhicong
*/
import Editor from '../index';
export default class ZIndex {
private tier;
private baseZIndex;
get(tierName?: string): number;
init(editor: Editor): void;
}
/**
* @description 背景颜色 BackColor
* @author lkw
*
*/
import DropListMenu from '../menu-constructors/DropListMenu';
import Editor from '../../editor/index';
import { MenuActive } from '../menu-constructors/Menu';
declare class BackColor extends DropListMenu implements MenuActive {
constructor(editor: Editor);
/**
* 执行命令
* @param value value
*/
command(value: string): void;
/**
* 尝试修改菜单激活状态
*/
tryChangeActive(): void;
}
export default BackColor;
/**
* @description 加粗
* @author wangfupeng
*/
import BtnMenu from '../menu-constructors/BtnMenu';
import Editor from '../../editor/index';
import { MenuActive } from '../menu-constructors/Menu';
declare class Bold extends BtnMenu implements MenuActive {
constructor(editor: Editor);
/**
* 点击事件
*/
clickHandler(): void;
/**
* 尝试修改菜单激活状态
*/
tryChangeActive(): void;
}
export default Bold;
/**
* @description 绑定链接元素的事件,入口
* @author lkw
*/
import Editor from '../../../editor/index';
/**
* 绑定事件
* @param editor 编辑器实例
*/
declare function bindEvent(editor: Editor): void;
export default bindEvent;
/**
* @description tooltip 事件
* @author lkw
*/
import Editor from '../../../editor/index';
/**
* 绑定 tooltip 事件
* @param editor 编辑器实例
*/
export default function bindTooltipEvent(editor: Editor): void;
/**
* @description code 菜单 panel tab 配置
* @author lkw
*/
import editor from '../../editor/index';
import { PanelConf } from '../menu-constructors/Panel';
export default function (editor: editor, text: string, languageType: string): PanelConf;
/**
* @description 代码 菜单
* @author lkw
*/
import PanelMenu from '../menu-constructors/PanelMenu';
import Editor from '../../editor/index';
import { MenuActive } from '../menu-constructors/Menu';
export declare function formatCodeHtml(editor: Editor, html: string): string;
declare class Code extends PanelMenu implements MenuActive {
constructor(editor: Editor);
/**
* 插入行内代码
* @param text
* @return null
*/
private insertLineCode;
/**
* 菜单点击事件
*/
clickHandler(): void;
/**
* 创建 panel
* @param text 代码文本
* @param languageType 代码类型
*/
createPanel(text: string, languageType: string): void;
/**
* 尝试修改菜单 active 状态
*/
tryChangeActive(): void;
}
export default Code;
/**
* @description 检查选区是否在代码中,即菜单是否应该 active
* @author lkw
*/
import Editor from '../../editor/index';
declare function isActive(editor: Editor): boolean;
export default isActive;
/**
* @description 表情菜单 panel配置
* @author liuwei
*/
import editor from '../../editor/index';
import { PanelConf } from '../menu-constructors/Panel';
export default function (editor: editor): PanelConf;
import Editor from '../../editor/index';
import PanelMenu from '../menu-constructors/PanelMenu';
import { MenuActive } from '../menu-constructors/Menu';
declare class Emoticon extends PanelMenu implements MenuActive {
constructor(editor: Editor);
/**
* 创建 panel
*/
private createPanel;
/**
* 菜单表情点击事件
*/
clickHandler(): void;
tryChangeActive(): void;
}
export default Emoticon;
/**
* @description 文字颜色 FontColor
* @author lkw
*
*/
import DropListMenu from '../menu-constructors/DropListMenu';
import Editor from '../../editor/index';
import { MenuActive } from '../menu-constructors/Menu';
declare class FontColor extends DropListMenu implements MenuActive {
constructor(editor: Editor);
/**
* 执行命令
* @param value value
*/
command(value: string): void;
/**
* 尝试修改菜单激活状态
*/
tryChangeActive(): void;
}
export default FontColor;
import { DropListItem } from '../menu-constructors/DropList';
import { FontSizeConfType } from '../../config/menus';
/**
* FontSizeList 字号配置列表
*/
declare class FontSizeList {
private itemList;
constructor(list: FontSizeConfType);
getItemList(): DropListItem[];
}
export default FontSizeList;
/**
* @description 字号 FontSize
* @author lkw
*
*/
import DropListMenu from '../menu-constructors/DropListMenu';
import Editor from '../../editor/index';
import { MenuActive } from '../menu-constructors/Menu';
declare class FontSize extends DropListMenu implements MenuActive {
constructor(editor: Editor);
/**
* 执行命令
* @param value value
*/
command(value: string): void;
/**
* 尝试修改菜单激活状态
* ?字号是否需要有激活状态这个操作?
*/
tryChangeActive(): void;
}
export default FontSize;
import { DropListItem } from '../menu-constructors/DropList';
/**
* 封装的一个字体菜单列表数据的组装对象,
* 原因是因为在constructor函数中,直接执行此流程,会让代码量看起来较多,
* 如果要在constructor调用外部函数,个人目前发现会有错误提示,
* 因此,想着顺便研究实践下ts,遍创建了这样一个类
*/
declare class FontStyleList {
private itemList;
constructor(list: string[]);
getItemList(): DropListItem[];
}
export default FontStyleList;
/**
* @description 字体样式 FontStyle
* @author dyl
*
*/
import DropListMenu from '../menu-constructors/DropListMenu';
import Editor from '../../editor/index';
import { MenuActive } from '../menu-constructors/Menu';
declare class FontStyle extends DropListMenu implements MenuActive {
constructor(editor: Editor);
/**
* 执行命令
* @param value value
*/
command(value: string): void;
/**
* 尝试修改菜单激活状态
* ?字体是否需要有激活状态这个操作?
*/
tryChangeActive(): void;
}
export default FontStyle;
/**
* @description 标题
* @author wangfupeng
*/
import DropListMenu from '../menu-constructors/DropListMenu';
import Editor from '../../editor/index';
import { MenuActive } from '../menu-constructors/Menu';
declare class Head extends DropListMenu implements MenuActive {
constructor(editor: Editor);
/**
* 执行命令
* @param value value
*/
command(value: string): void;
/**
* 尝试改变菜单激活(高亮)状态
*/
tryChangeActive(): void;
}
export default Head;
/**
* @description 图片拖拽事件绑定
* @author xiaokyo
*/
import Editor from '../../../editor';
import '../../../assets/style/drag-size.less';
/**
* 点击事件委托
* @param editor 编辑器实例
*/
export default function bindDragImgSize(editor: Editor): void;
/**
* @description 拖拽上传图片
* @author wangfupeng
*/
import Editor from '../../../editor/index';
export default function bindDropImg(editor: Editor): void;
/**
* @description 绑定图片的事件
* @author wangfupeng
*/
import Editor from '../../../editor/index';
/**
* 绑定事件
* @param editor 编辑器实例
*/
declare function bindEvent(editor: Editor): void;
export default bindEvent;
/**
* @description 粘贴图片
* @author wangfupeng
*/
import Editor from '../../../editor/index';
/**
* 粘贴图片
* @param editor 编辑器对象
* @param pasteEvents 粘贴事件列表
*/
declare function bindPasteImg(editor: Editor): void;
export default bindPasteImg;
/**
* @description tooltip 事件
* @author lichunlin
*/
import Editor from '../../../editor/index';
/**
* 绑定 tooltip 事件
* @param editor 编辑器实例
*/
export default function bindTooltipEvent(editor: Editor): void;
/**
* @description image 菜单 panel tab 配置
* @author wangfupeng
*/
import editor from '../../editor/index';
import { PanelConf } from '../menu-constructors/Panel';
export default function (editor: editor): PanelConf;
/**
* @description 插入、上传图片
* @author wangfupeng
*/
import PanelMenu from '../menu-constructors/PanelMenu';
import Editor from '../../editor/index';
import { MenuActive } from '../menu-constructors/Menu';
declare class Image extends PanelMenu implements MenuActive {
constructor(editor: Editor);
/**
* 菜单点击事件
*/
clickHandler(): void;
/**
* 创建 panel
*/
private createPanel;
/**
* 尝试修改菜单 active 状态
*/
tryChangeActive(): void;
}
export default Image;
/**
* @description 上传图片
* @author wangfupeng
*/
import Editor from '../../editor/index';
declare class UploadImg {
private editor;
constructor(editor: Editor);
/**
* 提示信息
* @param alertInfo alert info
* @param debugInfo debug info
*/
private alert;
/**
* 往编辑区域插入图片
* @param src 图片地址
*/
insertImg(src: string): void;
/**
* 上传图片
* @param files 文件列表
*/
uploadImg(files: FileList | File[]): void;
}
export default UploadImg;
/**
* @description 减少缩进
* @author tonghan
*/
import { DomElement } from '../../utils/dom-core';
import { IndentationOptions } from '../../config/menus';
declare function decreaseIndentStyle($node: DomElement, options: IndentationOptions): void;
export default decreaseIndentStyle;
/**
* @description 增加缩进
* @author tonghan
*/
import { DomElement } from '../../utils/dom-core';
import { IndentationOptions } from '../../config/menus';
declare function increaseIndentStyle($node: DomElement, options: IndentationOptions): void;
export default increaseIndentStyle;
/**
* @description 增加缩进/减少缩进
* @author tonghan
*/
import Editor from '../../editor/index';
import DropListMenu from '../menu-constructors/DropListMenu';
import { MenuActive } from '../menu-constructors/Menu';
declare class Indent extends DropListMenu implements MenuActive {
constructor(editor: Editor);
/**
* 执行命令
* @param value value
*/
command(value: string): void;
/**
* 尝试改变菜单激活(高亮)状态
*/
tryChangeActive(): void;
}
export default Indent;
/**
* @description 对节点 操作 进行封装
* 获取当前节点的段落
* 根据type判断是增加还是减少缩进
* @author tonghan
*/
import { DomElement } from '../../utils/dom-core';
import Editor from '../../editor/index';
declare function operateElement($node: DomElement, type: String, editor: Editor): void;
export default operateElement;
/**
* @description Menus 菜单栏 入口文件
* @author wangfupeng
*/
import Editor from '../editor/index';
import Menu from './menu-constructors/Menu';
import { MenuListType } from './menu-list';
declare class Menus {
editor: Editor;
menuList: Menu[];
constructorList: MenuListType;
constructor(editor: Editor);
/**
* 自定义添加菜单
* @param key 菜单 key ,和 editor.config.menus 对应
* @param Menu 菜单构造函数
*/
extend(key: string, Menu: any): void;
init(): void;
private _addToToolbar;
/**
* 获取菜单对象
* @param 菜单名称 小写
* @return Menus 菜单对象
*/
menuFind(key: string): Menu;
/**
* @description 修改菜单激活状态
*/
changeActive(): void;
}
export default Menus;
/**
* @description 斜体
* @author liuwei
*/
import BtnMenu from '../menu-constructors/BtnMenu';
import Editor from '../../editor/index';
import { MenuActive } from '../menu-constructors/Menu';
declare class Italic extends BtnMenu implements MenuActive {
constructor(editor: Editor);
/**
* 点击事件
*/
clickHandler(): void;
/**
* 尝试修改菜单激活状态
*/
tryChangeActive(): void;
}
export default Italic;
/**
* @description 对齐方式
* @author liuwei
*/
import DropListMenu from '../menu-constructors/DropListMenu';
import Editor from '../../editor/index';
import { MenuActive } from '../menu-constructors/Menu';
declare class Justify extends DropListMenu implements MenuActive {
constructor(editor: Editor);
/**
* 执行命令
* @param value value
*/
command(value: string): void;
/**
* 尝试改变菜单激活(高亮)状态
* 默认左对齐,若选择其他对其方式对active进行高亮否则unActive
* ?考虑优化的话 是否可以对具体选中的进行高亮
*/
tryChangeActive(): void;
}
export default Justify;
/**
* @description 段落行高 LineHeight
* @author lichunlin
*
*/
import DropListMenu from '../menu-constructors/DropListMenu';
import Editor from '../../editor/index';
import { MenuActive } from '../menu-constructors/Menu';
declare class LineHeight extends DropListMenu implements MenuActive {
constructor(editor: Editor);
/**
* 执行命令
* @param value value
*/
command(value: string): void;
/**
* 遍历dom 获取祖父元素 直到contenteditable属性的div标签
*
*/
getDom(dom: HTMLElement): HTMLElement;
/**
* 执行 document.execCommand
*
*/
action(html_str: string, editor: Editor): void;
/**
* style 处理
*/
styleProcessing(styleList: Array<string>): string;
/**
* 段落全选 比如:避免11变成111
*/
setRange(startDom: Node, endDom: Node): void;
/**
* 尝试修改菜单激活状态
*/
tryChangeActive(): void;
}
export default LineHeight;
import Editor from '../../editor/index';
import { DropListItem } from '../menu-constructors/DropList';
declare class lineHeightList {
private itemList;
constructor(editor: Editor, list: string[]);
getItemList(): DropListItem[];
}
export default lineHeightList;
/**
* @description 绑定链接元素的事件,入口
* @author wangfupeng
*/
import Editor from '../../../editor/index';
/**
* 绑定事件
* @param editor 编辑器实例
*/
declare function bindEvent(editor: Editor): void;
export default bindEvent;
/**
* @description tooltip 事件
* @author wangfupeng
*/
import Editor from '../../../editor/index';
/**
* 绑定 tooltip 事件
* @param editor 编辑器实例
*/
declare function bindTooltipEvent(editor: Editor): void;
export default bindTooltipEvent;
/**
* @description link 菜单 panel tab 配置
* @author wangfupeng
*/
import editor from '../../editor/index';
import { PanelConf } from '../menu-constructors/Panel';
export default function (editor: editor, text: string, link: string): PanelConf;
/**
* @description 链接 菜单
* @author wangfupeng
*/
import PanelMenu from '../menu-constructors/PanelMenu';
import Editor from '../../editor/index';
import { MenuActive } from '../menu-constructors/Menu';
declare class Link extends PanelMenu implements MenuActive {
constructor(editor: Editor);
/**
* 菜单点击事件
*/
clickHandler(): void;
/**
* 创建 panel
* @param text 文本
* @param link 链接
*/
private createPanel;
/**
* 尝试修改菜单 active 状态
*/
tryChangeActive(): void;
}
export default Link;
/**
* @description 检查选区是否在链接中,即菜单是否应该 active
* @author wangfupeng
*/
import Editor from '../../editor/index';
declare function isActive(editor: Editor): boolean;
export default isActive;
/**
* @description 无序列表/有序列表
* @author tonghan
*/
import Editor from '../../editor/index';
import DropListMenu from '../menu-constructors/DropListMenu';
import { MenuActive } from '../menu-constructors/Menu';
declare class List extends DropListMenu implements MenuActive {
constructor(editor: Editor);
command(value: string): void;
tryChangeActive(): void;
}
export default List;
/**
* @description 按钮菜单 Class
* @author wangfupeng
*/
import { DomElement } from '../../utils/dom-core';
import Editor from '../../editor/index';
import Menu from './Menu';
declare class BtnMenu extends Menu {
constructor($elem: DomElement, editor: Editor);
}
export default BtnMenu;
/**
* @description 下拉列表 class
*/
import { DomElement } from '../../utils/dom-core';
import DropListMenu from './DropListMenu';
export declare type DropListItem = {
$elem: DomElement;
value: string;
};
export declare type DropListConf = {
title: string;
list: DropListItem[];
type: string;
clickHandler: (value: DropListItem['value']) => void;
width: number | 100;
};
declare class DropList {
private menu;
private conf;
private $container;
private rendered;
private _show;
hideTimeoutId: number;
showTimeoutId: number;
constructor(menu: DropListMenu, conf: DropListConf);
/**
* 显示 DropList
*/
show(): void;
/**
* 隐藏 DropList
*/
hide(): void;
get isShow(): boolean;
}
export default DropList;
/**
* @description 下拉菜单 Class
* @author wangfupeng
*/
import { DomElement } from '../../utils/dom-core';
import Editor from '../../editor/index';
import Menu from './Menu';
import DropList, { DropListConf } from './DropList';
declare class DropListMenu extends Menu {
dropList: DropList;
constructor($elem: DomElement, editor: Editor, conf: DropListConf);
}
export default DropListMenu;
/**
* @description Menu class 父类
* @author wangfupeng
*/
import { DomElement } from '../../utils/dom-core';
import Editor from '../../editor/index';
export interface MenuActive {
/**
* 修改菜单激活状态,菜单是否高亮
*/
tryChangeActive(): void;
}
declare class Menu {
key: string | undefined;
$elem: DomElement;
editor: Editor;
private _active;
constructor($elem: DomElement, editor: Editor);
/**
* 菜单点击事件,子类可重写
* @param e event
*/
protected clickHandler(e: Event): void;
/**
* 激活菜单,高亮显示
*/
protected active(): void;
/**
* 取消激活,不再高亮显示
*/
protected unActive(): void;
/**
* 是否处于激活状态
*/
get isActive(): boolean;
}
export default Menu;
/**
* @description panel class
* @author wangfupeng
*/
import { DomElement } from '../../utils/dom-core';
import PanelMenu from './PanelMenu';
declare type _TabEventConf = {
selector: string;
type: string;
fn: Function;
};
export declare type PanelTabConf = {
title: string;
tpl: string;
events: _TabEventConf[];
};
export declare type PanelConf = {
width: number | 0;
height: number | 0;
tabs: PanelTabConf[];
};
declare class Panel {
static createdMenus: Set<PanelMenu>;
private menu;
private conf;
$container: DomElement;
constructor(menu: PanelMenu, conf: PanelConf);
/**
* 创建并展示 panel
*/
create(): void;
/**
* 移除 penal
*/
remove(): void;
/**
* 隐藏当前所有的 panel
*/
static hideCurAllPanels(): void;
}
export default Panel;
/**
* @description Modal 菜单 Class
* @author wangfupeng
*/
import { DomElement } from '../../utils/dom-core';
import Editor from '../../editor/index';
import Menu from './Menu';
import Panel from './Panel';
declare class PanelMenu extends Menu {
panel: Panel | undefined;
constructor($elem: DomElement, editor: Editor);
/**
* 给 menu 设置 panel
* @param panel panel 实例
*/
setPanel(panel: Panel): void;
}
export default PanelMenu;
/**
* @description Tooltip class
* @author wangfupeng
*/
import { DomElement } from '../../utils/dom-core';
import Editor from '../../editor/index';
export declare type TooltipConfItemType = {
$elem: DomElement;
onClick: Function;
};
export declare type TooltipConfType = Array<TooltipConfItemType>;
declare class Tooltip {
private $container;
private $targetElem;
private editor;
private conf;
private _show;
private _isInsertTextContainer;
constructor(editor: Editor, $elem: DomElement, conf: TooltipConfType);
/**
* 获取 tooltip 定位
*/
private getPositionData;
/**
* 添加 tooltip 菜单
*/
private appendMenus;
/**
* 创建 tooltip
*/
create(): void;
/**
* 移除该 tooltip
*/
remove(): void;
/**
* 是否显示
*/
get isShow(): boolean;
}
export default Tooltip;
export { DropListConf, DropListItem } from './DropList';
export { PanelTabConf, PanelConf } from './Panel';
export { TooltipConfItemType } from './Tooltip';
/**
* @description 所有菜单的构造函数
* @author wangfupeng
*/
import Bold from './bold/index';
import Head from './head/index';
import Link from './link/index';
import Italic from './italic/index';
import Underline from './underline/index';
import StrikeThrough from './strike-through/index';
import FontStyle from './font-style/index';
import FontSize from './font-size';
import Justify from './justify/index';
import Quote from './quote/index';
import BackColor from './back-color/index';
import FontColor from './font-color/index';
import Video from './video/index';
import Image from './img/index';
import Indent from './indent/index';
import Emoticon from './emoticon/index';
import List from './list/index';
import LineHeight from './lineHeight/index';
import Undo from './undo/index';
import Redo from './redo/index';
import Table from './table/index';
import Code from './code';
import SplitLine from './split-line/index';
export declare type MenuListType = {
[key: string]: any;
};
declare const _default: {
bold: typeof Bold;
head: typeof Head;
italic: typeof Italic;
link: typeof Link;
underline: typeof Underline;
strikeThrough: typeof StrikeThrough;
fontName: typeof FontStyle;
fontSize: typeof FontSize;
justify: typeof Justify;
quote: typeof Quote;
backColor: typeof BackColor;
foreColor: typeof FontColor;
video: typeof Video;
image: typeof Image;
indent: typeof Indent;
emoticon: typeof Emoticon;
list: typeof List;
lineHeight: typeof LineHeight;
undo: typeof Undo;
redo: typeof Redo;
table: typeof Table;
code: typeof Code;
splitLine: typeof SplitLine;
};
export default _default;
/**
* @description 引用
* @author tonghan
*/
import Editor from '../../editor/index';
import BtnMenu from '../menu-constructors/BtnMenu';
import { MenuActive } from '../menu-constructors/Menu';
declare class Quote extends BtnMenu implements MenuActive {
constructor(editor: Editor);
/**
* 点击事件
*/
clickHandler(): void;
/**
* 尝试修改菜单激活状态
*/
tryChangeActive(): void;
/**
* 获取包裹在最外层的节点(防止内部嵌入多个样式)
* @param selectionElem 选中的节点
* @returns {string} 最终要处理的节点名称
*/
private getTopNodeName;
/**
* 将nodelist插入element中,并做一些特殊化处理
* @param element 需要插入的父节点
* @param nodeList 需要插入的nodelist
*/
private insertNode;
}
export default Quote;
/**
* @description 重做
* @author tonghan
*/
import Editor from '../../editor/index';
import BtnMenu from '../menu-constructors/BtnMenu';
import { MenuActive } from '../menu-constructors/Menu';
declare class Redo extends BtnMenu implements MenuActive {
constructor(editor: Editor);
/**
* 点击事件
*/
clickHandler(): void;
/**
* 尝试修改菜单激活状态
*/
tryChangeActive(): void;
}
export default Redo;
/**
* @description 绑定分割线元素的事件入口
* @author wangqiaoling
*/
import Editor from '../../../editor/index';
/**
* 绑定事件
* @param editor 编辑器实例
*/
declare function bindEvent(editor: Editor): void;
export default bindEvent;
import Editor from '../../../editor/index';
export default function bindTooltipEvent(editor: Editor): void;
/**
* @description 分割线
* @author wangqiaoling
*/
import BtnMenu from '../menu-constructors/BtnMenu';
import Editor from '../../editor/index';
import { MenuActive } from '../menu-constructors/Menu';
declare class splitLine extends BtnMenu implements MenuActive {
constructor(editor: Editor);
/**
* 菜单点击事件
*/
clickHandler(): void;
/**
* 创建 splitLine
*/
private createSplitLine;
/**
* 尝试修改菜单激活状态
*/
tryChangeActive(): void;
}
export default splitLine;
/**
* @description 删除线
* @author lkw
*/
import BtnMenu from '../menu-constructors/BtnMenu';
import Editor from '../../editor/index';
import { MenuActive } from '../menu-constructors/Menu';
declare class StrikeThrough extends BtnMenu implements MenuActive {
constructor(editor: Editor);
/**
* 点击事件
*/
clickHandler(): void;
/**
* 尝试修改菜单激活状态
*/
tryChangeActive(): void;
}
export default StrikeThrough;
/**
* @description 获取dom节点
* @author lichunlin
*/
import Editor from '../../../../editor/index';
declare class getNode {
editor: Editor;
constructor(editor: Editor);
/**
* 获取焦点所在行
* @param $node 当前table
*/
getRowNode($node: HTMLElement): HTMLElement | null | undefined;
/**
* 获取当前行的下标
* @param $node 当前table
* @param $dmo 当前行节点
*/
getCurrentRowIndex($node: HTMLElement, $dom: HTMLElement): Number;
/**
* 获取当前列的下标
* @param $node 当前点击元素
*/
getCurrentColIndex($node: HTMLElement): number;
/**
* 返回元素html字符串
* @param $node
*/
getTableHtml($node: HTMLElement): string;
}
export default getNode;
import { DomElement } from '../../../../utils/dom-core';
/**
* 处理新添加行
* @param $node 整个table
* @param _index 行的inde
*/
declare function ProcessingRow($node: DomElement, _index: number): DomElement;
/**
* 处理新添加列
* @param $node 整个table
* @param _index 列的inde
*/
declare function ProcessingCol($node: DomElement, _index: number): DomElement;
/**
* 处理删除行
* @param $node 整个table
* @param _index 行的inde
*/
declare function DeleteRow($node: DomElement, _index: number): DomElement;
/**
* 处理删除列
* @param $node
* @param _index
*/
declare function DeleteCol($node: DomElement, _index: number): DomElement;
/**
* 处理设置/取消表头
* @param $node
* @param _index
* @type 替换的列 th 还是td
*/
declare function setTheHeader($node: DomElement, _index: number, type: string): DomElement;
declare const _default: {
ProcessingRow: typeof ProcessingRow;
ProcessingCol: typeof ProcessingCol;
DeleteRow: typeof DeleteRow;
DeleteCol: typeof DeleteCol;
setTheHeader: typeof setTheHeader;
};
export default _default;
/**
* @description 绑定点击事件
* @author lichunlin
*/
import Editor from '../../../editor/index';
/**
* 绑定事件
* @param editor 编辑器实例
*/
declare function bindEvent(editor: Editor): void;
export default bindEvent;
/**
* @description tooltip 事件
* @author lichunlin
*/
import Editor from '../../../editor/index';
/**
* 绑定 tooltip 事件
* @param editor 编辑器实例
*/
export default function bindTooltipEvent(editor: Editor): void;
/**
* @description table 菜单 panel tab 配置
* @author lichunlin
*/
import editor from '../../editor/index';
import { PanelConf } from '../menu-constructors/Panel';
import '../../assets/style/create-panel-conf.less';
export default function (editor: editor): PanelConf;
/**
* @description 创建tabel
* @author lichunlin
*/
import Editor from '../../editor/index';
declare class CreateTable {
private editor;
constructor(editor: Editor);
/**
* 执行创建
* @param rowValue 行数
* @param colValue 列数
*/
createAction(rowValue: number, colValue: number): void;
/**
* 创建table、行、列
* @param rowValue 行数
* @param colValue 列数
*/
createTableHtml(rowValue: number, colValue: number): string;
}
export default CreateTable;
/**
* @description 创建table
* @author lichunlin
*/
import PanelMenu from '../menu-constructors/PanelMenu';
import Editor from '../../editor/index';
import { MenuActive } from '../menu-constructors/Menu';
declare class Table extends PanelMenu implements MenuActive {
constructor(editor: Editor);
/**
* 菜单点击事件
*/
clickHandler(): void;
/**
* 创建 panel
*/
private createPanel;
/**
* 尝试修改菜单 active 状态
*/
tryChangeActive(): void;
}
export default Table;
/**
* @description 下划线 underline
* @author dyl
*
*/
import BtnMenu from '../menu-constructors/BtnMenu';
import Editor from '../../editor/index';
import { MenuActive } from '../menu-constructors/Menu';
declare class Underline extends BtnMenu implements MenuActive {
constructor(editor: Editor);
/**
* 点击事件
*/
clickHandler(): void;
/**
* 尝试修改菜单激活状态
*/
tryChangeActive(): void;
}
export default Underline;
/**
* @description 撤销
* @author tonghan
*/
import Editor from '../../editor/index';
import BtnMenu from '../menu-constructors/BtnMenu';
import { MenuActive } from '../menu-constructors/Menu';
declare class Undo extends BtnMenu implements MenuActive {
constructor(editor: Editor);
/**
* 点击事件
*/
clickHandler(): void;
/**
* 尝试修改菜单激活状态
*/
tryChangeActive(): void;
}
export default Undo;
/**
* @description video 菜单 panel tab 配置
* @author tonghan
*/
import editor from '../../editor/index';
import { PanelConf } from '../menu-constructors/Panel';
export default function (editor: editor, video: string): PanelConf;
/**
* @description 视频 菜单
* @author tonghan
*/
import Editor from '../../editor/index';
import PanelMenu from '../menu-constructors/PanelMenu';
import { MenuActive } from '../menu-constructors/Menu';
declare class Video extends PanelMenu implements MenuActive {
constructor(editor: Editor);
/**
* 菜单点击事件
*/
clickHandler(): void;
/**
* 创建 panel
* @param link 链接
*/
private createPanel;
/**
* 尝试修改菜单 active 状态
*/
tryChangeActive(): void;
}
export default Video;
/**
* @description 删除时保留 <p><br></p>
* @author wangfupeng
*/
import Editor from '../../editor/index';
/**
* 删除时保留 <p><br></p>
* @param editor 编辑器实例
* @param deleteUpEvents delete 键 up 时的 hooks
* @param deleteDownEvents delete 建 down 时的 hooks
*/
declare function deleteToKeepP(editor: Editor, deleteUpEvents: Function[], deleteDownEvents: Function[]): void;
export default deleteToKeepP;
/**
* @description 回车时,保证生成的是 <p> 标签
* @author wangfupeng
*/
import Editor from '../../editor/index';
/**
* 回车时,保证生成的是 <p> 标签
* @param editor 编辑器实例
* @param enterUpEvents enter 键 up 时的 hooks
* @param enterDownEvents enter 键 down 时的 hooks
*/
declare function enterToCreateP(editor: Editor, enterUpEvents: Function[], enterDownEvents: Function[]): void;
export default enterToCreateP;
/**
* @description 图片点击后选区更新到img的位置
* @author tonghan
*/
import Editor from '../../editor/index';
/**
* 图片点击后选区更新到img的位置
* @param editor 编辑器实例
* @param imgClickEvents delete 键 up 时的 hooks
*/
declare function imgClickActive(editor: Editor, imgClickEvents: Function[]): void;
export default imgClickActive;
/**
* @description Text 事件钩子函数。Text 公共的,不是某个菜单独有的
* @wangfupeng
*/
import Text from '../index';
/**
* 初始化 text 事件钩子函数
* @param text text 实例
*/
declare function initTextHooks(text: Text): void;
export default initTextHooks;
/**
* @description 粘贴 text html
* @author wangfupeng
*/
import Editor from '../../editor/index';
/**
* 粘贴文本和 html
* @param editor 编辑器对象
* @param pasteEvents 粘贴事件列表
*/
declare function pasteTextHtml(editor: Editor, pasteEvents: Function[]): void;
export default pasteTextHtml;
/**
* @description 编辑区域 tab 的特殊处理
* @author wangfupeng
*/
import Editor from '../../editor/index';
/**
* 编辑区域 tab 的特殊处理,转换为空格
* @param editor 编辑器实例
* @param tabDownEvents tab down 事件钩子
*/
declare function tabHandler(editor: Editor, tabDownEvents: Function[]): void;
export default tabHandler;
/**
* @description 获取子元素的 JSON 格式数据
* @author wangfupeng
*/
import { DomElement } from '../utils/dom-core';
declare type AttrType = {
name: string;
value: string;
};
export declare type NodeType = {
tag: string;
attrs: AttrType[];
children: NodeListType;
};
export declare type NodeListType = Array<string | NodeType>;
/**
* 获取子元素的 JSON 格式数据
* @param $elem DOM 节点
*/
declare function getChildrenJSON($elem: DomElement): NodeListType;
export default getChildrenJSON;
/**
* @description 编辑区域,入口文件
* @author wangfupeng
*/
import Editor from '../editor/index';
import { NodeListType } from './getChildrenJSON';
declare type TextEventHooks = {
changeEvents: Function[];
dropEvents: Function[];
clickEvents: Function[];
keyupEvents: Function[];
tabUpEvents: Function[];
tabDownEvents: Function[];
enterUpEvents: Function[];
enterDownEvents: Function[];
deleteUpEvents: Function[];
deleteDownEvents: Function[];
pasteEvents: Function[];
linkClickEvents: Function[];
codeClickEvents: Function[];
textScrollEvents: Function[];
toolbarClickEvents: Function[];
imgClickEvents: Function[];
imgDragBarMouseDownEvents: Function[];
tableClickEvents: Function[];
menuClickEvents: Function[];
dropListMenuHoverEvents: Function[];
splitLineEvents: Function[];
};
declare class Text {
editor: Editor;
eventHooks: TextEventHooks;
constructor(editor: Editor);
/**
* 初始化
*/
init(): void;
/**
* 切换placeholder
*/
togglePlaceholder(): void;
/**
* 清空内容
*/
clear(): void;
/**
* 设置/获取 html
* @param val html 字符串
*/
html(val?: string): void | string;
/**
* 获取 json 格式的数据
*/
getJSON(): NodeListType;
/**
* 获取/设置 字符串内容
* @param val text 字符串
*/
text(val?: string): void | string;
/**
* 追加 html 内容
* @param html html 字符串
*/
append(html: string): void;
/**
* 每一步操作,都实时保存选区范围
*/
private _saveRange;
/**
* 绑定事件,事件会触发钩子函数
*/
private _bindEventHooks;
}
export default Text;
/**
* @description 将粘贴的 html 字符串,转换为正确、简洁的 html 代码。剔除不必要的标签和属性。
* @author wangfupeng
*/
/**
* 处理粘贴的 html
* @param html html 字符串
* @param filterStyle 是否过滤 style 样式
* @param ignoreImg 是否忽略 img 标签
*/
declare function parseHtml(html: string, filterStyle?: boolean, ignoreImg?: boolean): string;
export default parseHtml;
/**
* @description 处理粘贴逻辑
* @author wangfupeng
*/
/**
* 获取粘贴的纯文本
* @param e Event 参数
*/
export declare function getPasteText(e: ClipboardEvent): string;
/**
* 获取粘贴的 html 字符串
* @param e Event 参数
* @param filterStyle 是否过滤 style 样式
* @param ignoreImg 是否忽略 img 标签
*/
export declare function getPasteHtml(e: ClipboardEvent, filterStyle?: boolean, ignoreImg?: boolean): string;
/**
* 获取粘贴的图片文件
* @param e Event 参数
*/
export declare function getPasteImgs(e: ClipboardEvent): File[];
/**
* @description 粘贴相关的 tags
* @author wangfupeng
*/
export declare const IGNORE_TAGS: Set<string>;
export declare const NECESSARY_ATTRS: Map<string, string[]>;
export declare const EMPTY_TAGS: Set<string>;
export declare const TOP_LEVEL_TAGS: Set<string>;
/**
* @description 常亮
* @author wangfupeng
*/
export declare function EMPTY_FN(): void;
export declare const imgRegex: RegExp;
export declare const urlRegex: RegExp;
/**
* @description 双栈实现撤销恢复
* @author fangzhicong
*/
import { CeilStack } from './stack';
export default class Cache<T> {
protected maxSize: number;
/**
* 正常操作(用户输入、js代码修改内容、恢复操作)产生的缓存
*/
protected data: CeilStack<T>;
/**
* 撤销操作产生的缓存(恢复操作时需要这些数据)
*/
protected revokeData: CeilStack<T>;
/**
* 上一步操作是否为 撤销/恢复
*/
protected isRe: boolean;
constructor(maxSize: number);
/**
* 返回当前栈中的数据长度。格式为:[正常的数据的条数,被撤销的数据的条数]
*/
get size(): number[];
/**
* 重设数据缓存器的缓存长度(第一次有效)
*/
resetMaxSize(maxSize: number): void;
/**
* 保存数据
*/
save(data: T): this;
/**
* 撤销
* @param fn 撤销时,如果有数据,执行的回调函数
*/
revoke(fn: (data: T) => void): boolean;
/**
* 恢复
* @param fn 恢复时,如果有数据,执行的回调函数
*/
restore(fn: (data: T) => void): boolean;
}
/**
* @description 数据结构 - 链表
* @author fangzhicong
*/
/**
* 特殊链表(数据尾插入、插入前自动清理指针后边的数据、插入后指针永远定位于最后一位元素、可限制链表长度、指针双向移动)
*/
export declare class TailChain<T> {
/**
* 链表数据
*/
protected data: T[];
/**
* 链表最大长度,零表示长度不限
*/
protected max: number;
/**
* 指针
*/
protected point: number;
protected isRe: boolean;
/**
* 允许用户重设一次 max 值
*/
resetMax(maxSize: number): void;
/**
* 当前链表的长度
*/
get size(): number;
/**
* 尾插入
* @param data 插入的数据
*/
insertLast<K extends T>(data: K): this;
/**
* 获取当前指针元素
*/
current(): T | undefined;
/**
* 获取上一指针元素
*/
prev(): T | undefined;
/**
* 下一指针元素
*/
next(): T | undefined;
}
/**
* @description 数据结构 - 栈
* @author fangzhicong
*/
/**
* 栈(限制最大数据条数,栈满后可以继续入栈,而先入栈的数据将失效)
*/
export declare class CeilStack<T> {
/**
* 数据缓存
*/
protected data: T[];
/**
* 栈的最大长度。为零则长度不限
*/
protected max: number;
/**
* 标识是否重设过 max 值
*/
protected reset: boolean;
constructor(max?: number);
/**
* 允许用户重设一次 max 值
*/
resetMax(maxSize: number): void;
/**
* 当前栈中的数据条数
*/
get size(): number;
/**
* 入栈
* @param data 入栈的数据
*/
instack(data: T): this;
/**
* 出栈
*/
outstack(): T | undefined;
/**
* 清空栈
*/
clear(): this;
}
/**
* @description 封装 DOM 操作
* @wangfupeng
*/
import Editor from '../editor/index';
declare type OffsetDataType = {
top: number;
left: number;
width: number;
height: number;
parent: Element | null;
};
export declare class DomElement {
selector: string;
length: number;
elems: HTMLElement[];
dataSource: Map<string, any>;
/**
* 构造函数
* @param selector 任一类型的选择器
*/
constructor(selector: string);
constructor(selector: DomElement);
constructor(selector: HTMLElement);
constructor(selector: Document);
constructor(selector: HTMLCollection);
constructor(selector: NodeList);
constructor(selector: HTMLElement[]);
/**
* 获取元素 id
*/
get id(): string;
/**
* 遍历所有元素,执行回调函数
* @param fn 回调函数
*/
forEach(fn: Function): DomElement;
/**
* 克隆元素
* @param deep 是否深度克隆
*/
clone(deep?: boolean): DomElement;
/**
* 获取第几个元素
* @param index index
*/
get(index?: number): DomElement;
/**
* 获取第一个元素
*/
first(): DomElement;
/**
* 获取最后一个元素
*/
last(): DomElement;
/**
* 绑定事件
* @param type 事件类型
* @param selector DOM 选择器
* @param fn 事件函数
*/
on(type: string, fn: Function): DomElement;
on(type: string, selector: string, fn: Function): DomElement;
/**
* 解绑事件
* @param type 事件类型
* @param selector DOM 选择器
* @param fn 事件函数
*/
off(type: string, fn: Function): DomElement;
off(type: string, selector: string, fn: Function): DomElement;
/**
* 设置/获取 属性
* @param key key
* @param val value
*/
attr(key: string): string;
attr(key: string, val: string): DomElement;
/**
* 删除 属性
* @param key key
*/
removeAttr(key: string): void;
/**
* 添加 css class
* @param className css class
*/
addClass(className: string): DomElement;
/**
* 添加 css class
* @param className css class
*/
removeClass(className: string): DomElement;
/**
* 是否有传入的 css class
* @param className css class
*/
hasClass(className?: string): boolean;
/**
* 修改 css
* @param key css key
* @param val css value
*/
css(key: string, val: string | number): DomElement;
/**
* 封装 getBoundingClientRect
*/
getBoundingClientRect(): DOMRect;
/**
* 显示
*/
show(): DomElement;
/**
* 隐藏
*/
hide(): DomElement;
/**
* 获取子节点(只有 DOM 元素)
*/
children(): DomElement | null;
/**
* 获取子节点(包括文本节点)
*/
childNodes(): DomElement | null;
/**
* 增加子节点
* @param $children 子节点
*/
append($children: DomElement): DomElement;
/**
* 移除当前节点
*/
remove(): DomElement;
/**
* 当前元素,是否包含某个子元素
* @param $child 子元素
*/
isContain($child: DomElement): boolean;
/**
* 获取当前元素的尺寸和位置信息
*/
getSizeData(): DOMRect;
/**
* 获取当前元素 nodeName
*/
getNodeName(): string;
/**
* 获取当前元素节点
*/
getNode(): Node;
/**
* 获取当前元素可视高度
*/
getClientHeight(): number;
/**
* 获取当前元素可视宽度
*/
/**
* 查询
* @param selector css 选择器
*/
find(selector: string): DomElement;
/**
* 获取/设置 元素 text
* @param val text 值
*/
text(): string;
text(val: string): DomElement;
/**
* 设置/获取 元素 html
* @param val html 值
*/
html(): string;
html(val: string): DomElement;
/**
* 获取元素 value
*/
val(): string;
/**
* focus 到当前元素
*/
focus(): DomElement;
/**
* 当前元素前一个兄弟节点
*/
prev(): DomElement;
/**
* 当前元素后一个兄弟节点
*/
next(): DomElement;
/**
* 获取父元素
*/
parent(): DomElement;
/**
* 查找父元素,知道满足 selector 条件
* @param selector css 选择器
* @param curElem 从哪个元素开始查找,默认为当前元素
*/
parentUntil(selector: string): DomElement | null;
parentUntil(selector: string, curElem: HTMLElement): DomElement | null;
/**
* 判读是否相等
* @param $elem 元素
*/
equal($elem: DomElement | HTMLElement): boolean;
/**
* 将该元素插入到某个元素前面
* @param selector css 选择器
*/
insertBefore(selector: string | DomElement): DomElement;
/**
* 将该元素插入到某个元素后面
* @param selector css 选择器
*/
insertAfter(selector: string | DomElement): DomElement;
/**
* 设置/获取 数据
* @param key key
* @param value value
*/
data<T>(key: string, value?: T): T | undefined;
/**
* 获取当前节点的顶级(段落)
* @param editor 富文本实例
*/
getNodeTop(editor: Editor): DomElement;
/**
* 获取当前 节点 基与上一个拥有相对或者解决定位的父容器的位置
* @param editor 富文本实例
*/
getOffsetData(): OffsetDataType;
}
declare function $(selector: any): DomElement;
export default $;
/**
* @description 封装 MutationObserver
* @author fangzhicong
*/
export declare type callback = (mutations: MutationRecord[], observer: Mutation) => void;
/**
* 封装 MutationObserver,抽离成公共类
*/
export default class Mutation {
/**
* MutationObserver 实例
*/
protected observer: MutationObserver;
/**
* 被监听的 Node 节点(可继承的,方便扩展但又不会在外部被修改)
*/
protected node?: Node;
/**
* 默认的 MutationObserverInit 配置
*/
protected options: MutationObserverInit;
/**
* MutationCallback
*/
protected callback: (mutations: MutationRecord[]) => void;
/**
* 构造器
* @param fn 发生变化时执行的回调函数
* @param options 自定义配置项
*/
constructor(fn: callback, options?: MutationObserverInit);
get target(): Node | undefined;
/**
* 绑定监听节点(初次绑定有效)
* @param node 需要被监听的节点
*/
observe(node: Node): void;
/**
* 连接监听器(开始观察)
*/
connect(): this;
/**
* 断开监听器(停止观察)
*/
disconnect(): void;
}
/**
* @description polyfill 【注意,js 语法的兼容,都通过 babel transform runtime 支持】
* @author wangfupeng
*/
/**
* @description 工具函数集合
* @author wangfupeng
*/
declare class NavUA {
_ua: string;
isOldEdge: boolean;
isFirefox: boolean;
constructor();
isIE(): boolean;
isWebkit(): boolean;
}
export declare const UA: NavUA;
/**
* 获取随机石
* @param prefix 前缀
*/
export declare function getRandom(prefix?: string): string;
/**
* 替换 html 特殊字符
* @param html html 字符串
*/
export declare function replaceHtmlSymbol(html: string): string;
export declare function replaceSpecialSymbol(value: string): string;
/**
* 遍历对象或数组,执行回调函数
* @param obj 对象或数组
* @param fn 回调函数 (key, val) => {...}
*/
export declare function forEach(obj: Object | [], fn: Function): void;
/**
* 遍历类数组
* @param fakeArr 类数组
* @param fn 回调函数
*/
export declare function arrForEach(fakeArr: any, fn: Function): void;
/**
* 节流
* @param fn 函数
* @param interval 间隔时间,毫秒
*/
export declare function throttle(fn: Function, interval?: number): Function;
/**
* 防抖
* @param fn 函数
* @param delay 间隔时间,毫秒
*/
export declare function debounce(fn: Function, delay?: number): Function;
/**
* isFunction 是否是函数
* @param fn 函数
*/
export declare function isFunction(fn: any): boolean;
/**
* 引用与非引用值 深拷贝方法
* @param data
*/
export declare function deepClone(data: any): any;
/**
* 将可遍历的对象转换为数组
* @param data 可遍历的对象
*/
export declare function toArray<T>(data: T): any[];
export {};
/**
* @description 入口文件
* @author wangfupeng
*/
import './assets/style/common.less';
import './assets/style/icon.less';
import './assets/style/menus.less';
import './assets/style/text.less';
import './assets/style/panel.less';
import './assets/style/droplist.less';
import './utils/polyfill';
import Editor from './editor/index';
export * from './menus/menu-constructors/index';
export default Editor;
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
import React, { useState, useEffect } from 'react';
import WangEditor from './wangEditorComponent';
export default function Index({ onChange, value, height }) {
return (<WangEditor key={'cmsContent'}
height={height}
value={value}
onChangeValue={onChange}
/>);
}
/**
* wangEditor http://www.wangeditor.com/ 将git 源码下载下来 然后 npm run build 获取编译后的代码 版本 4.2.2
* 钟是志
* 2020年11月5日 16:56:23
*
**/
/**
* key: 组件的key // 同一页面渲染应该只有一个唯一的key
* height: number // 编辑区域的高度 单位px
* zIndex: number // 默认为 10000 可自行设置
* placeholder: string // 提示文字,
* focus: boolean, // 是否获取焦点
* value: string // 富文本的值
* 更多配置项 参考 http://www.wangeditor.com/doc/
* */
import React, {useState, useEffect} from 'react';
import WangEditor from './includes/wangEditor.min';
export default function Index( {
height,
zIndex,
placeholder,
focus,
value,
key,
onChangeValue,
} ){
useEffect(()=>{
const editor = new WangEditor(`#wangEditor${key}`);
if(height){
editor.config.height = height;
}
if(zIndex){
editor.config.zIndex = zIndex;
}
if(placeholder){
editor.config.placeholder = placeholder;
}
if(focus){
editor.config.focus = focus;
}
editor.config.onChange = function (newHtml) {
onChangeValue(newHtml);
};
editor.config.customUploadImg = function(resultFiles, insertImgFn) {
console.log(resultFiles);
// insertImgFn(imgUrl);
};
editor.config.pasteFilterStyle = false; // 关闭粘贴样式的过滤
editor.config.onchangeTimeout = 500; // html内容改变时的 timeOut 配置
editor.config.menus = [ // 配置菜单
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'indent',
'lineHeight',
'foreColor',
'backColor',
'link',
'list',
'justify',
'quote',
// 'emoticon',
'image',
'video',
'table',
// 'code',
'splitLine',
// 'undo',
// 'redo',
];
editor.create();
if(value){
editor.txt.html('<div class="wangEditorHtml">' + value + '</div>');
}
},[]);
return (
<div id={`wangEditor${key}`}>
</div>
)
}
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论