# canvas-editor-mixin

**Repository Path**: fweb/canvas-editor-mixin

## Basic Information

- **Project Name**: canvas-editor-mixin
- **Description**: a rich text editor by canvas/svg
fork By canvas-editor
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: mixin
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2024-03-21
- **Last Updated**: 2024-03-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# canvas-editor-mixin

介绍：

基于canvas/svg的富文本编辑器，所见即所得的富文本编辑器。fork by  @Hufe921/[canvas-editor](https://github.com/Hufe921/canvas-editor)

![image-20240314111652017](./snapshots/image-20240314111652017.png)


## 说明：

1、基于[canvas-editor](https://github.com/Hufe921/canvas-editor)定制化程度高为个人试炼项目，增加表格分页功能，复选框，文本框、图像框等组件和功能，部分功能与原作者一致但是实现方式不一致。

2、光标及文字排版的完全自行实现。无需依赖其他三方插件，有手就行。绘制底层也由 SVG 渲染，借助 PDFJS 完成 pdf 的绘制

3、轻量的数据结构，选型使用canvas进行开发，方便排版分页处理。

4、工具项目自身无界面，需demo引用使用。可打包成NPM包供其他项目引入使用。



## 引入指南：

1、准备一个容器：

```html
<div class="canvas-editor"></div>
```

 2、初始化编辑器：

```typescript
const container = document.querySelector<HTMLDivElement>('.editor')!
const instance = new Editor(container)
```

 3、加载模板内容：

```typescript
const payload= {
    header: [
      {
        value: 'Header'
      }
    ],
    main: [
      {
        value: 'Hello World'
      }
    ],
    footer: [
      {
        value: 'canvas-editor',
        size: 12
      }
    ]
  }
instance.command.executeSetValue(payload);
```

## 完整配置

```typescript
interface IEditorOption {
  mode?: EditorMode // 编辑器模式：编辑、清洁（不显示视觉辅助元素。如：分页符）、只读、表单（仅控件内可编辑）、打印（不显示辅助元素、未书写控件及前后括号）。默认：编辑
  defaultType?: string // 默认元素类型。默认：TEXT
  defaultColor?: string // 默认字体颜色。默认：#000000
  defaultFont?: string // 默认字体。默认：Microsoft YaHei
  defaultSize?: number // 默认字号。默认：16
  minSize?: number // 最小字号。默认：5
  maxSize?: number // 最大字号。默认：72
  defaultBasicRowMarginHeight?: number // 默认行高。默认：8
  defaultRowMargin?: number // 默认行间距。默认：1
  defaultTabWidth?: number // 默认tab宽度。默认：32
  width?: number // 纸张宽度。默认：794
  height?: number // 纸张高度。默认：1123
  scale?: number // 缩放比例。默认：1
  pageGap?: number // 纸张间隔。默认：20
  underlineColor?: string // 下划线颜色。默认：#000000
  strikeoutColor?: string // 删除线颜色。默认：#FF0000
  rangeColor?: string // 选区颜色。默认：#AECBFA
  rangeAlpha?: number // 选区透明度。默认：0.6
  rangeMinWidth?: number // 选区最小宽度。默认：5
  searchMatchColor?: string // 搜索高亮颜色。默认：#FFFF00
  searchNavigateMatchColor?: string // 搜索导航高亮颜色。默认：#AAD280
  searchMatchAlpha?: number // 搜索高亮透明度。默认：0.6
  highlightAlpha?: number // 高亮元素透明度。默认：0.6
  resizerColor?: string // 图片尺寸器颜色。默认：#4182D9
  resizerSize?: number // 图片尺寸器大小。默认：5
  marginIndicatorSize?: number // 页边距指示器长度。默认：35
  marginIndicatorColor?: string // 页边距指示器颜色。默认：#BABABA
  margins?: IMargin // 页面边距。默认：[100, 120, 100, 120]
  pageMode?: PageMode // 纸张模式：连页、分页。默认：分页
  tdPadding?: IPadding // 单元格内边距。默认：[0, 5, 5, 5]
  defaultTrMinHeight?: number // 默认表格行最小高度。默认：42
  defaultColMinWidth?: number // 默认表格列最小宽度（整体宽度足够时应用，否则会按比例缩小）。默认：40
  defaultHyperlinkColor?: string // 默认超链接颜色。默认：#0000FF
  header?: IHeader // 页眉信息。{top?:number; maxHeightRadio?:MaxHeightRatio;}
  footer?: IFooter // 页脚信息。{bottom?:number; maxHeightRadio?:MaxHeightRatio;}
  pageNumber?: IPageNumber // 页码信息。{bottom:number; size:number; font:string; color:string; rowFlex:RowFlex; format:string; numberType:NumberType;}
  paperDirection?: PaperDirection // 纸张方向：纵向、横向
  inactiveAlpha?: number // 正文内容失焦时透明度。默认值：0.6
  historyMaxRecordCount?: number // 历史（撤销重做）最大记录次数。默认：100次
  printPixelRatio?: number // 打印像素比率（值越大越清晰，但尺寸越大）。默认：3
  maskMargin?: IMargin // 编辑器上的遮盖边距（如悬浮到编辑器上的菜单栏、底部工具栏）。默认：[0, 0, 0, 0]
  letterClass?: string[] // 排版支持的字母类。默认：a-zA-Z。内置可选择的字母表类：LETTER_CLASS
  contextMenuDisableKeys?: string[] // 禁用的右键菜单。默认：[]
  scrollContainerSelector?: string // 滚动区域选择器。默认：document
  wordBreak?: WordBreak // 单词与标点断行：BREAK_WORD首行不出现标点&单词不拆分、BREAK_ALL按字符宽度撑满后折行。默认：BREAK_WORD
  watermark?: IWatermark // 水印信息。{data:string; color?:string; opacity?:number; size?:number; font?:string;}
  control?: IControlOption // 控件信息。 {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string;}
  checkbox?: ICheckboxOption // 复选框信息。{width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; fontStyle?: string;}
  cursor?: ICursorOption // 光标样式。{width?: number; color?: string; dragWidth?: number; dragColor?: string;}
  title?: ITitleOption // 标题配置。{ defaultFirstSize?: number; defaultSecondSize?: number; defaultThirdSize?: number defaultFourthSize?: number; defaultFifthSize?: number; defaultSixthSize?: number;}
  placeholder?: IPlaceholder // 编辑器空白占位文本
  group?: IGroup // 成组配置。{opacity?:number; backgroundColor?:string; activeOpacity?:number; activeBackgroundColor?:string; disabled?:boolean}
  pageBreak?: IPageBreak // 分页符配置。{font?:string; fontSize?:number; lineDash?:number[];}
  zone?: IZoneOption // 编辑器区域配置。{tipDisabled?:boolean;}
  background?: IBackgroundOption // 背景配置。{color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat;}。默认：{color: '#FFFFFF'}
  queryData?: IQueryData // 默认模版数据配置。{template:IEditorData; imageList:IElement[]; commentList:IComment[]; queryData:Record<string, IElement[]>}
}
```

## 页眉配置

```typescript
interface IHeader {
  top?: number // 距离页面顶部大小。默认：30
  maxHeightRadio?: MaxHeightRatio // 占页面最大高度比。默认：HALF
  disabled?: boolean // 是否禁用
}
```

## 页脚配置

```typescript
interface IFooter {
  bottom?: number // 距离页面底部大小。默认：30
  maxHeightRadio?: MaxHeightRatio // 占页面最大高度比。默认：HALF
  disabled?: boolean // 是否禁用
}
```

##页码设置
```typescript
interface IPageNumber {
  bottom?: number // 距离页面底部大小。默认：60
  size?: number // 字体大小。默认：12
  font?: string // 字体。默认：Microsoft YaHei
  color?: string // 字体颜色。默认：#000000
  rowFlex?: RowFlex // 行对齐方式。默认：CENTER
  format?: string // 页码格式。默认：{pageNo}。示例：第{pageNo}页/共{pageCount}页
  numberType?: NumberType // 数字类型。默认：ARABIC
  disabled?: boolean // 是否禁用
  startPageNo?: number // 起始页码。默认：1
  fromPageNo?: number // 从第几页开始出现页码。默认：0
}
```

##水印设置
```typescript
interface IWatermark {
  data: string // 文本。
  color?: string // 颜色。默认：#AEB5C0
  opacity?: number // 透明度。默认：0.3
  size?: number // 字体大小。默认：200
  font?: string // 字体。默认：Microsoft YaHei
}
```

##占位文本配置
```typescript
interface IPlaceholder {
  data: string // 文本。
  color?: string // 颜色。默认：#DCDFE6
  opacity?: number // 透明度。默认：1
  size?: number // 字体大小。默认：16
  font?: string // 字体。默认：Microsoft YaHei
}
```

#编排

## 编排是什么

​	所谓编排，即将设计器中的所有物料，进行布局设置、组件设置、交互设置（JS 编写/逻辑编排）后，形成符合业务诉求的 schema 描述。在真实场景，节点数可能有成百上千，每个节点都具有新增、删除、修改、移动、插入子节点等操作，同时还有若干约束，仿 DOM 设计使用JSON 结构操作 节点模型 & 属性模型 方式来编排。每次编排动作后，都需要实时的渲染出视图。

至此，我们已经完成了**编排模块最基础的功能**，接下来，就是完善细节，逐步丰满功能。比如：

1. 编排面板的整体功能区划分设计；
2. 节点属性设计；节点删除、移动等操作设计；容器节点设计；
3. 节点拖拽功能、拖拽定位设计和实现；
4. 节点在画布上的辅助功能，比如 hover、选中、选中时的操作项、resize、拖拽占位符等；
5. 设计态和渲染态的坐标系转换，滚动监听等；
6. 快捷键机制；
7. 历史功能，撤销和重做；
8. 结构化的插件扩展机制；
9. 原地编辑功能；

##节点结构：用于定义界面显示，枚举所有组件的集合为**节点**，光标下允许插入任意**节点**。

```typescript
type IElement = 			// 元素
  IElementBasic &   		// 基础
  IElementStyle &			// 样式
  IElementGroup &			// 组信息
  ITable &					// 表格
  IHyperlinkElement &		// 超链接
  ISuperscriptSubscript &	// 上下标
  ISeparator &				// 分割线
  IImgBox &					// 图像
  IControlElement &			// 控件
  ICheckboxElement &		// 复选框
  ILaTexElement &			// 公式块
  IDateElement &			// 日期
  IImageElement &			// 图片
  IBlockElement &			// 内容块
  ITitleElement &			// 标题
  IListElement &			// 列表
  IPageNumberElement		// 页号页码
```

```typescript
interface IElementBasic {	//基础
  id?: string
  type?: ElementType
  value: string
}

interface IElementStyle {	// 样式
  font?: string
  size?: number
  width?: number
  height?: number
  bold?: boolean
  color?: string
  highlight?: string
  italic?: boolean
  underline?: boolean
  strikeout?: boolean
  rowFlex?: RowFlex
  rowMargin?: number
  letterSpacing?: number
  textDecoration?: ITextDecoration
  tdPadding?: IPadding
}

interface IElementGroup {
  groupIds?: string[]
}

type ITable = ITableAttr & ITableElement

interface ITableAttr {
  colgroup?: IColgroup[]
  trList?: ITr[]
  borderType?: TableBorder
  pTid?: string			// 父表格
  isTextBox?: boolean	// 是否文本框
  textParam?: string	// 填充参数
  borderFixed?: TableFixed
  isImgBox?: boolean	// 是否图像框
}
interface ITableElement {
  tdId?: string
  pDId?: string
  trId?: string
  pRId?: string
  tableId?: string
  conceptId?: string
  isTextBox?: boolean
  textParams?: string
  hasSplitTr?: boolean	//表格被分页
}

interface IHyperlinkElement {
  valueList?: IElement[]
  url?: string
  hyperlinkId?: string
}

interface ISuperscriptSubscript {
  actualSize?: number
}

interface ISeparator {
  dashArray?: number[]
}

interface IImgBox {
  ratio?: number[] //长宽比
  studyUid?: string
}

interface IControlElement {
  control?: IControl
  controlId?: string
  controlComponent?: ControlComponent
}

interface ICheckboxElement {
  checkbox?: ICheckbox
}

interface ILaTexElement {
  laTexSVG?: string
}

interface IDateElement {
  dateFormat?: string
  dateId?: string
}

interface IImageElement {
  imgDisplay?: ImageDisplay
  imgFloatPosition?: {
    x: number
    y: number
  }
}

interface IBlockElement {
  block?: IBlock
}

interface ITitleElement {
  valueList?: IElement[]
  level?: TitleLevel
  titleId?: string
}

interface IListElement {
  valueList?: IElement[]
  listType?: ListType
  listStyle?: ListStyle
  listId?: string
  listWrap?: boolean
}

interface IPageNumberElement {
  numberType?: NumberType
}
```


##兼容性：

兼容主流的 PC 浏览器，如 Chrome Firefox Safari Edge 等

暂不支持移动端编辑（支持移动端查看）

不再支持 IE 浏览器



##开发环境要求:

Nodejs : 9+

## install

`yarn`

## dev

`npm run dev`

## build

#### app

`npm run build`

#### lib

`npm run lib`