diff --git a/examples/index.html b/examples/index.html index 118270155..24d2b0fd3 100644 --- a/examples/index.html +++ b/examples/index.html @@ -7,7 +7,7 @@ diff --git a/packages/basic/src/index.ts b/packages/basic/src/index.ts index fa084e0ff..6651d9416 100644 --- a/packages/basic/src/index.ts +++ b/packages/basic/src/index.ts @@ -17,6 +17,7 @@ import fontSizeAndFamily from './modules/font-size-family' import indent from './modules/indent' import justify from './modules/justify' import lineHeight from './modules/line-height' +import undoRedo from './modules/undo-redo' export { simpleStyle, @@ -31,4 +32,5 @@ export { indent, justify, lineHeight, + undoRedo, } diff --git a/packages/basic/src/modules/_helpers/icon-svg.ts b/packages/basic/src/modules/_helpers/icon-svg.ts index 5bff3a56b..b852b09b2 100644 --- a/packages/basic/src/modules/_helpers/icon-svg.ts +++ b/packages/basic/src/modules/_helpers/icon-svg.ts @@ -102,3 +102,11 @@ export const JUSTIFY_CENTER_SVG = // 行高 export const LINE_HEIGHT_SVG = '' + +// 撤销 +export const UNDO_SVG = + '' + +// 重做 +export const REDO_SVG = + '' diff --git a/packages/basic/src/modules/undo-redo/index.ts b/packages/basic/src/modules/undo-redo/index.ts new file mode 100644 index 000000000..98daed139 --- /dev/null +++ b/packages/basic/src/modules/undo-redo/index.ts @@ -0,0 +1,13 @@ +/** + * @description undo redo + * @author wangfupeng + */ + +import { IModuleConf } from '@wangeditor/core' +import { redoMenuConf, undoMenuConf } from './menu/index' + +const undoRedo: IModuleConf = { + menus: [redoMenuConf, undoMenuConf], +} + +export default undoRedo diff --git a/packages/basic/src/modules/undo-redo/menu/RedoMenu.ts b/packages/basic/src/modules/undo-redo/menu/RedoMenu.ts new file mode 100644 index 000000000..9205c3e22 --- /dev/null +++ b/packages/basic/src/modules/undo-redo/menu/RedoMenu.ts @@ -0,0 +1,36 @@ +/** + * @description redo menu + * @author wangfupeng + */ + +import { IButtonMenu, IDomEditor } from '@wangeditor/core' +import { REDO_SVG } from '../../_helpers/icon-svg' + +class RedoMenu implements IButtonMenu { + title = '重做' + iconSvg = REDO_SVG + tag = 'button' + + getValue(editor: IDomEditor): string | boolean { + return '' + } + + isActive(editor: IDomEditor): boolean { + return false + } + + isDisabled(editor: IDomEditor): boolean { + if (editor.selection == null) return true + return false + } + + exec(editor: IDomEditor, value: string | boolean) { + // @ts-ignore + if (typeof editor.redo === 'function') { + // @ts-ignore + editor.redo() + } + } +} + +export default RedoMenu diff --git a/packages/basic/src/modules/undo-redo/menu/UndoMenu.ts b/packages/basic/src/modules/undo-redo/menu/UndoMenu.ts new file mode 100644 index 000000000..0fbb4d916 --- /dev/null +++ b/packages/basic/src/modules/undo-redo/menu/UndoMenu.ts @@ -0,0 +1,36 @@ +/** + * @description undo menu + * @author wangfupeng + */ + +import { IButtonMenu, IDomEditor } from '@wangeditor/core' +import { UNDO_SVG } from '../../_helpers/icon-svg' + +class UndoMenu implements IButtonMenu { + title = '撤销' + iconSvg = UNDO_SVG + tag = 'button' + + getValue(editor: IDomEditor): string | boolean { + return '' + } + + isActive(editor: IDomEditor): boolean { + return false + } + + isDisabled(editor: IDomEditor): boolean { + if (editor.selection == null) return true + return false + } + + exec(editor: IDomEditor, value: string | boolean) { + // @ts-ignore + if (typeof editor.undo === 'function') { + // @ts-ignore + editor.undo() + } + } +} + +export default UndoMenu diff --git a/packages/basic/src/modules/undo-redo/menu/index.ts b/packages/basic/src/modules/undo-redo/menu/index.ts new file mode 100644 index 000000000..1e3254bf7 --- /dev/null +++ b/packages/basic/src/modules/undo-redo/menu/index.ts @@ -0,0 +1,21 @@ +/** + * @description menu entry + * @author wangfupeng + */ + +import RedoMenu from './RedoMenu' +import UndoMenu from './UndoMenu' + +export const undoMenuConf = { + key: 'undo', + factory() { + return new UndoMenu() + }, +} + +export const redoMenuConf = { + key: 'redo', + factory() { + return new RedoMenu() + }, +} diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts index d80158bec..c62db35e2 100644 --- a/packages/editor/src/index.ts +++ b/packages/editor/src/index.ts @@ -29,6 +29,7 @@ import { indent, justify, lineHeight, + undoRedo, } from '@wangeditor/basic' import { INDENT_RIGHT_SVG, JUSTIFY_LEFT_SVG } from './constants/svg' @@ -139,6 +140,11 @@ if (lineHeight.menus && lineHeight.menus.length) { lineHeight.menus.forEach(menuConf => registerMenu(menuConf)) } +// --------------------- 注册 undoRedo module --------------------- +if (undoRedo.menus && undoRedo.menus.length) { + undoRedo.menus.forEach(menuConf => registerMenu(menuConf)) +} + // --------------------- 创建 editor 实例 --------------------- let editor = createEditor( 'editor-container', @@ -182,6 +188,9 @@ let editor = createEditor( 'deleteImage', 'editImage', 'viewImageLink', + '|', + 'undo', + 'redo', ], // hover bar