by-onlineeditor/docs/en/guide/option.md

190 lines
10 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 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 {tdPadding?:IPadding; defaultTrMinHeight?:number; defaultColMinWidth?:number}
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
maskMargin?: IMargin // Masking margins above the editorfor 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{data:string; color?:string; opacity?:number; size?:number; font?:string; numberType:NumberType;}
control?: IControlOption // Control {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string; borderWidth?: number; borderColor?: string; activeBackgroundColor?: string; disabledBackgroundColor?: string; existValueBackgroundColor?: string; noValueBackgroundColor?: string;}
checkbox?: ICheckboxOption // Checkbox {width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string; verticalAlign?: VerticalAlign;}
radio?: IRadioOption // Radio {width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string; verticalAlign?: VerticalAlign;}
cursor?: ICursorOption // Cursor style. {width?: number; color?: string; dragWidth?: number; dragColor?: string; dragFloatImageDisabled?: boolean;}
title?: ITitleOption // Title configuration.{ defaultFirstSize?: number; defaultSecondSize?: number; defaultThirdSize?: number defaultFourthSize?: number; defaultFifthSize?: number; defaultSixthSize?: number;}
placeholder?: IPlaceholder // Placeholder text
group?: IGroup // Group option. {opacity?:number; backgroundColor?:string; activeOpacity?:number; activeBackgroundColor?:string; disabled?:boolean; deletable?:boolean;}
pageBreak?: IPageBreak // PageBreak option。{font?:string; fontSize?:number; lineDash?:number[];}
zone?: IZoneOption // Zone option。{tipDisabled?:boolean;}
background?: IBackgroundOption // Background option. {color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat; applyPageNumbers?:number[]}。default: {color: '#FFFFFF'}
lineBreak?: ILineBreakOption // LineBreak option. {disabled?:boolean; color?:string; lineWidth?:number;}
separator?: ISeparatorOption // Separator option. {lineWidth?:number; strokeStyle?:string;}
lineNumber?: ILineNumberOption // LineNumber option. {size?:number; font?:string; color?:string; disabled?:boolean; right?:number}
pageBorder?: IPageBorderOption // PageBorder option. {color?:string; lineWidth:number; padding?:IPadding; disabled?:boolean;}
badge?: IBadgeOption // Badge option. {top?:number; left?:number}
modeRule?: IModeRule // mode rule option. {print:{imagePreviewerDisabled?: boolean}; readonly:{imagePreviewerDisabled?: boolean}; form:{controlDeletableDisabled?: boolean}}
}
```
## 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
}
```
## 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
}
```
## Footer Configuration
```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 numberstarting 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
}
```
## 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
}
```
## LineNumber 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
}
```
## PageBorder 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
}
```