Skip to content
On this page

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), ReadOnly, Form (Only editable within the control), Print (Visual aids are not displayed, Unwritten content control), Design (Do not handle configurations such as non deletable and read-only). default: Edit
  locale?: string // Language. default: zhCN
  defaultType?: string // Default element type. default: TEXT
  defaultColor?: string // Default color. default: #000000
  defaultFont?: string // Default font. default: Microsoft 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
  highlightMarginHeight?: number // Highlight element margin height. default: 8
  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
  renderMode?: RenderMode // Render mode: speed(multi words combination rendering), compatibility(word by word rendering:avoid environmental differences such as browse,fonts...). default: speed
  defaultHyperlinkColor?: string // Default hyperlink color. default: #0000FF
  table?: ITableOption // Table configuration
  header?: IHeader // Header configuration
  footer?: IFooter // Footer configuration
  pageNumber?: IPageNumber // Page number configuration
  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
  maskMargin?: IMargin // Masking margins above the editor(for example: menu bar, bottom toolbar)。default: [0, 0, 0, 0]
  letterClass?: string[] // Alphabet class supported by typesetting. default: a-zA-Z. Built-in alternative alphabet class: LETTER_CLASS
  contextMenuDisableKeys?: string[] // Disable context menu keys. default: []
  shortcutDisableKeys?: string[] // Disable shortcut keys. default: []
  scrollContainerSelector?: string // scroll container selector. default: document
  pageOuterSelectionDisable?: boolean // Disable selection when the mouse moves out of the page. default: false
  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 configuration
  control?: IControlOption // Control configuration
  checkbox?: ICheckboxOption // Checkbox configuration
  radio?: IRadioOption // Radio configuration
  cursor?: ICursorOption // Cursor style configuration
  title?: ITitleOption // Title configuration
  placeholder?: IPlaceholder // Placeholder text configuration
  group?: IGroup // Group configuration
  pageBreak?: IPageBreak // Page break configuration
  zone?: IZoneOption // Zone configuration
  background?: IBackgroundOption // Background configuration
  lineBreak?: ILineBreakOption // Line break configuration
  whiteSpace?: IWhiteSpaceOption // White space configuration
  separator?: ISeparatorOption // Separator configuration
  lineNumber?: ILineNumberOption // Line number configuration
  pageBorder?: IPageBorderOption // Page border configuration
  badge?: IBadgeOption // Badge configuration
  modeRule?: IModeRule // Mode rule configuration
  graffiti?: IGraffitiOption // Graffiti mode configuration
  label?: ILabelOption // Label configuration
  imgCaption?: IImgCaptionOption // Image caption configuration
  list?: IListOption // List configuration
}

Table Configuration

typescript
interface ITableOption {
  tdPadding?: IPadding // Cell padding. default: [0, 5, 5, 5]
  defaultTrMinHeight?: number // Default table row minimum height. default: 42
  defaultColMinWidth?: number // Default minimum width for table columns (applied if the overall width is sufficient, otherwise
  overflow?: boolean // Is it allowed for the table to exceed the main body. Default: true
}

Header Configuration

typescript
interface IHeader {
  top?: number // Size from the top of the page.default: 30
  inactiveAlpha?: number // Transparency during deactivation. default: 1
  maxHeightRadio?: MaxHeightRatio // Occupies the maximum height ratio of the page.default: HALF
  disabled?: boolean // Whether to disable
  editable?: boolean // Disable the header content from being edited
}
typescript
interface IFooter {
  bottom?: number // The size from the bottom of the page.default: 30
  inactiveAlpha?: number // Transparency during deactivation. default: 1
  maxHeightRadio?: MaxHeightRatio // Occupies the maximum height ratio of the page.default: HALF
  disabled?: boolean // Whether to disable
  editable?: boolean // Disable the footer content from being edited
}

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: Microsoft 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
  maxPageNo?: number | null // Max page number(starting from 0).default: null
}

Watermark Configuration

typescript
interface IWatermark {
  data: string // text.
  type?: WatermarkType
  width?: number
  height?: number
  color?: string // color. default: #AEB5C0
  opacity?: number // transparency. default: 0.3
  size?: number // font size. default: 200
  font?: string // font. default: Microsoft YaHei
  repeat?: boolean // repeat watermark. default: false
  gap?: [horizontal: number, vertical: number] // watermark spacing. default: [10,10]
  numberType?: NumberType // The numeric type. default: ARABIC
  layer?: WatermarkLayer // watermark layer. default: bottom
}

Control Configuration

typescript
interface IControlOption {
  placeholderColor?: string // Placeholder color. default: #000000
  bracketColor?: string // Bracket color. default: #000000
  prefix?: string // Prefix character. default: {}
  postfix?: string // Postfix character. default: {}
  borderWidth?: number // Border width. default: 0
  borderColor?: string // Border color
  activeBackgroundColor?: string // Background color when active
  disabledBackgroundColor?: string // Background color when disabled
  existValueBackgroundColor?: string // Background color when has value
  noValueBackgroundColor?: string // Background color when no value
}

Checkbox Configuration

typescript
interface ICheckboxOption {
  width?: number // Width. default: 14
  height?: number // Height. default: 14
  gap?: number // Gap between checkbox and text. default: 5
  lineWidth?: number // Border line width. default: 1
  fillStyle?: string // Fill style. default: #FFFFFF
  strokeStyle?: string // Border color. default: #000000
  checkFillStyle?: string // Fill style when checked
  checkStrokeStyle?: string // Border color when checked
  checkMarkColor?: string // Check mark color
  verticalAlign?: VerticalAlign // Vertical alignment. default: MIDDLE
}

Radio Configuration

typescript
interface IRadioOption {
  width?: number // Width. default: 14
  height?: number // Height. default: 14
  gap?: number // Gap between radio and text. default: 5
  lineWidth?: number // Border line width. default: 1
  fillStyle?: string // Fill style. default: #FFFFFF
  strokeStyle?: string // Border color. default: #000000
  verticalAlign?: VerticalAlign // Vertical alignment. default: MIDDLE
}

Cursor Configuration

typescript
interface ICursorOption {
  width?: number // Cursor width. default: 1
  color?: string // Cursor color. default: #000000
  dragWidth?: number // Drag cursor width. default: 2
  dragColor?: string // Drag cursor color. default: #000000
  dragFloatImageDisabled?: boolean // Whether to disable drag float image. default: false
}

Title Configuration

typescript
interface ITitleOption {
  defaultFirstSize?: number // Default font size for first level title. default: 32
  defaultSecondSize?: number // Default font size for second level title. default: 24
  defaultThirdSize?: number // Default font size for third level title. default: 18
  defaultFourthSize?: number // Default font size for fourth level title. default: 16
  defaultFifthSize?: number // Default font size for fifth level title. default: 14
  defaultSixthSize?: number // Default font size for sixth level title. default: 12
}

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: Microsoft YaHei
}

Group Configuration

typescript
interface IGroup {
  opacity?: number // Opacity. default: 0.2
  backgroundColor?: string // Background color. default: #FFFFFF
  activeOpacity?: number // Opacity when active. default: 0.4
  activeBackgroundColor?: string // Background color when active. default: #FFFFFF
  disabled?: boolean // Whether to disable. default: false
  deletable?: boolean // Whether can be deleted. default: true
}

Page Break Configuration

typescript
interface IPageBreak {
  font?: string // Font. default: Microsoft YaHei
  fontSize?: number // Font size. default: 12
  lineDash?: number[] // Line dash style. default: [5, 5]
}

Zone Configuration

typescript
interface IZoneOption {
  tipDisabled?: boolean // Whether to disable zone tooltip. default: false
}

Background Configuration

typescript
interface IBackgroundOption {
  color?: string // Background color. default: #FFFFFF
  image?: string // Background image URL
  size?: BackgroundSize // Background size. default: COVER
  repeat?: BackgroundRepeat // Background repeat mode. default: NO_REPEAT
  applyPageNumbers?: number[] // Page numbers to apply, default all pages
}

Line Break Configuration

typescript
interface ILineBreakOption {
  disabled?: boolean // Whether to disable display. default: true
  color?: string // Color. default: #000000
  lineWidth?: number // Line width. default: 1
}

White Space Configuration

typescript
interface IWhiteSpaceOption {
  disabled?: boolean // Whether to disable display. default: true
  color?: string // Color. default: #000000
  radius?: number // Dot radius. default: 2
}

Separator Configuration

typescript
interface ISeparatorOption {
  lineWidth?: number // Line width. default: 1
  strokeStyle?: string // Line color. default: #000000
}

Line Number Configuration

typescript
interface ILineNumberOption {
  size?: number // font size. default: 12
  font?: string // font. default: Microsoft YaHei
  color?: string // color. default: #000000
  disabled?: boolean // Whether to disable. default: false
  right?: number // Distance from the main text. default: 20
  type?: LineNumberType // Number type (renumber each page, consecutive numbering). default: continuity
}

Page Border Configuration

typescript
interface IPageBorderOption {
  color?: string // color. default: #000000
  lineWidth?: number // line width. default: 1
  padding?: IPadding // padding. default: [0, 0, 0, 0]
  disabled?: boolean //  Whether to disable. default: true
}

Badge Configuration

typescript
interface IBadgeOption {
  top?: number // Distance from top. default: 0
  left?: number // Distance from left. default: 0
}

Mode Rule Configuration

typescript
interface IModeRule {
  print?: {
    imagePreviewerDisabled?: boolean // Disable image previewer in print mode
    backgroundDisabled?: boolean // Disable background in print mode
  }
  readonly?: {
    imagePreviewerDisabled?: boolean // Disable image previewer in readonly mode
  }
  form?: {
    controlDeletableDisabled?: boolean // Disable control deletion in form mode
  }
}

Graffiti Configuration

typescript
interface IGraffitiOption {
  defaultLineWidth?: number // Default line width. default: 2
  defaultLineColor?: string // Default line color. default: #000000
}

Label Configuration

typescript
interface ILabelOption {
  defaultColor?: string // Default label text color
  defaultBackgroundColor?: string // Default label background color
  defaultBorderRadius?: number // Default label border radius
  defaultPadding?: IPadding // Default label padding
}

Image Caption Configuration

typescript
interface IImgCaptionOption {
  color?: string // Color. default: #000000
  font?: string // Font. default: Microsoft YaHei
  size?: number // Font size. default: 12
  top?: number // Distance from top of image. default: 5
}

List Configuration

typescript
interface IListOption {
  inheritStyle?: boolean // Whether to let the list number inherit the text style. default: false
}

Released under the MIT License.