<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',
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
stsToken: 'securityToken',
bucket: 'yourBucketName'
})
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',
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
stsToken: 'securityToken',
bucket: 'yourBucketName'
})
const htmlContent = this.$refs.editorRef.getHtml()
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>
`
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:
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>
</style>