vue2+wangEditor5富文本编辑器(图片视频自定义上传七牛云/服务器)

1、安装使用

安装

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

在main.js中引入样式

import '@wangeditor/editor/dist/css/style.css'

在使用编辑器的页面引入js

import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
components: { Editor, Toolbar },

模板

<template>
  <div>
    <div style="border: 1px solid #ccc; margin-top: 10px">
      <!-- 工具栏 -->
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
      />
      <!-- 编辑器 -->
      <Editor
        style="height: 400px; overflow-y: hidden"
        :defaultConfig="editorConfig"
        v-model="html"
        @onChange="onChange"
        @onCreated="onCreated"
      />
    </div>
  </div>
</template>

js

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
  name: "MyEditor",
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      html: "<p>hello&nbsp;world</p>",
      toolbarConfig: {},
      editorConfig: {
        placeholder: "请输入内容...",
        // 所有的菜单配置,都要在 MENU_CONF 属性下
        MENU_CONF: {},
      },
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
    },
    onChange(editor) {
      console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
    },
  },
  mounted() {},
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时,及时销毁 editor ,重要!!!
  },
};
</script>

 到这一步编辑器就可以正常显示了

2、上传图片、视频

上传到后台接口的可直接按照文档这个配置就行接口返回格式也要可文档上一致

 

 2)自定义上传(一般上传到别的服务器上,我这边是上传到七牛云服务器上)

在data配置上传图片、视频

editorConfig: {
        placeholder: "请输入内容...",
        // 所有的菜单配置,都要在 MENU_CONF 属性下
        MENU_CONF: {
          uploadImage: {
            customUpload: async (file, insertFn) => {
              let resultUrl = await this.upqiniu(file, file.name);
              insertFn(resultUrl);
            },
          },
          uploadVideo: {
            customUpload: async (file, insertFn) => {
              let resultUrl = await this.upqiniu(file, file.name);
              insertFn(resultUrl);
            },
          },
        },
      },

 this.upqiniu是我写的上传服务器的代码,最终将接口返回的地址return出去就行

 upqiniu(file, name) {
      return new Promise((resolve) => {
        let config = {
          useCdnDomain: true, //表示是否使用 cdn 加速域名,为布尔值,true 表示使用,默认为 false。
          region: null, // 根据具体提示修改上传地区,当为 null 或 undefined 时,自动分析上传域名区域
        };
        let putExtra = {
          fname: `upload_pic_${name}`, //文件原文件名
          params: {}, //用来放置自定义变量
          mimeType: null, //用来限制上传文件类型,为 null 时表示不对文件类型限制;限制类型放到数组里: ["image/png", "image/jpeg", "image/gif"]
        };
        var observable = qiniu.upload(
          file,
          `upload_pic_${name}`,
          this.token,
          putExtra,
          config
        );
        observable.subscribe({
          next: (result) => {
            // 主要用来展示进度
          },
          error: (errResult) => {
            // 失败报错信息
          },
          complete: (result) => {
            // 接收成功后返回的信息
            let url = "http://image.gewu.pro/" + result.key;
            resolve(url);
          },
        });
      });
    },

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Element UI的vue-quill-editor富文本编辑器支持插入图片,但是默认的图片上传功能可能不能满足所有需求,需要进行自定义。 首先,在vue-quill-editor的配置中添加`imageHandler`方法,用于处理图片上传: ```javascript <template> <quill-editor v-model="content" :options="editorOption"></quill-editor> </template> <script> import { quillEditor } from 'vue-quill-editor' export default { components: { quillEditor }, data () { return { content: '', editorOption: { imageHandler: this.imageHandler // 添加imageHandler方法 } } }, methods: { imageHandler () { // 处理图片上传 } } } </script> ``` 然后,可以使用第三方上传组件(如`el-upload`)进行图片上传上传完成后将图片地址返回给`quill-editor`。可以在`imageHandler`方法中实现该逻辑: ```javascript <template> <div> <el-upload class="upload-demo" :action="uploadUrl" :on-success="handleSuccess" :show-file-list="false" :headers="headers" ref="upload" > <el-button size="small" type="primary">上传图片</el-button> </el-upload> </div> </template> <script> import { quillEditor } from 'vue-quill-editor' import { mapGetters } from 'vuex' export default { components: { quillEditor }, data () { return { content: '', editorOption: { imageHandler: this.imageHandler }, uploadUrl: 'https://www.example.com/upload' // 图片上传地址 } }, computed: { ...mapGetters(['getToken']) // 获取token }, methods: { imageHandler () { const self = this const uploadImg = this.$refs.upload uploadImg.click() uploadImg.$refs.input.onchange = function () { const file = uploadImg.$refs.input.files[0] const formData = new FormData() formData.append('file', file) self.$axios.post(self.uploadUrl, formData, { headers: { 'Authorization': self.getToken // 设置token } }).then(res => { const url = res.data.url // 获取图片地址 const editor = self.$refs.editor.quill // 获取quill对象 const index = (editor.getSelection() || {}).index || editor.getLength() editor.insertEmbed(index, 'image', url) // 插入图片 }).catch(err => { console.log(err) }) } } } } </script> ``` 在这个例子中,使用了`el-upload`组件进行图片上传上传完成后将图片地址返回给`quill-editor`。在`imageHandler`方法中,通过`this.$refs.editor.quill`获取到了`quill`对象,然后调用`insertEmbed`方法插入图片。 需要注意的是,由于`quill`对象是异步创建的,所以需要在`mounted`生命周期中获取到`quill`对象才能进行图片插入。可以使用`$nextTick`方法来确保获取到了`quill`对象: ```javascript <template> <quill-editor v-model="content" :options="editorOption" ref="editor"></quill-editor> </template> <script> import { quillEditor } from 'vue-quill-editor' export default { components: { quillEditor }, data () { return { content: '', editorOption: { imageHandler: this.imageHandler } } }, mounted () { this.$nextTick(() => { // 获取quill对象 const editor = this.$refs.editor.quill // 在quill对象中添加图片上传功能 editor.getModule('toolbar').addHandler('image', () => { this.$refs.upload.click() }) }) }, methods: { imageHandler () { // 处理图片上传 } } } </script> ``` 在这个例子中,通过`editor.getModule('toolbar').addHandler`方法,在`quill`对象中添加了一个`image`按钮,点击该按钮时触发了上传图片的逻辑。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值