# vue-wangeditor-ts

> 基于wangEditor4.0 + vue3.0二次封装的vue组件

Latest version **1.0.3** (published 2021-03-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-wangeditor-ts
pnpm add vue-wangeditor-ts
yarn add vue-wangeditor-ts
bun add vue-wangeditor-ts
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2021-03-23 |
| First published | 2021-03-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 17.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | 李海祥 |
| Maintainers | lihaixiang0034 |
| Keywords | wangeditor, vue-wangeditor, ts-wangeditor, vue-wangeditor-ts |

## Links

- npm: https://www.npmjs.com/package/vue-wangeditor-ts
- npm.io page: https://npm.io/package/vue-wangeditor-ts

## Dependencies (2)

- [wangeditor](https://npm.io/package/wangeditor.md) ^4.6.7
- [highlight.js](https://npm.io/package/highlight.js.md) ^10.6.0

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 1.0.3 (latest) — 2021-03-23
- 1.0.2 — 2021-03-04
- 1.0.1 — 2021-03-04
- 1.0.0 — 2021-03-04

## README

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

### 基本使用

```js
npm i vue-wangeditor-ts --save
```

### 模板页面

```vue
<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`

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

插件不满足要需求时，请到[官网](https://www.wangeditor.com/)扩展插件

---
_Source: https://npm.io/package/vue-wangeditor-ts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._