# zhangyu-tinymce

**Repository Path**: zhangyubk/zhangyu-tinymce

## Basic Information

- **Project Name**: zhangyu-tinymce
- **Description**: Vue 富文本编辑器组件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2020-06-29
- **Last Updated**: 2024-07-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# zhangyuTinymce
Vue 富文本编辑器组件

zhangyuTinymce 是将tinymce富文本编辑器整合封装成了一个通用组件，用户可以直接调用该组件传入需要的参数即可。

### 使用方式

首先执行下面两条命令
````
npm install @tinymce/tinymce-vue -S
````
````
npm install tinymce -S
````

然后把我Demo里```public```文件夹下的```tinymce```目录复制到你的```public```目录下

在 ``script`` 中引用组件

```javascript
import zhangyuTinymce from '@/components/zhangyuTinymce.vue'
```

在 ``template`` 中创建 ``<zhangyu-tinymce />``并传参

```html
<zhangyuTinymce :content="form.desc" @editorChange="editorChange"></zhangyuTinymce>
```

同时在 ``script`` 中加入 ``editorChange()`` 回调函数

```javascript
export default {
	data(){
		return {
			form: {
				desc: ''
			}
		}
	},
	components: {
		zhangyuTinymce
	},
	methods:{
		//监听富文本内容改变
		editorChange(e){
			this.form.desc = e
		}
	}
}
```

### 属性说明

|参数|类型|必填|说明|
|---|---|---|---|
|content|String|是|富文本内容文字|

### 事件说明

|方法名|说明|
|---|---|
|[editorChange](#editorChange)|监听富文本内容改变|


### 完整示例

```html
<template>
  <div>
    <zhangyuTinymce :content="form.desc" @editorChange="editorChange"></zhangyuTinymce>
  </div>
</template>

<script>
import zhangyuTinymce from '@/components/zhangyuTinymce.vue'

export default {
	data(){
		return {
			form: {
				desc: ''
			}
		}
	},
	components: {
		zhangyuTinymce
	},
	methods:{
		editorChange(e){
			this.form.desc = e
		}
	}
}
</script>

<style>

</style>


```

**Tips**
- 大家请根据项目实际业务需求自行修改示例Demo的内容