Merge pull request #118 from Hufe921/feature/i18n

feat:add i18n

src/editor/core/command/Command.ts

@@ -78,6 +78,7 @@ export class Command {
   private static setPaperMargin: CommandAdapt['setPaperMargin']
   private static insertElementList: CommandAdapt['insertElementList']
   private static removeControl: CommandAdapt['removeControl']
+  private static setLocale: CommandAdapt['setLocale']
 
   constructor(adapt: CommandAdapt) {
     Command.mode = adapt.mode.bind(adapt)
@@ -149,6 +150,7 @@ export class Command {
     Command.setPaperMargin = adapt.setPaperMargin.bind(adapt)
     Command.insertElementList = adapt.insertElementList.bind(adapt)
     Command.removeControl = adapt.removeControl.bind(adapt)
+    Command.setLocale = adapt.setLocale.bind(adapt)
   }
 
   // 全局命令
@@ -433,4 +435,8 @@ export class Command {
     return Command.removeControl()
   }
 
+  public executeSetLocale(payload: string) {
+    return Command.setLocale(payload)
+  }
+
 }

src/editor/core/command/CommandAdapt.ts

@@ -23,6 +23,7 @@ import { INavigateInfo, Search } from '../draw/interactive/Search'
 import { TableTool } from '../draw/particle/table/TableTool'
 import { CanvasEvent } from '../event/CanvasEvent'
 import { HistoryManager } from '../history/HistoryManager'
+import { I18n } from '../i18n/I18n'
 import { Position } from '../position/Position'
 import { RangeManager } from '../range/RangeManager'
 import { WorkerManager } from '../worker/WorkerManager'
@@ -42,6 +43,7 @@ export class CommandAdapt {
   private control: Control
   private workerManager: WorkerManager
   private searchManager: Search
+  private i18n: I18n
 
   constructor(draw: Draw) {
     this.draw = draw
@@ -54,6 +56,7 @@ export class CommandAdapt {
     this.control = draw.getControl()
     this.workerManager = draw.getWorkerManager()
     this.searchManager = draw.getSearch()
+    this.i18n = draw.getI18n()
   }
 
   public mode(payload: EditorMode) {
@@ -1468,4 +1471,8 @@ export class CommandAdapt {
     })
   }
 
+  public setLocale(payload: string) {
+    this.i18n.setLocale(payload)
+  }
+
 }

src/editor/core/contextmenu/ContextMenu.ts

@@ -5,6 +5,7 @@ import { IContextMenuContext, IRegisterContextMenu } from '../../interface/conte
 import { findParent } from '../../utils'
 import { Command } from '../command/Command'
 import { Draw } from '../draw/Draw'
+import { I18n } from '../i18n/I18n'
 import { Position } from '../position/Position'
 import { RangeManager } from '../range/RangeManager'
 import { controlMenus } from './menus/controlMenus'
@@ -26,6 +27,7 @@ export class ContextMenu {
   private command: Command
   private range: RangeManager
   private position: Position
+  private i18n: I18n
   private container: HTMLDivElement
   private contextMenuList: IRegisterContextMenu[]
   private contextMenuContainerList: HTMLDivElement[]
@@ -37,6 +39,7 @@ export class ContextMenu {
     this.command = command
     this.range = draw.getRange()
     this.position = draw.getPosition()
+    this.i18n = draw.getI18n()
     this.container = draw.getContainer()
     this.context = null
     // 内部菜单
@@ -212,7 +215,9 @@ export class ContextMenu {
         }
         // 文本
         const span = document.createElement('span')
-        const name = this._formatName(menu.name!)
+        const name = menu.i18nPath
+          ? this._formatName(this.i18n.t(menu.i18nPath))
+          : this._formatName(menu.name || '')
         span.append(document.createTextNode(name))
         menuItem.append(span)
         // 快捷方式提示

src/editor/core/contextmenu/menus/controlMenus.ts

@@ -4,7 +4,7 @@ import { Command } from '../../command/Command'
 
 export const controlMenus: IRegisterContextMenu[] = [
   {
-    name: '删除控件',
+    i18nPath: 'contextmenu.control.delete',
     when: (payload) => {
       return !payload.editorHasSelection && payload.startElement?.type === ElementType.CONTROL
     },

src/editor/core/contextmenu/menus/globalMenus.ts

@@ -3,7 +3,7 @@ import { Command } from '../../command/Command'
 
 export const globalMenus: IRegisterContextMenu[] = [
   {
-    name: '剪切',
+    i18nPath: 'contextmenu.global.cut',
     shortCut: 'Ctrl + X',
     when: (payload) => {
       return !payload.isReadonly
@@ -13,7 +13,7 @@ export const globalMenus: IRegisterContextMenu[] = [
     }
   },
   {
-    name: '复制',
+    i18nPath: 'contextmenu.global.copy',
     shortCut: 'Ctrl + C',
     when: (payload) => {
       return payload.editorHasSelection
@@ -23,7 +23,7 @@ export const globalMenus: IRegisterContextMenu[] = [
     }
   },
   {
-    name: '粘贴',
+    i18nPath: 'contextmenu.global.paste',
     shortCut: 'Ctrl + V',
     when: (payload) => {
       return !payload.isReadonly && payload.editorTextFocus
@@ -33,7 +33,7 @@ export const globalMenus: IRegisterContextMenu[] = [
     }
   },
   {
-    name: '全选',
+    i18nPath: 'contextmenu.global.selectAll',
     shortCut: 'Ctrl + A',
     when: (payload) => {
       return payload.editorTextFocus
@@ -46,8 +46,8 @@ export const globalMenus: IRegisterContextMenu[] = [
     isDivider: true
   },
   {
+    i18nPath: 'contextmenu.global.print',
     icon: 'print',
-    name: '打印',
     when: () => true,
     callback: (command: Command) => {
       command.executePrint()

src/editor/core/contextmenu/menus/hyperlinkMenus.ts

@@ -4,7 +4,7 @@ import { Command } from '../../command/Command'
 
 export const hyperlinkMenus: IRegisterContextMenu[] = [
   {
-    name: '删除链接',
+    i18nPath: 'contextmenu.hyperlink.delete',
     when: (payload) => {
       return payload.startElement?.type === ElementType.HYPERLINK
     },
@@ -13,7 +13,7 @@ export const hyperlinkMenus: IRegisterContextMenu[] = [
     }
   },
   {
-    name: '取消链接',
+    i18nPath: 'contextmenu.hyperlink.cancel',
     when: (payload) => {
       return payload.startElement?.type === ElementType.HYPERLINK
     },
@@ -22,7 +22,7 @@ export const hyperlinkMenus: IRegisterContextMenu[] = [
     }
   },
   {
-    name: '编辑链接',
+    i18nPath: 'contextmenu.hyperlink.edit',
     when: (payload) => {
       return payload.startElement?.type === ElementType.HYPERLINK
     },

src/editor/core/contextmenu/menus/imageMenus.ts

@@ -5,7 +5,7 @@ import { Command } from '../../command/Command'
 
 export const imageMenus: IRegisterContextMenu[] = [
   {
-    name: '更改图片',
+    i18nPath: 'contextmenu.image.change',
     icon: 'image-change',
     when: (payload) => {
       return !payload.editorHasSelection && payload.startElement?.type === ElementType.IMAGE
@@ -29,7 +29,7 @@ export const imageMenus: IRegisterContextMenu[] = [
     }
   },
   {
-    name: '另存为图片',
+    i18nPath: 'contextmenu.image.saveAs',
     icon: 'image',
     when: (payload) => {
       return !payload.editorHasSelection && payload.startElement?.type === ElementType.IMAGE
@@ -39,20 +39,20 @@ export const imageMenus: IRegisterContextMenu[] = [
     }
   },
   {
-    name: '文字环绕',
+    i18nPath: 'contextmenu.image.textWrap',
     when: (payload) => {
       return !payload.editorHasSelection && payload.startElement?.type === ElementType.IMAGE
     },
     childMenus: [
       {
-        name: '嵌入型',
+        i18nPath: 'contextmenu.image.textWrapType.embed',
         when: () => true,
         callback: (command: Command, context: IContextMenuContext) => {
           command.executeChangeImageDisplay(context.startElement!, ImageDisplay.BLOCK)
         }
       },
       {
-        name: '上下型环绕',
+        i18nPath: 'contextmenu.image.textWrapType.upDown',
         when: () => true,
         callback: (command: Command, context: IContextMenuContext) => {
           command.executeChangeImageDisplay(context.startElement!, ImageDisplay.INLINE)

src/editor/core/contextmenu/menus/tableMenus.ts

@@ -6,14 +6,14 @@ export const tableMenus: IRegisterContextMenu[] = [
     isDivider: true
   },
   {
-    name: '插入行列',
+    i18nPath: 'contextmenu.table.insertRowCol',
     icon: 'insert-row-col',
     when: (payload) => {
       return !payload.isReadonly && payload.isInTable
     },
     childMenus: [
       {
-        name: '上方插入1行',
+        i18nPath: 'contextmenu.table.insertTopRow',
         icon: 'insert-top-row',
         when: () => true,
         callback: (command: Command) => {
@@ -21,7 +21,7 @@ export const tableMenus: IRegisterContextMenu[] = [
         }
       },
       {
-        name: '下方插入1行',
+        i18nPath: 'contextmenu.table.insertBottomRow',
         icon: 'insert-bottom-row',
         when: () => true,
         callback: (command: Command) => {
@@ -29,7 +29,7 @@ export const tableMenus: IRegisterContextMenu[] = [
         }
       },
       {
-        name: '左侧插入1列',
+        i18nPath: 'contextmenu.table.insertLeftCol',
         icon: 'insert-left-col',
         when: () => true,
         callback: (command: Command) => {
@@ -37,7 +37,7 @@ export const tableMenus: IRegisterContextMenu[] = [
         }
       },
       {
-        name: '右侧插入1列',
+        i18nPath: 'contextmenu.table.insertRightCol',
         icon: 'insert-right-col',
         when: () => true,
         callback: (command: Command) => {
@@ -47,14 +47,14 @@ export const tableMenus: IRegisterContextMenu[] = [
     ]
   },
   {
-    name: '删除行列',
+    i18nPath: 'contextmenu.table.deleteRowCol',
     icon: 'delete-row-col',
     when: (payload) => {
       return !payload.isReadonly && payload.isInTable
     },
     childMenus: [
       {
-        name: '删除1行',
+        i18nPath: 'contextmenu.table.deleteRow',
         icon: 'delete-row',
         when: () => true,
         callback: (command: Command) => {
@@ -62,7 +62,7 @@ export const tableMenus: IRegisterContextMenu[] = [
         }
       },
       {
-        name: '删除一列',
+        i18nPath: 'contextmenu.table.deleteCol',
         icon: 'delete-col',
         when: () => true,
         callback: (command: Command) => {
@@ -70,7 +70,7 @@ export const tableMenus: IRegisterContextMenu[] = [
         }
       },
       {
-        name: '删除整个表格',
+        i18nPath: 'contextmenu.table.deleteTable',
         icon: 'delete-table',
         when: () => true,
         callback: (command: Command) => {
@@ -80,7 +80,7 @@ export const tableMenus: IRegisterContextMenu[] = [
     ]
   },
   {
-    name: '合并单元格',
+    i18nPath: 'contextmenu.table.mergeCell',
     icon: 'merge-cell',
     when: (payload) => {
       return !payload.isReadonly && payload.isCrossRowCol
@@ -90,7 +90,7 @@ export const tableMenus: IRegisterContextMenu[] = [
     }
   },
   {
-    name: '取消合并',
+    i18nPath: 'contextmenu.table.mergeCancelCell',
     icon: 'merge-cancel-cell',
     when: (payload) => {
       return !payload.isReadonly && payload.isInTable

src/editor/core/draw/Draw.ts

@@ -48,6 +48,7 @@ import { DateParticle } from './particle/date/DateParticle'
 import { IMargin } from '../../interface/Margin'
 import { BlockParticle } from './particle/block/BlockParticle'
 import { EDITOR_COMPONENT, EDITOR_PREFIX } from '../../dataset/constant/Editor'
+import { I18n } from '../i18n/I18n'
 
 export class Draw {
 
@@ -62,6 +63,7 @@ export class Draw {
   private elementList: IElement[]
   private listener: Listener
 
+  private i18n: I18n
   private canvasEvent: CanvasEvent
   private globalEvent: GlobalEvent
   private cursor: Cursor
@@ -120,6 +122,7 @@ export class Draw {
     this.pageContainer = this._createPageContainer()
     this._createPage(0)
 
+    this.i18n = new I18n()
     this.historyManager = new HistoryManager()
     this.position = new Position(this)
     this.range = new RangeManager(this)
@@ -399,6 +402,10 @@ export class Draw {
     return this.workerManager
   }
 
+  public getI18n(): I18n {
+    return this.i18n
+  }
+
   public getRowCount(): number {
     return this.rowList.length
   }

src/editor/core/draw/particle/date/DateParticle.ts

@@ -14,9 +14,31 @@ export class DateParticle {
   constructor(draw: Draw) {
     this.draw = draw
     this.range = draw.getRange()
+    const i18n = draw.getI18n()
+    const t = i18n.t.bind(i18n)
     this.datePicker = new DatePicker({
       mountDom: draw.getContainer(),
-      onSubmit: this._setValue.bind(this)
+      onSubmit: this._setValue.bind(this),
+      getLang: () => ({
+        now: t('datePicker.now'),
+        confirm: t('datePicker.confirm'),
+        return: t('datePicker.return'),
+        timeSelect: t('datePicker.timeSelect'),
+        weeks: {
+          sun: t('datePicker.weeks.sun'),
+          mon: t('datePicker.weeks.mon'),
+          tue: t('datePicker.weeks.tue'),
+          wed: t('datePicker.weeks.wed'),
+          thu: t('datePicker.weeks.thu'),
+          fri: t('datePicker.weeks.fri'),
+          sat: t('datePicker.weeks.sat'),
+        },
+        year: t('datePicker.year'),
+        month: t('datePicker.month'),
+        hour: t('datePicker.hour'),
+        minute: t('datePicker.minute'),
+        second: t('datePicker.second')
+      })
     })
   }
 

src/editor/core/draw/particle/date/DatePicker.ts

@@ -1,14 +1,38 @@
 import { EDITOR_PREFIX } from '../../../../dataset/constant/Editor'
 import { IElement, IElementPosition } from '../../../../interface/Element'
+import { datePicker } from '../../../i18n/lang/zh-CN.json'
+
+export interface IDatePickerLang {
+  now: string;
+  confirm: string;
+  return: string;
+  timeSelect: string;
+  weeks: {
+    sun: string;
+    mon: string;
+    tue: string;
+    wed: string;
+    thu: string;
+    fri: string;
+    sat: string;
+  };
+  year: string;
+  month: string;
+  hour: string;
+  minute: string;
+  second: string;
+}
 
 export interface IDatePickerOption {
   mountDom?: HTMLElement;
   onSubmit?: (date: string) => any;
+  getLang?: () => IDatePickerLang
 }
 
 interface IDatePickerDom {
   container: HTMLDivElement;
   dateWrap: HTMLDivElement;
+  datePickerWeek: HTMLDivElement;
   timeWrap: HTMLUListElement;
   title: {
     preYear: HTMLSpanElement;
@@ -45,12 +69,14 @@ export class DatePicker {
   private renderOptions: IRenderOption | null
   private isDatePicker: boolean
   private pickDate: Date | null
+  private lang: IDatePickerLang
 
   constructor(options: IDatePickerOption = {}) {
     this.options = {
       mountDom: document.body,
       ...options
     }
+    this.lang = datePicker
     this.now = new Date()
     this.dom = this._createDom()
     this.renderOptions = null
@@ -89,7 +115,8 @@ export class DatePicker {
     // week-星期显示
     const datePickerWeek = document.createElement('div')
     datePickerWeek.classList.add(`${EDITOR_PREFIX}-date-week`)
-    const weekList = ['日', '一', '二', '三', '四', '五', '六']
+    const { weeks: { sun, mon, tue, wed, thu, fri, sat } } = this.lang
+    const weekList = [sun, mon, tue, wed, thu, fri, sat]
     weekList.forEach(week => {
       const weekDom = document.createElement('span')
       weekDom.innerText = `${week}`
@@ -108,7 +135,7 @@ export class DatePicker {
     let hourTime: HTMLOListElement
     let minuteTime: HTMLOListElement
     let secondTime: HTMLOListElement
-    const timeList = ['时', '分', '秒']
+    const timeList = [this.lang.hour, this.lang.minute, this.lang.second]
     timeList.forEach((t, i) => {
       const li = document.createElement('li')
       const timeText = document.createElement('span')
@@ -139,13 +166,13 @@ export class DatePicker {
     datePickerMenu.classList.add(`${EDITOR_PREFIX}-date-menu`)
     const timeMenu = document.createElement('button')
     timeMenu.classList.add(`${EDITOR_PREFIX}-date-menu__time`)
-    timeMenu.innerText = '时间选择'
+    timeMenu.innerText = this.lang.timeSelect
     const nowMenu = document.createElement('button')
     nowMenu.classList.add(`${EDITOR_PREFIX}-date-menu__now`)
-    nowMenu.innerText = '此刻'
+    nowMenu.innerText = this.lang.now
     const submitMenu = document.createElement('button')
     submitMenu.classList.add(`${EDITOR_PREFIX}-date-menu__submit`)
-    submitMenu.innerText = '确定'
+    submitMenu.innerText = this.lang.confirm
     datePickerMenu.append(timeMenu)
     datePickerMenu.append(nowMenu)
     datePickerMenu.append(submitMenu)
@@ -157,6 +184,7 @@ export class DatePicker {
     return {
       container: datePickerContainer,
       dateWrap,
+      datePickerWeek,
       timeWrap,
       title: {
         preYear: preYearTitle,
@@ -261,6 +289,23 @@ export class DatePicker {
     this.pickDate = new Date(this.now)
   }
 
+  private _setLang() {
+    this.dom.menu.time.innerText = this.lang.timeSelect
+    this.dom.menu.now.innerText = this.lang.now
+    this.dom.menu.submit.innerText = this.lang.confirm
+    const { weeks: { sun, mon, tue, wed, thu, fri, sat } } = this.lang
+    const weekList = [sun, mon, tue, wed, thu, fri, sat]
+    this.dom.datePickerWeek.childNodes.forEach((child, i) => {
+      (<HTMLSpanElement>child).innerText = weekList[i]
+    })
+    const hourTitle = (<HTMLSpanElement>this.dom.time.hour.previousElementSibling)
+    hourTitle.innerText = this.lang.hour
+    const minuteTitle = (<HTMLSpanElement>this.dom.time.minute.previousElementSibling)
+    minuteTitle.innerText = this.lang.minute
+    const secondTitle = (<HTMLSpanElement>this.dom.time.second.previousElementSibling)
+    secondTitle.innerText = this.lang.second
+  }
+
   private _update() {
     // 本地年月日
     const localDate = new Date()
@@ -279,7 +324,7 @@ export class DatePicker {
     // 当前年月日
     const year = this.now.getFullYear()
     const month = this.now.getMonth() + 1
-    this.dom.title.now.innerText = `${year}年 ${String(month).padStart(2, '0')}月`
+    this.dom.title.now.innerText = `${year}${this.lang.year} ${String(month).padStart(2, '0')}${this.lang.month}`
     // 日期补差
     const curDate = new Date(year, month, 0) // 当月日期
     const curDay = curDate.getDate() // 当月总天数
@@ -338,11 +383,11 @@ export class DatePicker {
     if (this.isDatePicker) {
       this.dom.dateWrap.classList.add('active')
       this.dom.timeWrap.classList.remove('active')
-      this.dom.menu.time.innerText = `时间选择`
+      this.dom.menu.time.innerText = this.lang.timeSelect
     } else {
       this.dom.dateWrap.classList.remove('active')
       this.dom.timeWrap.classList.add('active')
-      this.dom.menu.time.innerText = `返回日期`
+      this.dom.menu.time.innerText = this.lang.return
       // 设置时分秒选择
       this._setTimePick()
     }
@@ -467,6 +512,10 @@ export class DatePicker {
 
   public render(option: IRenderOption) {
     this.renderOptions = option
+    if (this.options.getLang) {
+      this.lang = this.options.getLang()
+      this._setLang()
+    }
     this._setValue()
     this._update()
     this._setPosition()

src/editor/core/i18n/I18n.ts

@@ -0,0 +1,42 @@
+import { ILang } from '../../interface/i18n/I18n'
+import zhCN from './lang/zh-CN.json'
+import en from './lang/en.json'
+
+export class I18n {
+
+  private langMap: Map<string, ILang> = new Map([
+    ['zhCN', zhCN],
+    ['en', en]
+  ])
+
+  private currentLocale = 'zhCN'
+
+  public registerLangMap(locale: string, lang: ILang) {
+    this.langMap.set(locale, lang)
+  }
+
+  public setLocale(locale: string) {
+    this.currentLocale = locale
+  }
+
+  public getLang(): ILang {
+    return this.langMap.get(this.currentLocale) || zhCN
+  }
+
+  public t(path: string): string {
+    const keyList = path.split('.')
+    let value = ''
+    let item = this.getLang()
+    for (let k = 0; k < keyList.length; k++) {
+      const key = keyList[k]
+      const currentValue = Reflect.get(item, key)
+      if (currentValue) {
+        value = item = currentValue
+      } else {
+        return ''
+      }
+    }
+    return value
+  }
+
+}

src/editor/core/i18n/lang/en.json

@@ -0,0 +1,61 @@
+{
+  "contextmenu": {
+    "global": {
+      "cut": "Cut",
+      "copy": "Copy",
+      "paste": "Paste",
+      "selectAll": "Select all",
+      "print": "Print"
+    },
+    "control": {
+      "delete": "Delete control"
+    },
+    "hyperlink": {
+      "delete": "Delete hyperlink",
+      "cancel": "Cancel hyperlink",
+      "edit": "Edit hyperlink"
+    },
+    "image": {
+      "change": "Change image",
+      "saveAs": "Save as image",
+      "textWrap": "Text wrap",
+      "textWrapType": {
+        "embed": "Embed",
+        "upDown": "Up down"
+      }
+    },
+    "table": {
+      "insertRowCol": "Insert row col",
+      "insertTopRow": "Insert top 1 row",
+      "insertBottomRow": "Insert bottom 1 row",
+      "insertLeftCol": "Insert left 1 col",
+      "insertRightCol": "Insert right 1 col",
+      "deleteRowCol": "Delete row col",
+      "deleteRow": "Delete 1 row",
+      "deleteCol": "Delete 1 col",
+      "deleteTable": "Delete table",
+      "mergeCell": "Merge cell",
+      "mergeCancelCell": "Cancel merge cell"
+    }
+  },
+  "datePicker": {
+    "now": "Now",
+    "confirm": "Confirm",
+    "return": "Return",
+    "timeSelect": "Time select",
+    "weeks": {
+      "sun": "Sun",
+      "mon": "Mon",
+      "tue": "Tue",
+      "wed": "Wed",
+      "thu": "Thu",
+      "fri": "Fri",
+      "sat": "Sat"
+    },
+    "year": " ",
+    "month": " ",
+    "hour": "Hour",
+    "minute": "Minute",
+    "second": "Second"
+  }
+}

src/editor/core/i18n/lang/zh-CN.json

@@ -0,0 +1,61 @@
+{
+  "contextmenu": {
+    "global": {
+      "cut": "剪切",
+      "copy": "复制",
+      "paste": "粘贴",
+      "selectAll": "全选",
+      "print": "打印"
+    },
+    "control": {
+      "delete": "删除控件"
+    },
+    "hyperlink": {
+      "delete": "删除链接",
+      "cancel": "取消链接",
+      "edit": "编辑链接"
+    },
+    "image": {
+      "change": "更改图片",
+      "saveAs": "另存为图片",
+      "textWrap": "文字环绕",
+      "textWrapType": {
+        "embed": "嵌入型",
+        "upDown": "上下型环绕"
+      }
+    },
+    "table": {
+      "insertRowCol": "插入行列",
+      "insertTopRow": "上方插入1行",
+      "insertBottomRow": "下方插入1行",
+      "insertLeftCol": "左侧插入1列",
+      "insertRightCol": "右侧插入1列",
+      "deleteRowCol": "删除行列",
+      "deleteRow": "删除1行",
+      "deleteCol": "删除1列",
+      "deleteTable": "删除整个表格",
+      "mergeCell": "合并单元格",
+      "mergeCancelCell": "取消合并"
+    }
+  },
+  "datePicker": {
+    "now": "此刻",
+    "confirm": "确定",
+    "return": "返回日期",
+    "timeSelect": "时间选择",
+    "weeks": {
+      "sun": "日",
+      "mon": "一",
+      "tue": "二",
+      "wed": "三",
+      "thu": "四",
+      "fri": "五",
+      "sat": "六"
+    },
+    "year": "年",
+    "month": "月",
+    "hour": "时",
+    "minute": "分",
+    "second": "秒"
+  }
+}

src/editor/core/register/Register.ts

@@ -2,21 +2,26 @@ import { IRegisterContextMenu } from '../../interface/contextmenu/ContextMenu'
 import { IRegisterShortcut } from '../../interface/shortcut/Shortcut'
 import { ContextMenu } from '../contextmenu/ContextMenu'
 import { Shortcut } from '../shortcut/Shortcut'
+import { I18n } from '../i18n/I18n'
+import { ILang } from '../../interface/i18n/I18n'
 
 interface IRegisterPayload {
   contextMenu: ContextMenu;
   shortcut: Shortcut;
+  i18n: I18n;
 }
 
 export class Register {
 
   public contextMenuList: (payload: IRegisterContextMenu[]) => void
   public shortcutList: (payload: IRegisterShortcut[]) => void
+  public langMap: (locale: string, lang: ILang) => void
 
   constructor(payload: IRegisterPayload) {
-    const { contextMenu, shortcut } = payload
+    const { contextMenu, shortcut, i18n } = payload
     this.contextMenuList = contextMenu.registerContextMenuList.bind(contextMenu)
     this.shortcutList = shortcut.registerShortcutList.bind(shortcut)
+    this.langMap = i18n.registerLangMap.bind(i18n)
   }
 
 }

src/editor/index.ts

@@ -28,6 +28,7 @@ import { Shortcut } from './core/shortcut/Shortcut'
 import { KeyMap } from './dataset/enum/KeyMap'
 import { BlockType } from './dataset/enum/Block'
 import { IBlock } from './interface/Block'
+import { ILang } from './interface/i18n/I18n'
 
 export default class Editor {
 
@@ -110,7 +111,8 @@ export default class Editor {
     // 注册
     this.register = new Register({
       contextMenu,
-      shortcut
+      shortcut,
+      i18n: draw.getI18n()
     })
     // 注册销毁方法
     this.destroy = () => {
@@ -147,5 +149,6 @@ export type {
   IRegisterContextMenu,
   IWatermark,
   INavigateInfo,
-  IBlock
+  IBlock,
+  ILang
 }

src/editor/interface/contextmenu/ContextMenu.ts

@@ -12,6 +12,7 @@ export interface IContextMenuContext {
 }
 
 export interface IRegisterContextMenu {
+  i18nPath?: string;
   isDivider?: boolean;
   icon?: string;
   name?: string;
@@ -20,3 +21,43 @@ export interface IRegisterContextMenu {
   callback?: (command: Command, context: IContextMenuContext) => any;
   childMenus?: IRegisterContextMenu[];
 }
+
+export interface IContextmenuLang {
+  global: {
+    cut: string;
+    copy: string;
+    paste: string;
+    selectAll: string;
+    print: string;
+  };
+  control: {
+    delete: string;
+  };
+  hyperlink: {
+    delete: string;
+    cancel: string;
+    edit: string;
+  };
+  image: {
+    change: string;
+    saveAs: string;
+    textWrap: string;
+    textWrapType: {
+      embed: string;
+      upDown: string;
+    }
+  };
+  table: {
+    insertRowCol: string;
+    insertTopRow: string;
+    insertBottomRow: string;
+    insertLeftCol: string;
+    insertRightCol: string;
+    deleteRowCol: string;
+    deleteRow: string;
+    deleteCol: string;
+    deleteTable: string;
+    mergeCell: string;
+    mergeCancelCell: string;
+  };
+}

src/editor/interface/i18n/I18n.ts

@@ -0,0 +1,7 @@
+import { IDatePickerLang } from '../../core/draw/particle/date/DatePicker'
+import { IContextmenuLang } from '../contextmenu/ContextMenu'
+
+export interface ILang {
+  contextmenu: IContextmenuLang;
+  datePicker: IDatePickerLang;
+}