1.0.3 • Published 5 years ago

vue-wangeditor-ts

Licence

MIT

Version

1.0.3

Deps

Size

18 kB

Vulns

Weekly

Summary Dependency Versions

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`	返回视频地址

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

Keywords

wangeditor vue-wangeditor ts-wangeditor vue-wangeditor-ts