RickEdit api

官方git地址

实例

<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
Tips: quill-image-resize-module若按官方提供的方式引入会有问题。调整后的方式如下：

载入图片缩放插件

vue.config.js文件中加入如下代码

configureWebpack: {
plugins: [
  new webpack.ProvidePlugin({
    'window.Quill': 'quill/dist/quill.js',
    Quill: 'quill/dist/quill.js'
  })
]
}

引入插件

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

配置插件

options: {
modules: {
imageResize: true
}
}

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

intro.md 2.8 KB Riwayat Mentahan

RickEdit api

实例

RickEdit props

插件说明：

1. 图片缩放插件

intro.md 2.8 KB

Riwayat Mentahan