富文本编辑器

介绍

富文本编辑器组件，可调整文本样式，支持插入图片、链接、表格等内容的富文本编辑组件。

API

Props

参数	说明	类型	默认值
status	状态	'default' | 'hide'| 'readonly'	'default'
title	标题	string	'富文本'
showLabel	显示标题	boolean	true
value	内容，富文本的默认值内容数据	string	'Hello!'
name	数据字段	string	-
contentStyle	内容区域自定义样式，定义默认样式数据	string	-
showMenubar	显示菜单栏	boolean	false
menubarConfig	菜单栏配置	MenubarConfig	-
showToolbar	显示工具栏	boolean	true
toolbarConfig	工具栏配置	ToolbarConfig	-
showStatusbar	显示状态栏	boolean	true
domPath	元素路径	boolean	true
allowResize	元素路径	true|false|'both'	true
wordCount	字数统计	boolean	false
maxFileSize	图片最大上传大小，单位 MB	number	10
customUpload	自定义上传,开启后需自定义文件上传接口	boolean	false
imageUploadUrl	上传地址	string	-
fileName	上传文件名	string	files
extraData	额外数据，上传接口除文件外所需的其他参数	GenerateData	-
headers	头部信息，上传接口 header 所需的参数	GenerateData	-
didUpload	上传后处理，处理上传接口的返回数据	FixUploadData	-
baseStyle	自定义样式	string	-
customClass	类名绑定	string	-
width	宽度，布局容器宽度	Size	-
height	高度，布局容器高度	Size	-
uniqueKey	唯一标识 ， 组件的唯一标识	string	-
extra	补充说明	string	-
tip	气泡提醒	string	-
validate	校验	Validate	-
loop	循环数据, 循环渲染设置	Loop	-

内容区域自定义样式配置项，需要在编辑 css 样式的输入框内，输入 css 样式，定义富文本组件初始化时的默认样式

:rootnode {
  font-family: Arial;
  font-size: 12pt;
}

Events

事件名	描述	参数
onChange	值改变且失焦时	ctx: PangeaContext params: { value:string } loop: LoopParams

Type

// 菜单栏配置
type MenubarConfig = (
  | "file" // 文件
  | "edit" // 编辑
  | "insert" // 插入
  | "view" // 视图
  | "format" // 格式
  | "table" // 表格
  | "tools"
)[]; // 工具

// 工具栏配置
type ToolbarConfig = (
  | "undo" // 撤销
  | "redo" // 重做
  | "cut" // 剪切
  | "copy" // 复制
  | "paste" // 粘贴
  | "searchreplace" // 查找替换
  | "image" // 图片
  | "media" // 视频
  | "link" // 链接
  | "insertdateTime" // 日期时间
  | "hr" // 分割线
  | "table" // 表格
  | "codesample" // 插入源码
  | "charmap" // 特殊字符
  | "lineheight" // 行高
  | "bold" // 加粗
  | "italic" // 斜体
  | "underline" // 下划线
  | "strikethrough" // 删除线
  | "alignleft" // 左对齐
  | "aligncenter" // 居中对齐
  | "alignright" // 右对齐
  | "alignjustify" // 两端对齐
  | "styles" // 格式
  | "blocks" // 区块设置
  | "fontfamily" // 字体选择
  | "fontsize" // 字号选择
  | "outdent" // 减少缩进
  | "indent" // 增加缩进
  | "forecolor" // 文字颜色
  | "backcolor" // 背景颜色
  | "removeformat" // 清除格式
  | "subscript" // 下角标
  | "superscript" // 上角标
  | "bullist" // 项目列表UL
  | "numlist" // 编号列表OL
  | "blockquote" // 引用
  | "fullscreen" // 全屏
  | "code" // 源码视图
  | "preview"
)[]; // 预览

// 生成数据的自定义函数
type GenerateData = (ctx: PangeaContext) => Object;

// 处理上传成功返回的数据
type FixUploadData = (response: string, ctx: PangeaContext) => string;

// 宽度/高度
type Size = {
  unit: "px" | "%",
  value: string,
};

// 校验
type Validate = {
  required: boolean, // 必填
  requiredMsg: string, // 必填错误提示
  customFunc: boolean, // 自定义函数
  func: string, // 自定义函数
};

// 循环
type Loop = {
  data: any[],
  paramName: string,
  indexName: string,
  key: string,
};

// 循环变量数据参数
type LoopParams = {
  indexName: string,
  paramName: string,
  ref: ComputedRefImpl, // 全部的循环变量数据
  row: any,
  rowIndex: number,
}[];