富文本输入

代码事例

<template>
	<h2>编辑状态</h2>
	<HTMLEditor v-model="model.single" @change="handleChange" />
	<fk-row>
		<JsonViewer :data="model" />
	</fk-row>
</template>

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

const model = ref({
	single: `<p><img class="wscnph" src="https://static.erp.91spyc.com/spider/4L6RHreUzIJVnJYxyzqEyDRDoWaUcN4vBAHamGIv.jpg" /><img class="wscnph" src="https://static.erp.91spyc.com/spider/qeAPu1h9YPnPsxHLxa2YpVNK37HsTxbLaziA4xIl.jpg" /><img class="wscnph" src="https://static.erp.91spyc.com/spider/6ruDTNLeydMh61GHsrlQsIqD2EkNIJOYvLx5rhpP.jpg" /></p>`,
	multiple: [],
});

const handleChange = (v) => {
    console.log('handleChange >>', v)
}

</script>

HTML富文本编辑器 API

<quill-editor> Props

参数名	描述	类型	默认值
model-value (v-model)	富文本内容	string	''
toolbar	工具栏配置	array	[ ['bold', 'italic', 'underline', 'strike'], // toggled buttons ['blockquote', 'code-block'], [{ header: 1 }, { header: 2 }], // custom button values [{ list: 'ordered' }, { list: 'bullet' }], [{ script: 'sub' }, { script: 'super' }], // superscript/subscript [{ indent: '-1' }, { indent: '+1' }], // outdent/indent [{ direction: 'rtl' }], // text direction [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }, { background: [] }], // dropdown with defaults from theme [{ font: [] }], [{ align: [] }], ['clean'], ['image'], ]
theme	富文本主题	string	'snow'
disabled	是否禁用	boolean	false
placeholder	占位符	string	''
accept	图片格式	string	'image/jpeg, image/jpg, image/png'
multiple	是否多选	boolean	true
content-type	内容类型	string	'html'