Skip to main content
The IEditorOption interface defines all available configuration options when creating an Editor instance.

​
Editor Mode

​
mode
EditorMode
default:"EditorMode.EDIT"
Editor operating mode:
  • EDIT - Full editing capabilities (default)
  • CLEAN - Hide auxiliary elements
  • READONLY - View-only mode
  • FORM - Only controls are editable
  • PRINT - Print preview mode
  • DESIGN - Design mode (ignores readonly/deletable rules)
  • GRAFFITI - Drawing/annotation mode

​
Locale

​
locale
string
default:"'en'"
Language/locale code for internationalization (e.g., ‘en’, ‘zh-CN’)

​
Default Styles

​
defaultType
string
default:"'TEXT'"
Default element type for new content
​
defaultColor
string
default:"'#000000'"
Default text color (hex format)
​
defaultFont
string
default:"'Microsoft YaHei'"
Default font family
​
defaultSize
number
default:"16"
Default font size in pixels
​
minSize
number
default:"5"
Minimum allowed font size
​
maxSize
number
default:"72"
Maximum allowed font size

​
Layout & Dimensions

​
width
number
default:"794"
Page width in pixels (A4: 794px at 96dpi)
​
height
number
default:"1123"
Page height in pixels (A4: 1123px at 96dpi)
​
scale
number
default:"1"
Zoom scale factor (1 = 100%)
​
pageGap
number
default:"20"
Gap between pages in pixels
​
margins
IMargin
Page margins:
{
  top: number    // default: 100
  right: number  // default: 120
  bottom: number // default: 100
  left: number   // default: 120
}
​
pageMode
PageMode
default:"PageMode.PAGING"
Page layout mode:
  • PAGING - Multi-page with page breaks
  • CONTINUITY - Continuous scroll (no pages)
​
paperDirection
PaperDirection
default:"PaperDirection.VERTICAL"
Paper orientation:
  • VERTICAL - Portrait
  • HORIZONTAL - Landscape

​
Text & Spacing

​
defaultBasicRowMarginHeight
number
default:"8"
Base row margin height
​
defaultRowMargin
number
default:"0"
Default row margin
​
defaultTabWidth
number
default:"32"
Width of tab character in pixels
​
wordBreak
WordBreak
default:"WordBreak.BREAK_WORD"
Word breaking behavior:
  • BREAK_WORD - Break at word boundaries
  • BREAK_ALL - Break anywhere

​
Selection & Highlighting

​
rangeColor
string
default:"'#AECBFA'"
Selection background color
​
rangeAlpha
number
default:"0.6"
Selection opacity (0-1)
​
rangeMinWidth
number
default:"5"
Minimum selection width in pixels
​
highlightAlpha
number
default:"0.6"
Text highlight opacity (0-1)
​
highlightMarginHeight
number
default:"2"
Vertical margin for highlights
​
searchMatchColor
string
default:"'#ffff00'"
Search match highlight color
​
searchNavigateMatchColor
string
default:"'#ff9900'"
Active search match color
​
searchMatchAlpha
number
default:"0.6"
Search highlight opacity (0-1)

​
Decorations

​
underlineColor
string
Default underline color (defaults to text color)
​
strikeoutColor
string
Default strikeout color (defaults to text color)
​
defaultHyperlinkColor
string
default:"'#0000FF'"
Default hyperlink text color

​
Resizer & Indicators

​
resizerColor
string
default:"'#4182D9'"
Color of image/table resize handles
​
resizerSize
number
default:"5"
Size of resize handles in pixels
​
marginIndicatorSize
number
default:"35"
Size of margin indicators
​
marginIndicatorColor
string
default:"'#BABABA'"
Color of margin indicators

​
Rendering

​
renderMode
RenderMode
default:"RenderMode.SPEED"
Rendering optimization mode:
  • SPEED - Faster rendering
  • COMPATIBILITY - Better compatibility
​
inactiveAlpha
number
default:"0.6"
Opacity for inactive elements (0-1)

​
Printing

​
printPixelRatio
number
default:"2"
Pixel ratio for print output (higher = better quality)
​
maskMargin
IMargin
Margins for print mask overlay

​
History

​
historyMaxRecordCount
number
default:"100"
Maximum number of undo/redo history entries

​
Advanced

​
letterClass
string[]
CSS classes that should be treated as letters
​
contextMenuDisableKeys
string[]
Context menu item keys to disable
​
shortcutDisableKeys
string[]
Keyboard shortcut keys to disable
​
scrollContainerSelector
string
CSS selector for custom scroll container
​
pageOuterSelectionDisable
boolean
default:"false"
Disable selection outside page boundaries

​
Feature-Specific Options

​
table
ITableOption
Table-specific configuration
​
header
IHeader
Header configuration
​
footer
IFooter
Footer configuration
​
pageNumber
IPageNumber
Page number configuration
​
watermark
IWatermark
Watermark configuration
​
control
IControlOption
Form control styling options
​
checkbox
ICheckboxOption
Checkbox configuration
​
radio
IRadioOption
Radio button configuration
​
cursor
ICursorOption
Cursor appearance options
​
title
ITitleOption
Title/heading configuration
​
placeholder
IPlaceholder
Placeholder text configuration
​
group
IGroup
Element grouping configuration
​
pageBreak
IPageBreak
Page break appearance
​
zone
IZoneOption
Zone (header/main/footer) options
​
background
IBackgroundOption
Page background configuration
​
lineBreak
ILineBreakOption
Line break visualization
​
whiteSpace
IWhiteSpaceOption
Whitespace handling
​
separator
ISeparatorOption
Separator line configuration
​
lineNumber
ILineNumberOption
Line number display options
​
pageBorder
IPageBorderOption
Page border configuration
​
badge
IBadgeOption
Badge/seal configuration
​
graffiti
IGraffitiOption
Graffiti/drawing options
​
label
ILabelOption
Label styling options
​
imgCaption
IImgCaptionOption
Image caption configuration
​
list
IListOption
List styling options
​
modeRule
IModeRule
Mode-specific behavior rules

​
Example

import Editor, { EditorMode, PageMode } from '@hufe921/canvas-editor'

const options: IEditorOption = {
  mode: EditorMode.EDIT,
  defaultFont: 'Arial',
  defaultSize: 16,
  defaultColor: '#333333',
  width: 794,
  height: 1123,
  margins: {
    top: 100,
    right: 120,
    bottom: 100,
    left: 120
  },
  pageMode: PageMode.PAGING,
  rangeColor: '#AECBFA',
  rangeAlpha: 0.6
}

const editor = new Editor(container, data, options)

Build docs developers (and LLMs) love

Get started for freeTalk to us