@wangeditor/editor-for-vue编辑器，实现自定义图片上传到oss，并把文本内容组合成一个html文件上传到oss

<template>
  <div id="app">
    <editor ref="editorRef" :defaultConfig="editorConfig" />
    <button @click="saveContent">保存</button>
  </div>
</template>

<script>
import {
    
     Editor, Toolbar } from '@wangeditor/editor-for-vue'
import * as OSS from 'ali-oss'
import axios from 'axios'

export default {
    
    
  name: 'App',
  components: {
    
    
    Editor,
    Toolbar
  },
  data() {
    
    
    return {
    
    
      editorConfig: {
    
    
        MENU_CONF: {
    
    
          uploadImage: {
    
    
            customUpload: this.customUpload
          }
        }
      }
    }
  },
  async mounted() {
    
    
    await this.loadContentFromOSS()
  },
  methods: {
    
    
    async customUpload(file, insertFn) {
    
    
      const client = new OSS({
    
    
        region: 'oss-cn-hangzhou', // 根据你的OSS区域进行修改
        accessKeyId: 'yourAccessKeyId', // 替换为你的AccessKeyId
        accessKeySecret: 'yourAccessKeySecret', // 替换为你的AccessKeySecret
        stsToken: 'securityToken',
        bucket: 'yourBucketName' // 替换为你的BucketName
      })

      try {
    
    
        const result = await client.put(`your-folder/${
    
    file.name}`, file)
        const url = result.url
        const alt = file.name
        const href = result.url
        insertFn(url, alt, href)
      } catch (err) {
    
    
        console.error('Error uploading to OSS:', err)
      }
    },
    async saveContent() {
    
    
      const client = new OSS({
    
    
        region: 'oss-cn-hangzhou', // 根据你的OSS区域进行修改
        accessKeyId: 'yourAccessKeyId', // 替换为你的AccessKeyId
        accessKeySecret: 'yourAccessKeySecret', // 替换为你的AccessKeySecret
        stsToken: 'securityToken',
        bucket: 'yourBucketName' // 替换为你的BucketName
      })

      // 获取富文本编辑器的 HTML 内容
      const htmlContent = this.$refs.editorRef.getHtml()

      // 生成 HTML 文件内容
      const completeHtml = `
        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
        </head>
        <body>
          ${
    
    htmlContent}
        </body>
        </html>
      `

      // 将 HTML 内容转换为 Blob 对象
      const blob = new Blob([completeHtml], {
    
     type: 'text/html' })
      const file = new File([blob], 'document.html', {
    
     type: 'text/html' })

      try {
    
    
        const result = await client.put(`your-folder/document.html`, file)
        console.log('HTML file uploaded to OSS:', result.url)
      } catch (err) {
    
    
        console.error('Error uploading HTML file to OSS:', err)
      }
    },
    async loadContentFromOSS() {
    
    
      const url = 'https://your-bucket-name.oss-cn-hangzhou.aliyuncs.com/your-folder/document.html' // 替换为你实际的文件URL

      try {
    
    
        const response = await axios.get(url)
        const htmlContent = response.data
        this.$refs.editorRef.setHtml(htmlContent)
      } catch (err) {
    
    
        console.error('Error loading HTML content from OSS:', err)
      }
    }
  }
}
</script>

<style>
/* Your custom styles */
</style>
@wangeditor/editor-for-vue编辑器，实现自定义图片上传到oss，并把文本内容组合成一个html文件上传到oss

猜你喜欢
