vue-wangeditor-ts 是基于 wangEditor 二次封装的适配于 vue3.0 + ts 的组件

基本使用

npm i vue-wangeditor-ts --save

模板页面

<template>
	<div class="container">
		<wang-editor v-model="value" ref="editor"></wang-editor>
	</div>
</template>

<script lang="ts">
import { defineComponent, ref, Ref } from 'vue'
import WangEditor from 'vue-wangeditor-ts'
export default defineComponent({
	components: {
		WangEditor,
	},
	setup() {
		const value = ref('')

		return {
			value,
		}
	},
})

// 父组件
const editor<typeof WangEditor.prototype | null> = ref(null)

// 清空富文本
editor.value.clear()
</script>

props api

| 参数 | 说明 | 类型 | 默认值 | | -------------------- | ------------------------------------------------ | ---------- | -------------------------------------- | | value(v-model) | 富文本默认值 | string | | | disabled | 是否禁用编辑器 | boolean | false | | height | 富文本高度 | number | 400 | | zIndex | 富文本 z-index | number | 500 | | placeholder | 富文本 placeholer | string | 请输入内容 | | focus | 是否自动获取焦点 | boolean | false | | showFullScreen | 是否显示全屏按钮 | boolean | true | | menus | 自定义菜单 | MenuType | 参考下方 MenuType 类型 | | fontNames | 自定义字体 | string[] | | | changeTimeout | 监听富文本 change 事件的频率 | number | 200(ms) | | pasteFilterStyle | 关闭粘贴样式的过滤 | boolean | false | | pasteIgnoreImg | 忽略粘贴内容中的图片 | boolean | false | | uploadImgMaxSize | 限制图片大小 | number | 10(M) | | accept | 限制图片上传类型 | string[] | ['jpg', 'jpeg', 'png', 'gif', 'bmp'] | | uploadImgMaxLength | 最多一次上传几张图片 | number | 100 | | showLinkImg | 隐藏插入网络图片 | boolean | true | | isEditor | 编辑时，内容是 ajax 获取。传入富文本请开启此属性 | boolean | false |

数据类型

MenuType

type MenusType =
	| 'head'
	| 'bold'
	| 'fontSize'
	| 'fontName'
	| 'italic'
	| 'underline'
	| 'strikeThrough'
	| 'indent'
	| 'lineHeight'
	| 'foreColor'
	| 'backColor'
	| 'link'
	| 'list'
	| 'todo'
	| 'justify'
	| 'quote'
	| 'emoticon'
	| 'image'
	| 'video'
	| 'table'
	| 'code'
	| 'splitLine'
	| 'undo'
	| 'redo'

Events 事件

| 事件名称 | 说明 | 类型 | 回调参数 | | ------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | | onFocus | 获取焦点触发 | (html: string) => void | 返回当前富文本片段 | | onBlur | 失去焦点触发 | (html: string) => void | 返回当前富文本片段 | | linkImgCallback | 插入网络图片回调事件 | ({src, alt, href}: { src: stirng, alt: string, href: string }) => viod | 返回当前图片 src, 图片说明, 跳转连接 | | lineVideoCallback | 自定义检查插入视频的回调 | (video: string) => void | 返回当前视频 | | html | 获取 html 内容 | (html: () => void) => void | 返回获取 html 内容的函数 | | text | 获取 text 文本 | (text: () => void) => void | 返回获取 text 内容的函数 | | customUploadImg | 自定义图片上传 | ({resultFiles, insertImgFn}: {resultFiles: File[], insertImgFn: (url: string) => void}) => void | resultFiles 是 input 中选中的文件列表，insertImgFn 是获取图片 url 后，插入到编辑器的方法 | | customUploadVideo | 自定义上传视频 | ({resultFiles, insertVideoFn}: {resultFiles: File[], insertVideoFn: (url: string) => void}) => void | resultFiles 是 input 中选中的文件列表，insertImgFn 是获取图片 url 后，插入到编辑器的方法 | | customInsertVideo | 自定义视频播放器 | (videoUrl: string) => void | 返回视频地址 |

插件不满足要需求时，请到官网扩展插件