@flatbiz/antd
Version:
63 lines (60 loc) • 2.11 kB
TypeScript
import { IAllProps } from '@tinymce/tinymce-react';
export interface RichTextEditorProps extends Omit<IAllProps, "onChange" | "init"> {
/** 设置高度,默认:500 */
height?: number;
onChange?: (data?: string) => void;
/** 上传图片服务 */
onUploadImage?: (file: File) => Promise<string>;
/** 图片点击预览 */
imgPreview?: boolean;
init?: IAllProps["init"] & {
/**
* 通过粘贴图片创建的img标签,显示压缩比例,此处min、max是和指图片宽度
* ```
* 1. 默认值:[{ min: 0, max: 1000, ratio: 0.5 }, { min: 1000, ratio: 0.3 }]
* ```
*/
img_ratio?: {
min: number;
max?: number;
ratio: number;
}[];
/**
* 粘贴文本大小限制
* ```
* 1. limit 限制大小,单位KB,例如限制2M,值为2*1024
* 2. 限制提示文案
* ```
*/
paste_text_limit?: {
limit: number;
message: string;
};
/** 插件添加;自定义plugins后失效 */
plugins_append?: string;
/** 工具栏添加;自定义toolbar后失效 */
toolbar_append?: string;
};
/** 点击全屏按钮回调 */
onFullScreenChange?: (state?: boolean) => void;
className?: string;
}
/**
* 富文本编辑器,配置参考tinymce https://www.tiny.cloud/docs/tinymce/6
* @param props
* @returns
* ```
* 1. 如果需要粘贴上传图片服务,需要提供 onUploadImage 上传图片接口
* 2. 获取富文本实例,通过onInit(_, editor)函数获取
* 3. 预览富文本数据,使用 RichTextViewer 组件
* 4. 添加其他插件使用方式,配置 init.plugins_append、init.toolbar_append
* <RichTextEditor init={{ plugins_append: 'codesample', toolbar_append: 'codesample' }} />
* 5. 可通过设置 init.plugins、init.toolbar 完全自定义插件、工具栏
* 6. 其他插件
* emoticons 表情插件
* 7. 可通过设置 init.img_ratio 设置通过粘贴上传的图片压缩显示比例
* 默认比例:[{ min: 0, max: 1000, ratio: 0.5 }, { min: 1000, ratio: 0.3 }]
* ```
*/
export declare const RichTextEditor: (props: RichTextEditorProps) => import("react").JSX.Element;
export {};