富文本编辑器

代码

代码地址

新特性

  • 基于vue-quill-editor二次开发
  • 支持avue方式配置图片上传
  • 支持七牛云和阿里云oss上传
  • 支持粘贴和ctrl+v粘贴图片

使用

  • 1.npm install avue-plugin-ueditor —save
  • 2.import AvueUeditor from 'avue-plugin-ueditor'
  • 3.Vue.use(AvueUeditor);
  • 4.参考如下代码使用

富文本编辑器 - 图1

  1. <avue-ueditor v-model="text" :upload="upload"></avue-ueditor>
  2. <script>
  3. export default {
  4.   data() {
  5.     return {
  6.       text: "",
  7.       upload: {
  8.         //普通图片上传
  9.         action: "https://avueupload.91eic.com/upload/list",
  10.         props: {
  11.           res: "data.0",
  12.           url: "url"
  13.         },
  14.         //七牛云oss配置
  15.         qiniu: {
  16.           AK: "",
  17.           SK: "",
  18.           scope: "test",
  19.           url: "http://pm7cc17lu.bkt.clouddn.com/",
  20.           deadline: 1
  21.         },
  22.         //阿里云oss配置
  23.         ali: {
  24.           region: "oss-cn-beijing",
  25.           endpoint: "oss-cn-beijing.aliyuncs.com",
  26.           accessKeyId: "",
  27.           accessKeySecret: "",
  28.           bucket: "avue"
  29.         }
  30.       }
  31.     };
  32.   }
  33. };
  34. </script>

upload Attributes

参数说明类型可选值默认值
action图片上传地址String—-
props相关可配置参数，具体参考props配置Object—-
oss是否使用oss不写则为普通上传Stringali/qiniu-
qiniu七牛云oss配置，具体参考qiniu配置Object—-
ali阿里云oss配置，具体参考ali配置Object—-

props Attributes

参数说明类型可选值默认值
res返回的数据结构层次String—-
url返回结构体图片地址字段String—-

qiniu Attributes

参数说明类型可选值默认值
AK七牛云的密钥String—-
SK七牛云的密钥String—-
scope七牛云存储的空间名String—-
url空间的自定义域名String—-
deadlinetoken的过期时间String—-

ali Attributes

参数说明类型可选值默认值
regionoss所在区域的名称，具体查看阿里云oss文档String—-
endpointoss所在区域的域名，具体查看阿里云oss文档String—-
accessKeyId阿里云的密钥String—-
accessKeySecret阿里云的密钥String—-
bucket阿里云存储的空间名String—-