富文本输入

代码事例

<template>
	<h2>编辑状态</h2>
	<RichTextInput v-model="model.single" :imageMenus="imageMenus" />
	<fk-row>
		<JsonViewer :data="model" />
	</fk-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { RichTextInput } from '@erp/biz';

const model = ref({
	single: `<div dir="auto" data-component="RootComponent" class="xnote-root"><div data-placeholder="" class="xnote-content"><div data-component="ParagraphComponent" class="xnote-paragraph"><div><br /></div></div></div></div>`,
	multiple: [],
});
const imageMenus = [{
    label: '本地上传',
    value: 'Local',
    click({ uploadImage }) {
        uploadImage();
    }
}, {
    label: '图片空间',
    value: 'ImageSpace',
    hideMenu: true,
    click({insertImage}) {
        insertImage('https://test.img.fukerp.com/default/AkvxvTvW7QH7GrZGzH7Gcj2FC6EeUQttwudzaPqN.jpg')
    }
}]

</script>

富文本 API

<rich-text-input> Props

参数名	描述	类型	默认值
model-value (v-model) (必填)	富文本内容	string	-
disabled	是否禁用	boolean	false
file-upload	文件上传配置	SelectFileProps	-

SelectFileProps

参数名	描述	类型	默认值
name	上传名称	string	-
action	上传地址	string	-
accept	word excel ppt pdf image audio video	string | string[]	-
maxSize	maxSize M为单位	number	-
data	附加的请求信息	Record<string, string | Blob> | ((fileItem: FileItem) => Record<string, string | Blob>)	-