diff --git a/docs/en/guide/option.md b/docs/en/guide/option.md index 54ad07e..0d2f6dc 100644 --- a/docs/en/guide/option.md +++ b/docs/en/guide/option.md @@ -14,7 +14,7 @@ new Editor(container, IEditorData | IElement[], { ```typescript interface IEditorOption { - mode?: EditorMode // Editor mode: Edit, Clean (Visual aids are not displayed.) For example: page break), read-only. default: Edit + mode?: EditorMode // Editor mode: Edit, Clean (Visual aids are not displayed, For example: page break), ReadOnly, Form (Only editable within the control). default: Edit defaultType?: string // Default element type. default: TEXT defaultFont?: string // Default font. default: Yahei defaultSize?: number // Default font size. default: 16 diff --git a/docs/guide/command-execute.md b/docs/guide/command-execute.md index a9b24c4..f19016c 100644 --- a/docs/guide/command-execute.md +++ b/docs/guide/command-execute.md @@ -11,7 +11,7 @@ instance.command.commandName() ## executeMode -功能:切换编辑器模式(编辑、清洁、只读) +功能:切换编辑器模式(编辑、清洁、只读、表单) 用法: @@ -745,9 +745,11 @@ instance.command.executeWordTool() ``` ## executeSetHTML -功能:设置编辑器HTML数据 + +功能:设置编辑器 HTML 数据 用法: + ```javascript instance.command.executeSetHTML(payload: Partial页面:1/1 字数:0 -
编辑模式
+
编辑模式
diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 9e02c24..2db8be4 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -233,7 +233,14 @@ export class Draw { } public isReadonly() { - return this.mode === EditorMode.READONLY + switch (this.mode) { + case EditorMode.READONLY: + return true + case EditorMode.FORM: + return !this.control.isRangeWithinControl() + default: + return false + } } public getOriginalWidth(): number { diff --git a/src/editor/core/draw/control/Control.ts b/src/editor/core/draw/control/Control.ts index f959449..4d390e4 100644 --- a/src/editor/core/draw/control/Control.ts +++ b/src/editor/core/draw/control/Control.ts @@ -76,6 +76,24 @@ export class Control { return element.controlComponent === ControlComponent.POSTFIX } + // 判断选区是否在控件内 + public isRangeWithinControl(): boolean { + const { startIndex, endIndex } = this.getRange() + if (!~startIndex && !~endIndex) return false + const elementList = this.getElementList() + const startElement = elementList[startIndex] + const endElement = elementList[endIndex] + if ( + (startElement.type === ElementType.CONTROL || + endElement.type === ElementType.CONTROL) && + endElement.controlComponent !== ControlComponent.POSTFIX && + startElement.controlId === endElement.controlId + ) { + return true + } + return false + } + public getContainer(): HTMLDivElement { return this.draw.getContainer() } diff --git a/src/editor/core/event/handlers/mouseup.ts b/src/editor/core/event/handlers/mouseup.ts index ad25c67..cf6e32e 100644 --- a/src/editor/core/event/handlers/mouseup.ts +++ b/src/editor/core/event/handlers/mouseup.ts @@ -22,6 +22,7 @@ export function mouseup(evt: MouseEvent, host: CanvasEvent) { // 判断是否允许拖放 if (host.isAllowDrop) { const draw = host.getDraw() + if (draw.isReadonly()) return const position = draw.getPosition() const positionList = position.getPositionList() const rangeManager = draw.getRange() diff --git a/src/editor/core/position/Position.ts b/src/editor/core/position/Position.ts index 7a1fe46..39ca6f9 100644 --- a/src/editor/core/position/Position.ts +++ b/src/editor/core/position/Position.ts @@ -13,7 +13,7 @@ import { IPositionContext } from '../../interface/Position' import { Draw } from '../draw/Draw' -import { EditorZone } from '../../dataset/enum/Editor' +import { EditorMode, EditorZone } from '../../dataset/enum/Editor' export class Position { private cursorPosition: IElementPosition | null @@ -463,11 +463,13 @@ export class Position { public adjustPositionContext( payload: IGetPositionByXYPayload ): ICurrentPosition | null { - const isReadonly = this.draw.isReadonly() const positionResult = this.getPositionByXY(payload) if (!~positionResult.index) return null // 移动控件内光标 - if (positionResult.isControl && !isReadonly) { + if ( + positionResult.isControl && + this.draw.getMode() !== EditorMode.READONLY + ) { const { index, isTable, trIndex, tdIndex, tdValueIndex } = positionResult const control = this.draw.getControl() const { newIndex } = control.moveCursor({ diff --git a/src/editor/dataset/enum/Editor.ts b/src/editor/dataset/enum/Editor.ts index e0134e4..0c74645 100644 --- a/src/editor/dataset/enum/Editor.ts +++ b/src/editor/dataset/enum/Editor.ts @@ -16,7 +16,8 @@ export enum EditorContext { export enum EditorMode { EDIT = 'edit', CLEAN = 'clean', - READONLY = 'readonly' + READONLY = 'readonly', + FORM = 'form' } export enum EditorZone { diff --git a/src/main.ts b/src/main.ts index 8e80fd0..2981c59 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1204,12 +1204,16 @@ window.onload = function () { { mode: EditorMode.READONLY, name: '只读模式' + }, + { + mode: EditorMode.FORM, + name: '表单模式' } ] const modeElement = document.querySelector('.editor-mode')! modeElement.onclick = function () { // 模式选择循环 - modeIndex === 2 ? (modeIndex = 0) : modeIndex++ + modeIndex === modeList.length - 1 ? (modeIndex = 0) : modeIndex++ // 设置模式 const { name, mode } = modeList[modeIndex] modeElement.innerText = name