docs: support document internationalization #222

* docs: add English docuemnt #213 * docs: support document internationalization #222 --------- Co-authored-by: Hufe921 <huangyunfeihufe@hotmail.com>
2023-07-27 21:22:26 +08:00
parent fc356c7eb6
commit 9f8016884f
33 changed files with 2842 additions and 430 deletions
@@ -0,0 +1,24 @@
+# Global API
+
+## How to Use
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+instance.apiName()
+```
+
+## destroy
+
+Feature: Destroy the editor
+
+Usage：
+
+```javascript
+instance.destroy()
+```
+
+::: warning
+Only destroy the editor DOM and related events, menu bars, toolbars, external variables, etc. need to be handled by themselves.
+:::
@@ -0,0 +1,745 @@
+# Execute Command
+
+## How to Use
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+instance.command.commandName()
+```
+
+## executeMode
+
+Feature: Switch editor mode (Edit, Clean, Read only)
+
+Usage:
+
+```javascript
+instance.command.executeMode(editorMode: EditorMode)
+```
+
+## executeCut
+
+Feature: Cut
+
+Usage:
+
+```javascript
+instance.command.executeCut()
+```
+
+## executeCopy
+
+Feature: Copy
+
+Usage:
+
+```javascript
+instance.command.executeCopy()
+```
+
+## executePaste
+
+Feature: Paste
+
+Usage:
+
+```javascript
+instance.command.executePaste()
+```
+
+## executeSelectAll
+
+Feature: Select all
+
+Usage:
+
+```javascript
+instance.command.executeSelectAll()
+```
+
+## executeBackspace
+
+Feature: Forward delete
+
+Usage:
+
+```javascript
+instance.command.executeBackspace()
+```
+
+## executeSetRange
+
+Feature: Set selection
+
+Usage:
+
+```javascript
+instance.command.executeSetRange(startIndex: number , endIndex: number)
+```
+
+## executeUndo
+
+Feature: Undo
+
+Usage:
+
+```javascript
+instance.command.executeUndo()
+```
+
+## executeRedo
+
+Feature: Redo
+
+Usage:
+
+```javascript
+instance.command.executeRedo()
+```
+
+## executePainter
+
+Feature: Format Brush - Copy style
+
+Usage:
+
+```javascript
+instance.command.executePainter()
+```
+
+## executeApplyPainterStyle
+
+Feature: Format brush - Apply style
+
+Usage:
+
+```javascript
+instance.command.executeApplyPainterStyle()
+```
+
+## executeFormat
+
+Feature: Clear format
+
+Usage:
+
+```javascript
+instance.command.executeFormat()
+```
+
+## executeFont
+
+Feature: Set font
+
+Usage:
+
+```javascript
+instance.command.executeFont(font: string)
+```
+
+## executeSize
+
+Feature: Set font size
+
+Usage:
+
+```javascript
+instance.command.executeSize(size: number)
+```
+
+## executeSizeAdd
+
+Feature: Increase the font size
+
+Usage:
+
+```javascript
+instance.command.executeSizeAdd()
+```
+
+## executeSizeMinus
+
+Feature: Reduce the font size
+
+Usage:
+
+```javascript
+instance.command.executeSizeMinus()
+```
+
+## executeBold
+
+Feature: Bold
+
+Usage:
+
+```javascript
+instance.command.executeBold()
+```
+
+## executeItalic
+
+Feature: Italic
+
+Usage:
+
+```javascript
+instance.command.executeItalic()
+```
+
+## executeUnderline
+
+Feature: Underline
+
+Usage:
+
+```javascript
+instance.command.executeUnderline()
+```
+
+## executeStrikeout
+
+Feature: Strikeout
+
+Usage:
+
+```javascript
+instance.command.executeStrikeout()
+```
+
+## executeSuperscript
+
+Feature: Superscript
+
+Usage:
+
+```javascript
+instance.command.executeSuperscript()
+```
+
+## executeSubscript
+
+Feature: Subscript
+
+Usage:
+
+```javascript
+instance.command.executeSubscript()
+```
+
+## executeColor
+
+Feature: Font color
+
+Usage:
+
+```javascript
+instance.command.executeColor()
+```
+
+## executeHighlight
+
+Feature: Highlight
+
+Usage:
+
+```javascript
+instance.command.executeHighlight()
+```
+
+## executeTitle
+
+Feature: Set title
+
+Usage:
+
+```javascript
+instance.command.executeTitle(TitleLevel | null)
+```
+
+## executeList
+
+Feature: Set list
+
+Usage:
+
+```javascript
+instance.command.executeList(listType: ListType | null, listStyle?: ListStyle)
+```
+
+## executeRowFlex
+
+Feature: Line alignment
+
+Usage:
+
+```javascript
+instance.command.executeRowFlex(rowFlex: RowFlex)
+```
+
+## executeRowMargin
+
+Feature: Line spacing
+
+Usage:
+
+```javascript
+instance.command.executeRowMargin(rowMargin: number)
+```
+
+## executeInsertTable
+
+Feature: Insert table
+
+Usage:
+
+```javascript
+instance.command.executeInsertTable(row: number, col: number)
+```
+
+## executeInsertTableTopRow
+
+Feature: Insert a row up
+
+Usage:
+
+```javascript
+instance.command.executeInsertTableTopRow()
+```
+
+## executeInsertTableBottomRow
+
+Feature: Insert a row down
+
+Usage:
+
+```javascript
+instance.command.executeInsertTableBottomRow()
+```
+
+## executeInsertTableLeftCol
+
+Feature: Insert a column to the left
+
+Usage:
+
+```javascript
+instance.command.executeInsertTableLeftCol()
+```
+
+## executeInsertTableRightCol
+
+Feature: Insert a column to the right
+
+Usage:
+
+```javascript
+instance.command.executeInsertTableRightCol()
+```
+
+## executeDeleteTableRow
+
+Feature: Deletes the current row
+
+Usage:
+
+```javascript
+instance.command.executeDeleteTableRow()
+```
+
+## executeDeleteTableCol
+
+Feature: Delete the current column
+
+Usage:
+
+```javascript
+instance.command.executeDeleteTableCol()
+```
+
+## executeDeleteTable
+
+Feature: Delete the table
+
+Usage:
+
+```javascript
+instance.command.executeDeleteTable()
+```
+
+## executeMergeTableCell
+
+Feature: Merge tables
+
+Usage:
+
+```javascript
+instance.command.executeMergeTableCell()
+```
+
+## executeCancelMergeTableCell
+
+Feature: Cancel the merge form
+
+Usage:
+
+```javascript
+instance.command.executeCancelMergeTableCell()
+```
+
+## executeTableTdVerticalAlign
+
+Feature: Table cell vertical alignment
+
+Usage:
+
+```javascript
+instance.command.executeTableTdVerticalAlign(payload: VerticalAlign)
+```
+
+## executeTableBorderType
+
+Feature: Table border type
+
+Usage:
+
+```javascript
+instance.command.executeTableBorderType(payload: TableBorder)
+```
+
+## executeTableTdBackgroundColor
+
+Feature: Table cell background color
+
+Usage:
+
+```javascript
+instance.command.executeTableTdBackgroundColor(payload: string)
+```
+
+## executeImage
+
+Feature: Insert a picture
+
+Usage:
+
+```javascript
+instance.command.executeImage({
+  width: number;
+  height: number;
+  value: string;
+})
+```
+
+## executeHyperlink
+
+Feature: Insert a link
+
+Usage:
+
+```javascript
+instance.command.executeHyperlink({
+  type: ElementType.HYPERLINK,
+  value: string,
+  url: string,
+  valueList: IElement[]
+})
+```
+
+## executeDeleteHyperlink
+
+Feature: Delete the link
+
+Usage:
+
+```javascript
+instance.command.executeDeleteHyperlink()
+```
+
+## executeCancelHyperlink
+
+Feature: Unlink
+
+Usage:
+
+```javascript
+instance.command.executeCancelHyperlink()
+```
+
+## executeEditHyperlink
+
+Feature: Edit the link
+
+Usage:
+
+```javascript
+instance.command.executeEditHyperlink(newUrl: string)
+```
+
+## executeSeparator
+
+Feature: Insert a dividing line
+
+Usage:
+
+```javascript
+instance.command.executeSeparator(dashArray: number[])
+```
+
+## executePageBreak
+
+Feature: Page breaks
+
+Usage:
+
+```javascript
+instance.command.executePageBreak()
+```
+
+## executeAddWatermark
+
+Feature: Add a watermark
+
+Usage:
+
+```javascript
+instance.command.executeAddWatermark({
+  data: string;
+  color?: string;
+  opacity?: number;
+  size?: number;
+  font?: string;
+})
+```
+
+## executeDeleteWatermark
+
+Feature: Remove the watermark
+
+Usage:
+
+```javascript
+instance.command.executeDeleteWatermark()
+```
+
+## executeSearch
+
+Feature: 搜索
+
+Usage:
+
+```javascript
+instance.command.executeSearch(keyword: string)
+```
+
+## executeSearchNavigatePre
+
+Feature: Search Navigation - Previous
+
+Usage:
+
+```javascript
+instance.command.executeSearchNavigatePre()
+```
+
+## executeSearchNavigateNext
+
+Feature: Search Navigation - Next
+
+Usage:
+
+```javascript
+instance.command.executeSearchNavigateNext()
+```
+
+## executeReplace
+
+Feature: Search for replacement
+
+Usage:
+
+```javascript
+instance.command.executeReplace(newWord: string)
+```
+
+## executePrint
+
+Feature: Print
+
+Usage:
+
+```javascript
+instance.command.executePrint()
+```
+
+## executeReplaceImageElement
+
+Feature: Replace the picture
+
+Usage:
+
+```javascript
+instance.command.executeReplaceImageElement(newUrl: string)
+```
+
+## executeSaveAsImageElement
+
+Feature: Save as picture
+
+Usage:
+
+```javascript
+instance.command.executeSaveAsImageElement()
+```
+
+## executeChangeImageDisplay
+
+Feature: Change how image rows are displayed
+
+Usage:
+
+```javascript
+instance.command.executeSaveAsImageElement(element: IElement, display: ImageDisplay)
+```
+
+## executePageMode
+
+Feature: Page mode
+
+Usage:
+
+```javascript
+instance.command.executePageMode(pageMode: PageMode)
+```
+
+## executePageScaleRecovery
+
+Feature: Restore the original zoom factor of the page
+
+Usage:
+
+```javascript
+instance.command.executePageScaleRecovery()
+```
+
+## executePageScaleMinus
+
+Feature: Page zoom out
+
+Usage:
+
+```javascript
+instance.command.executePageScaleMinus()
+```
+
+## executePageScaleAdd
+
+Feature: Page zoom in
+
+Usage:
+
+```javascript
+instance.command.executePageScaleAdd()
+```
+
+## executePaperSize
+
+Feature: Set the paper size
+
+Usage:
+
+```javascript
+instance.command.executePaperSize(width: number, height: number)
+```
+
+## executePaperDirection
+
+Feature: Set the paper orientation
+
+Usage:
+
+```javascript
+instance.command.executePaperDirection(paperDirection: PaperDirection)
+```
+
+## executeSetPaperMargin
+
+Feature: Set the paper margins
+
+Usage:
+
+```javascript
+instance.command.executeSetPaperMargin([top: number, right: number, bottom: number, left: number])
+```
+
+## executeInsertElementList
+
+Feature: Insert an element
+
+Usage:
+
+```javascript
+instance.command.executeInsertElementList(elementList: IElement[])
+```
+
+## executeAppendElementList
+
+Feature: Append elements
+
+Usage:
+
+```javascript
+instance.command.executeAppendElementList(elementList: IElement[], options?: IAppendElementListOption)
+```
+
+## executeSetValue
+
+Feature: Set the editor data
+
+Usage:
+
+```javascript
+instance.command.executeSetValue(payload: Partial<IEditorData>)
+```
+
+## executeRemoveControl
+
+Feature: Delete the control
+
+Usage:
+
+```javascript
+instance.command.executeRemoveControl()
+```
+
+## executeSetLocale
+
+Feature: Set local language
+
+Usage:
+
+```javascript
+instance.command.executeSetLocale(locale: string)
+```
+
+## executeLocationCatalog
+
+Feature: Locate directory location
+
+Usage:
+
+```javascript
+instance.command.executeLocationCatalog(titleId: string)
+```
+
+## executeWordTool
+
+Feature: Word Tool (Delete blank lines and leading Spaces)
+
+Usage:
+
+```javascript
+instance.command.executeWordTool()
+```
@@ -0,0 +1,116 @@
+# Get Data Command
+
+## How to Use
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+const value = instance.command.commandName()
+```
+
+## getValue
+
+Feature: Get the current document value
+
+Usage:
+
+```javascript
+const {
+  version: string;
+  width: number;
+  height: number;
+  margins: IMargin;
+  header?: IHeader;
+  watermark?: IWatermark;
+  data: IEditorData;
+} = instance.command.getValue(options?: IGetValueOption)
+```
+
+## getImage
+
+Feature: Gets the base64 string of the current page image
+
+Usage:
+
+```javascript
+const base64StringList = await instance.command.getImage(pixelRatio?: number)
+```
+
+## getWordCount
+
+Feature: Get document word count
+
+Usage:
+
+```javascript
+const wordCount = await instance.command.getWordCount()
+```
+
+## getRangeText
+
+Feature: Get selection text
+
+Usage:
+
+```javascript
+const rangeText = instance.command.getRangeText()
+```
+
+## getRangeContext
+
+Feature: Get selection context
+
+Usage:
+
+```javascript
+const rangeContext = instance.command.getRangeContext()
+```
+
+## getPaperMargin
+
+Feature: Gets the margins
+
+Usage:
+
+```javascript
+const [top: number, right: number, bottom: number, left: number] =
+  instance.command.getPaperMargin()
+```
+
+## getSearchNavigateInfo
+
+Feature: Get search navigation information
+
+Usage:
+
+```javascript
+const {
+  index: number;
+  count: number;
+} = instance.command.getSearchNavigateInfo()
+```
+
+## getCatalog
+
+Feature: Get directory
+
+Usage:
+
+```javascript
+const catalog = await instance.command.getCatalog()
+```
+
+## getHTML
+
+Feature: Get HTML
+
+Usage:
+
+```javascript
+const {
+  header: string
+  main: string
+  footer: string
+} = await instance.command.getHTML()
+```
@@ -0,0 +1,20 @@
+# Customize Contextmenu
+
+## How to Use
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+instance.register.contextMenuList([
+    {
+      isDivider?: boolean;
+      icon?: string;
+      name?: string; // Use %s for selection text. Example: Search: %s
+      shortCut?: string;
+      when?: (payload: IContextMenuContext) => boolean;
+      callback?: (command: Command, context: IContextMenuContext) => any;
+      childMenus?: IRegisterContextMenu[];
+    }
+  ])
+```
@@ -0,0 +1,49 @@
+# Internal Contextmenu
+
+## Global
+
+- Cut
+- Copy
+- Paste
+- Select all
+- Print
+
+## Hyperlinks
+
+- Delete the link
+- Unlink
+- Edit the link
+
+## Image
+
+- Change the picture
+- Save as picture
+- Text wrapping
+- Embedded type
+- Upper and lower surrounding
+
+## Table
+
+- Table borders
+- All borders
+- Borderless
+- Outer border
+- Vertical alignment
+- Top alignment
+- Center vertically
+- Bottom end alignment
+- Insert rows and columns
+- Insert 1 row above
+- Insert 1 row below
+- Insert 1 column on the left
+- Insert 1 column on the right side
+- Delete rows and columns
+- Delete 1 row
+- Remove 1 column
+- Delete the entire table
+- Merge cells
+- Cancel the merge
+
+## control
+
+- Delete the control
@@ -0,0 +1,121 @@
+# Event Listening(eventBus)
+
+## How to Use
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+
+// register
+instance.eventBus.on<K keyof EventMap>(
+  eventName: K,
+  callback: EventMap[K]
+)
+
+// remove
+instance.eventBus.off<K keyof EventMap>(
+  eventName: K,
+  callback: EventMap[K]
+)
+```
+
+## rangeStyleChange
+
+Feature: The selection style changes
+
+Usage:
+
+```javascript
+instance.eventBus.on('rangeStyleChange', (payload: IRangeStyle) => void)
+```
+
+## visiblePageNoListChange
+
+Feature: The visible page changes
+
+Usage:
+
+```javascript
+instance.eventBus.on('visiblePageNoListChange', (payload: number[]) => void)
+```
+
+## intersectionPageNoChange
+
+Feature: The current page changes
+
+Usage:
+
+```javascript
+instance.eventBus.on('intersectionPageNoChange', (payload: number) => void)
+```
+
+## pageSizeChange
+
+Feature: The current number of pages has changed
+
+Usage:
+
+```javascript
+instance.eventBus.on('pageSizeChange', (payload: number) => void)
+```
+
+## pageScaleChange
+
+Feature: The current page scaling has changed
+
+Usage:
+
+```javascript
+instance.eventBus.on('pageScaleChange', (payload: number) => void)
+```
+
+## contentChange
+
+Feature: The current content has changed
+
+Usage:
+
+```javascript
+instance.eventBus.on('contentChange', () => void)
+```
+
+## controlChange
+
+Feature: The control where the current cursor is located changes
+
+Usage:
+
+```javascript
+instance.eventBus.on('controlChange', (payload: IControl | null) => void)
+```
+
+## pageModeChange
+
+Feature: The page mode changes
+
+Usage:
+
+```javascript
+instance.eventBus.on('pageModeChange', (payload: PageMode) => void)
+```
+
+## saved
+
+Feature: Document saved
+
+Usage:
+
+```javascript
+instance.eventBus.on('saved', (payload: IEditorResult) => void)
+```
+
+## zoneChange
+
+Feature: The zone changes
+
+Usage:
+
+```javascript
+instance.eventBus.on('zoneChange', (payload: EditorZone) => void)
+```
@@ -0,0 +1,93 @@
+# i18n
+
+## How to Use
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+
+// register
+instance.register.langMap(locale: string, lang: ILang)
+
+// set locale
+instance.command.executeSetLocale(locale)
+```
+
+## ILang
+
+```typescript
+interface ILang {
+  contextmenu: {
+    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
+      verticalAlign: string
+      verticalAlignTop: string
+      verticalAlignMiddle: string
+      verticalAlignBottom: string
+      border: string
+      borderAll: string
+      borderEmpty: string
+      borderExternal: string
+    }
+  }
+  datePicker: {
+    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
+  }
+  frame: {
+    header: string
+    footer: string
+  }
+}
+```
@@ -0,0 +1,112 @@
+# Event Listening(listener)
+
+> The listener can respond to only one method. eventBus is recommended for event listening
+
+## How to Use
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+instance.listener.eventName = ()=>{}
+```
+
+## rangeStyleChange
+
+Feature: The selection style changes
+
+Usage:
+
+```javascript
+instance.listener.rangeStyleChange = (payload: IRangeStyle) => {}
+```
+
+## visiblePageNoListChange
+
+Feature: The visible page changes
+
+Usage:
+
+```javascript
+instance.listener.visiblePageNoListChange = (payload: number[]) => {}
+```
+
+## intersectionPageNoChange
+
+Feature: The current page changes
+
+Usage:
+
+```javascript
+instance.listener.intersectionPageNoChange = (payload: number) => {}
+```
+
+## pageSizeChange
+
+Feature: The current page size has changed
+
+Usage:
+
+```javascript
+instance.listener.pageSizeChange = (payload: number) => {}
+```
+
+## pageScaleChange
+
+Feature: The current page scaling has changed
+
+Usage:
+
+```javascript
+instance.listener.pageScaleChange = (payload: number) => {}
+```
+
+## contentChange
+
+Feature: The current content has changed
+
+Usage:
+
+```javascript
+instance.listener.contentChange = () => {}
+```
+
+## controlChange
+
+Feature: The control where the current cursor is located changes
+
+Usage:
+
+```javascript
+instance.listener.controlChange = (payload: IControl | null) => {}
+```
+
+## pageModeChange
+
+Feature: The page mode changes
+
+Usage:
+
+```javascript
+instance.listener.pageModeChange = (payload: PageMode) => {}
+```
+
+## saved
+
+Feature: Document saved
+
+Usage:
+
+```javascript
+instance.listener.saved = (payload: IEditorResult) => {}
+```
+
+## zoneChange
+
+Feature: 区域发生改变
+
+Usage:
+
+```javascript
+instance.listener.zoneChange = (payload: EditorZone) => {}
+```
@@ -0,0 +1,125 @@
+# Configuration
+
+## How to Use ?
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+new Editor(container, IEditorData | IElement[], {
+  // option
+})
+```
+
+## Complete Configuration
+
+```typescript
+interface IEditorOption {
+  mode?: EditorMode // Editor mode: Edit, Clean (Visual aids are not displayed.) For example: page break), read-only. default: Edit
+  defaultType?: string // Default element type. default: TEXT
+  defaultFont?: string // Default font. default: Yahei
+  defaultSize?: number // Default font size. default: 16
+  minSize?: number // Min font size。default: 5
+  maxSize?: number // Max font size。default: 72
+  defaultBasicRowMarginHeight?: number // Default line height。default: 8
+  defaultRowMargin?: number // Default line spacing. default: 1
+  defaultTabWidth?: number // Default tab width. default: 32
+  width?: number // Paper width. default: 794
+  height?: number // Paper height. default: 1123
+  scale?: number // scaling. default: 1
+  pageGap?: number // Paper spacing. default: 20
+  underlineColor?: string // Underline color. default: #000000
+  strikeoutColor?: string // Strikeout color. default: #FF0000
+  rangeColor?: string // Range color. default: #AECBFA
+  rangeAlpha?: number // Range transparency. default: 0.6
+  rangeMinWidth?: number // Range min width. default: 5
+  searchMatchColor?: string // Search for highlight color. default: #FFFF00
+  searchNavigateMatchColor?: string // Search navigation highlighted color.default: #AAD280
+  searchMatchAlpha?: number // Search for highlight transparency. default: 0.6
+  highlightAlpha?: number //  Highlight element transparency. default: 0.6
+  resizerColor?: string // Image sizer color. default: #4182D9
+  resizerSize?: number // Image sizer size. default: 5
+  marginIndicatorSize?: number // The margin indicator length. default: 35
+  marginIndicatorColor?: string // The margin indicator color. default: #BABABA
+  margins?: IMargin // Page margins. default: [100, 120, 100, 120]
+  pageMode?: PageMode // Paper mode: Linkage, Pagination. default: Pagination
+  tdPadding?: number // Cell padding. default: 5
+  defaultTrMinHeight?: number // Default table row minimum height. default: 40
+  defaultColMinWidth?: number // Default minimum width for table columns (applied if the overall width is sufficient, otherwise scaled down). default: 40
+  defaultHyperlinkColor?: string // Default hyperlink color. default: #0000FF
+  header?: IHeader // Header information.{top?:number; maxHeightRadio?:MaxHeightRatio;}
+  footer?: IFooter // Footer information. {bottom?:number; maxHeightRadio?:MaxHeightRatio;}
+  pageNumber?: IPageNumber // Page number information. {bottom:number; size:number; font:string; color:string; rowFlex:RowFlex; format:string; numberType:NumberType;}
+  paperDirection?: PaperDirection // Paper orientation: portrait, landscape
+  inactiveAlpha?: number // When the body content is out of focus, transparency. default: 0.6
+  historyMaxRecordCount: number // History (undo redo) maximum number of records. default: 100
+  printPixelRatio: number // Print the pixel ratio (larger values are clearer, but larger sizes). default: 3
+  wordBreak: WordBreak // Word and punctuation breaks: No punctuation in the first line of the BREAK_WORD &The word is not split, and the line is folded after BREAK_ALL full according to the width of the character. default: BREAK_WORD
+  watermark?: IWatermark // Watermark{data:string; color?:string; opacity?:number; size?:number; font?:string;}
+  control?: IControlOption // Control {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string;}
+  checkbox?: ICheckboxOption // Checkbox {width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; fontStyle?: string;}
+  cursor?: ICursorOption // Cursor style. {width?: number; color?: string; dragWidth?: number; dragColor?: string;}
+  title?: ITitleOption // Title configuration.{ defaultFirstSize?: number; defaultSecondSize?: number; defaultThirdSize?: number defaultFourthSize?: number; defaultFifthSize?: number; defaultSixthSize?: number;}
+  placeholder?: IPlaceholder // Placeholder text
+}
+```
+
+## Header Configuration
+
+```typescript
+interface IHeader {
+  top?: number // Size from the top of the page.default: 30
+  maxHeightRadio?: MaxHeightRatio // Occupies the maximum height ratio of the page.default: HALF
+  disabled?: boolean // Whether to disable
+}
+```
+
+## Footer Configuration
+
+```typescript
+interface IFooter {
+  bottom?: number // The size from the bottom of the page.default: 30
+  maxHeightRadio?: MaxHeightRatio // Occupies the maximum height ratio of the page.default: HALF
+  disabled?: boolean // Whether to disable
+}
+```
+
+## Page Number Configuration
+
+```typescript
+interface IPageNumber {
+  bottom?: number // The size from the bottom of the page.default: 60
+  size?: number // font size.default: 12
+  font?: string // font.default: Yahei
+  color?: string // font color.default: #000000
+  rowFlex?: RowFlex // Line alignment.default: CENTER
+  format?: string // Page number format.default: {pageNo}。example：{pageNo}/{pageCount}
+  numberType?: NumberType // The numeric type. default: ARABIC
+  disabled?: boolean // Whether to disable
+  startPageNo?: number // Start page number.default: 1
+  fromPageNo?: number // Page numbers appear from page number.default: 0
+}
+```
+
+## Watermark Configuration
+
+```typescript
+interface IWatermark {
+  data: string // text.
+  color?: string // color.default: #AEB5C0
+  opacity?: number // transparency.default: 0.3
+  size?: number // font size.default: 200
+  font?: string // font.default: Yahei
+}
+```
+
+## Placeholder Text Configuration
+
+```typescript
+interface IPlaceholder {
+  data: string // text.
+  color?: string // color.default: #DCDFE6
+  opacity?: number // transparency.default: 1
+  size?: number // font size.default: 16
+  font?: string // font.default: Yahei
+}
+```
@@ -0,0 +1,23 @@
+# Custom Plugin
+
+::: warning
+Currently, only methods can be added and modified to the editor instance, and more functions will be extended in the future
+:::
+
+## Write a Plugin
+
+```javascript
+export function myPlugin(editor: Editor, options?: Option) {
+  // 1. update，see more：src/plugins/copy
+  editor.command.updateFunction = () => {}
+
+  // 2. add，see more：src/plugins/markdown
+  editor.command.addFunction = () => {}
+}
+```
+
+## Use Plugin
+
+```javascript
+instance.add(myPlugin, options?: Option)
+```
@@ -0,0 +1,132 @@
+# Data Structure
+
+```typescript
+interface IElement {
+  // basic
+  id?: string;
+  type?: {
+    TEXT = 'text',
+    IMAGE = 'image',
+    TABLE = 'table',
+    HYPERLINK = 'hyperlink',
+    SUPERSCRIPT = 'superscript',
+    SUBSCRIPT = 'subscript',
+    SEPARATOR = 'separator',
+    PAGE_BREAK = 'pageBreak',
+    CONTROL = 'control',
+    CHECKBOX = 'checkbox',
+    LATEX = 'latex',
+    TAB = 'tab',
+    DATE = 'date',
+    BLOCK = 'block'
+  };
+  value: string;
+  valueList?: IElement[]; // Use of composite elements (hyperlinks, titles, lists, and so on).
+  // style
+  font?: string;
+  size?: number;
+  width?: number;
+  height?: number;
+  bold?: boolean;
+  color?: string;
+  highlight?: string;
+  italic?: boolean;
+  underline?: boolean;
+  strikeout?: boolean;
+  rowFlex?: {
+    LEFT = 'left',
+    CENTER = 'center',
+    RIGHT = 'right',
+    ALIGNMENT = 'alignment'
+  };
+  rowMargin?: number;
+  letterSpacing?: number;
+  // table
+  colgroup?: {
+    width: number;
+  }[];
+  trList?: {
+    height: number;
+    tdList: {
+      colspan: number;
+      rowspan: number;
+      verticalAlign?: VerticalAlign;
+      backgroundColor?: string;
+      value: IElement[];
+    }[];
+  }[];
+  borderType?: TableBorder;
+  // Hyperlinks
+  url?: string;
+  // Superscript and subscript
+  actualSize?: number;
+  // Dividing line
+  dashArray?: number[];
+  // control
+  control?: {
+    type: {
+      TEXT = 'text',
+      SELECT = 'select',
+      CHECKBOX = 'checkbox'
+    };
+    value: IElement[] | null;
+    placeholder?: string;
+    conceptId?: string;
+    prefix?: string;
+    postfix?: string;
+    code: string | null;
+    min?: number;
+    max?: number;
+    valueSets: {
+      value: string;
+      code: string;
+    }[];
+    checkbox?: {
+      value: boolean | null;
+      code?: string;
+      disabled?: boolean;
+    };
+  };
+  controlComponent?: {
+    PREFIX = 'prefix',
+    POSTFIX = 'postfix',
+    PLACEHOLDER = 'placeholder',
+    VALUE = 'value',
+    CHECKBOX = 'checkbox'
+  };
+  // checkbox
+  checkbox?: {
+    value: boolean | null;
+    code?: string;
+    disabled?: boolean;
+  };
+  // LaTeX
+  laTexSVG?: string;
+  // date
+  dateFormat?: string;
+  // picture
+  imgDisplay?: {
+    INLINE = 'inline',
+    BLOCK = 'block'
+  }
+  // block
+  block?: {
+    type: {
+      IFRAME = 'iframe',
+      VIDEO = 'video'
+    };
+    iframeBlock?: {
+      src: string;
+    };
+    videoBlock?: {
+      src: string;
+    };
+  };
+  // title
+  level?: TitleLevel;
+  // list
+  listType?: ListType;
+  listStyle?: ListStyle;
+  listWrap?: boolean;
+}
+```
@@ -0,0 +1,21 @@
+# Custom shortcut keys
+
+## How to use?
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+instance.register.shortcutList([
+    {
+      key: KeyMap;
+      ctrl?: boolean;
+      meta?: boolean;
+      mod?: boolean; // windows:ctrl || mac:command
+      shift?: boolean;
+      alt?: boolean;
+      isGlobal?: boolean;
+      callback: (command: Command) => any;
+    }
+  ])
+```
@@ -0,0 +1,165 @@
+# Internal shortcut keys
+
+## Backspace
+
+Feature: Forward delete
+
+## Delete
+
+Feature: Backward delete
+
+## Enter
+
+Feature: Line break
+
+## Shift + Enter
+
+Feature: Line breaks within the list
+
+## ←
+
+Feature: Move to the left
+
+## Shift + ←
+
+Feature: Zoom the selection to the left
+
+## →
+
+Feature: Move to the right
+
+## Shift + →
+
+Feature: Zoom the selection to the right
+
+## ↑
+
+Feature: Move up
+
+## Shift + ↑
+
+Feature: Zoom up the selection
+
+## ↓
+
+Feature: Move down
+
+## Shift + ↓
+
+Feature: Zoom down the selection
+
+## Esc
+
+Feature: Exit format brush
+
+## Tab
+
+Feature: Increase indent
+
+## Ctrl/Cmd + Z
+
+Feature: Undo
+
+## Ctrl/Cmd + Y
+
+Feature: Redo
+
+## Ctrl/Cmd + C
+
+Feature: Copy
+
+## Ctrl/Cmd + X
+
+Feature: Cut
+
+## Ctrl/Cmd + A
+
+Feature: Select all
+
+## Ctrl/Cmd + S
+
+Feature: Save
+
+## Ctrl/Cmd + {
+
+Feature: Increase the font
+
+## Ctrl/Cmd + }
+
+Feature: Reduce the font
+
+## Ctrl/Cmd + B
+
+Feature: Bold
+
+## Ctrl/Cmd + I
+
+Feature: Italic
+
+## Ctrl/Cmd + U
+
+Feature: Underline
+
+## Ctrl/Cmd + L
+
+Feature: Line left
+
+## Ctrl/Cmd + E
+
+Feature: Line center
+
+## Ctrl/Cmd + R
+
+Feature: Line right
+
+## Ctrl/Cmd + J
+
+Feature: Both sides are aligned
+
+## Ctrl + Shift + X
+
+Feature: Strikethrough
+
+## Ctrl/Cmd + Shift + >
+
+Feature: Superscript
+
+## Ctrl/Cmd + Shift + <
+
+Feature: Subscript
+
+## Ctrl + Alt/Option + 0
+
+Feature: Main body
+
+## Ctrl + Alt/Option + 1
+
+Feature: Header1
+
+## Ctrl + Alt/Option + 2
+
+Feature: Header2
+
+## Ctrl + Alt/Option + 3
+
+Feature: Header3
+
+## Ctrl + Alt/Option + 4
+
+Feature: Header4
+
+## Ctrl + Alt/Option + 5
+
+Feature: Header5
+
+## Ctrl + Alt/Option + 6
+
+Feature: Header6
+
+## Ctrl/Cmd + Shift + I
+
+Feature: Unordered list
+
+## Ctrl/Cmd + Shift + U
+
+Feature: Ordered list
@@ -0,0 +1,95 @@
+# Getting Started
+
+> WYSIWYG rich text editor.
+
+Benefit from the complete self-implementation of cursor and text layout. The underlying rendering can also be rendered by svg, See code：[feature/svg](https://github.com/Hufe921/canvas-editor/tree/feature/svg); Or complete pdf drawing with pdfjs,See code：[feature/pdf](https://github.com/Hufe921/canvas-editor/tree/feature/pdf).
+
+::: warning
+The official only provides the editor core layer npm package, the menu bar or other external tools can refer to the document extension, or directly refer the implementation of [official](https://github.com/Hufe921/canvas-editor), See details [demo](https://hufe.club/canvas-editor/).
+:::
+
+## Features
+
+- Rich text operations (Undo, Redo, Font, Size, Bold, Italic, Superscript, Alignment, Title, List, ...)
+- Insert elements (Table, Image, Link, Code Block, Page Break, Math Formula, Date Picker, content Block, ...)
+- Print (Based on canvas to picture, pdf drawing)
+- Controls (Radio, Text, Checkbox)
+- Right-click menu (Internal, Custom)
+- Shortcut keys (Internal, Custom)
+- Text, Element, Control drag and drop
+- Header, Footer, Page Number
+- Page Margin
+- Watermark
+- Pagination
+
+## TODO
+
+- Improve title and list functions
+- Computational performance
+- Control rule
+- Table paging
+- Out of the box version for vue, react and other frameworks
+
+## Step. 1: Download NPM Package
+
+```sh
+npm i @hufe921/canvas-editor --save
+```
+
+## Step. 2: Prepare Container
+
+```html
+<div class="canvas-editor"></div>
+```
+
+## Step. 3: Instantiate Editor
+
+- Examples that only the body content is included
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+
+new Editor(
+  document.querySelector('.canvas-editor'),
+  [
+    {
+      value: 'Hello World'
+    }
+  ],
+  {}
+)
+```
+
+- Examples that contain body, header, footer content
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+
+new Editor(
+  document.querySelector('.canvas-editor'),
+  {
+    header: [
+      {
+        value: 'Header',
+        rowFlex: RowFlex.CENTER
+      }
+    ],
+    main: [
+      {
+        value: 'Hello World'
+      }
+    ],
+    footer: [
+      {
+        value: 'canvas-editor',
+        size: 12
+      }
+    ]
+  },
+  {}
+)
+```
+
+## Step. 4: Configuration Editor
+
+See the next section for details
@@ -0,0 +1,43 @@
+---
+layout: home
+
+title: canvas-editor
+titleTemplate: rich text editor by canvas/svg
+
+hero:
+  name: canvas-editor
+  text: canvas/svg based rich text editor
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /en/guide/start.html
+    - theme: alt
+      text: View on Github
+      link: https://github.com/Hufe921/canvas-editor
+
+features:
+  - icon: 💡
+    title: WYSIWYG
+    details: Similar to word pageable, what you see is what you get
+  - icon: ⚡️
+    title: Lightweight Data Structure
+    details: A piece of JSON can render complex styles
+  - icon: 🛠️
+    title: Rich Features
+    details: Supports familiar rich text operations, tables, watermarks, controls, formulas, etc
+  - icon: 📦
+    title: Easy to Use
+    details: The core npm package is officially released, and the menu bar and toolbar can be maintained by themselves
+  - icon: 🔩
+    title: Flexible Development Mechanism
+    details: Through the interface, you can obtain the life cycle, event callback, custom right-click menu, and shortcut keys
+  - icon: 🔑
+    title: Full TypeScript Types API
+    details: Flexible apis and full TypeScript types
+---
+
+<style>
+  .main>p {
+    max-width:100% !important;
+  }
+</style>