# RickEdit api

- [官方git地址](https://github.com/surmon-china/vue-quill-editor)

## 实例

```html
<template>
  <div class="demo">
    <rich-editor v-model="content" :headers="headers" :action="action" :rend-file-url="rendFileUrl" ref="RichEditor"></rich-editor>
  </div>
</template>

<script>
import RichEditor from "@/components/common/RichEditor";

export default {
  name: "demo",
  components: {
    RichEditor
  },
  computed: {
    editor() {
      // editor实例，实质时quill对象
      return this.$refs.RichEditor.editor;
    }
  },
  data() {
    return {
      content: "<p>这是一段默认内容</p>",
      headers: {},
      action: ""
    };
  },
  mounted() {
    this.headers = {
      Authorization: "token"
    };
    this.action = "file upload url";
  },
  methods: {
    rendFileUrl(rep) {
      return 'file-url'
    }
  }
};
</script>
```

## RickEdit props

| 属性              | 说明                                                      | 类型     | 默认值   |
| ----------------- | --------------------------------------------------------- | -------- | -------- |
| value             | 配合v-model实现文本数据的双向绑定                         | String   | -        |
| action            | 上传文件的api地址                                         | String   | -        |
| headers           | 上传文件的header信息                                      | Object   | {}       |
| max-size          | 上传文件大小限制,单位kb                                   | Number   | 2 * 1024 |
| rend-file-url     | 上传文件成功后，解析文件路径的方法，参数rep为response对象 | Function | {}       |
| name              | 上传文件的字段名                                          | String   | file     |
| on-upload-success | 上传文件成功后的回调方法                                  | Function | {}       |
| on-upload-error   | 上传文件失败后的回调方法，参数error信息                   | Function | {}       |


## 插件说明：

### 1. 图片缩放插件

- 官方推荐插件：[quill-image-resize-module](https://github.com/kensnyder/quill-image-resize-module)
- **Tips:** quill-image-resize-module若按官方提供的方式引入会有问题。调整后的方式如下：

**载入图片缩放插件**

- `vue.config.js`文件中加入如下代码
 
```bash
configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        Quill: 'quill/dist/quill.js'
      })
    ]
  }
```

- 引入插件

```bash
import Quill from "quill";
import ImageResize from "quill-image-resize-module";
Quill.register("modules/imageResize", ImageResize);
```

- 配置插件

```bash
options: {
 modules: {
   imageResize: true
 }
}
```

- **Tips：** 如果不需要图片缩放插件，则可以删除相应的文件及代码。