VUE后台管理中使用富文本编辑器导入word 文档进行编辑

已于 2023-06-08 09:31:13 修改
阅读量1.7w 收藏 59
点赞数 8
分类专栏： vue2 javascript 文章标签： vue.js 前端 javascript
于 2022-02-11 19:23:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25286361/article/details/122887216
版权

VUE后台管理中使用富文本编辑器导入word 文档进行编辑

前言

最近因业务需求在项目中嵌入了tinymce这个编辑器，用于满足平台给用户编辑各类新闻内容什么的业务需求，前后也花了不少时间体验和对比了市面上各类开源编辑器，直接将新闻部门的工作从半天工作量提升只要一个小时就可以搞到，一两分钟就可以搞定一个任务

优点

文档好，功能强，bug少，无外部依赖。

word文档粘贴进来要带格式
兼容移动端
word文档粘贴进来要正常显示并且还要兼容移动端
电脑网页里粘贴进来内容要正常显示并且排版还不能乱
电脑网页拷过来的内容还要兼容到移动端

安装

npm install tinymce @tinymce/tinymce-vue@3.2.8 -S

下载语言包

中文语言包下载

image-20220211184250189.png

开始操作文件

将依赖包 node_modules 里找到 tinymce文件夹，复制到public 里，【左图是tinymce，右图是public复制后的目录】

一下是注意点：

很多的博客的写法是将 node_modules 里面的skins文件夹复制到public/tinymce目录下，经过尝试是不完善的，需要将整个目录倒入进public里

image-20220211184608731.png

image-20220211184712028.png

不完全导入的错误显示，我还以为是语言包的问题，一个个语言包版本去试，这种展示一半英文一半中文的

image-20220211185124184.png

image-20220211185159630.png

导入tinymcejs

public/index.html 添加 tinymce.js

<div id="app"></div>
<script src="/tinymce/tinymce.min.js"></script>

引入基本文件

// 引入组件
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/skins/ui/oxide/skin.min.css'
// 扩展插件
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'

注册组件

components: { Editor },

使用组件

<div class="activeConfig-container">
      <Editor id="tinymce" v-model="tinymceHtml" :init="editorInit" />
    </div>

tinymce 初始化配置

data() {
    return {
      // tinymce的绑定值
      tinymceHtml: '',
      // tinymce的初始化配置
      editorInit: {
        selector: '#tinymce',
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        height: 400,
        plugins: 'link lists image code table wordcount importword',
        toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat | importword',
        //点击富文本图片上传的时候将图片转成base64再通过success插入
        images_upload_handler: (blobInfo, success) => {
          const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          success(img)
        },
        importword_filter: function(result, insert, message) {
          // console.log(result)
          // console.log(insert)
          // console.log(message)
          // 自定义操作部分
          insert(result) // 回插函数
        },
        // statusbar: false // 是否隐藏底部的状态栏
        // menubar: false, // 是否隐藏最上方的菜单
        branding: false // 是否禁用“Powered by TinyMCE”
      }
    }
  },

整体代码

<template>
  <div class="activeConfig">
    <div class="activeConfig-container">
      <Editor id="tinymce" v-model="tinymceHtml" :init="editorInit" />
    </div>
  </div>
</template>
​
<script>
// 引入组件
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/skins/ui/oxide/skin.min.css'
// 扩展插件
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
​
// import { uploadImgage } from '@/api/activeConfig'
​
export default {
  name: 'ActiveConfig',
  components: { Editor },
  data() {
    return {
      // tinymce的绑定值
      tinymceHtml: '',
      // tinymce的初始化配置
      editorInit: {
        selector: '#tinymce',
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        height: 400,
        plugins: 'link lists image code table wordcount importword',
        toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat | importword',
        // 此处为图片上传处理函数
        // images_upload_handler: (blobInfo, success, failure) => {
        //   this.handleImgUpload(blobInfo, success, failure)
        // },
        images_upload_handler: (blobInfo, success) => {
          const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          success(img)
        },
        importword_filter: function(result, insert, message) {
          // console.log(result)
          // console.log(insert)
          // console.log(message)
          // 自定义操作部分
          insert(result) // 回插函数
        },
        // statusbar: false // 是否隐藏底部的状态栏
        // menubar: false, // 是否隐藏最上方的菜单
        branding: false // 是否禁用“Powered by TinyMCE”
      }
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    // 图片上传
    handleImgUpload(blobInfo, success, failure) {
      // this.baseUrl = process.env.VUE_APP_BASE_URL
      // const imgBase64 = 'data:image/jpeg;base64,' + blobInfo.base64()
      // const data = { img: [imgBase64] }
      // uploadImgage(data).then(res => {
      //   // 传入success回调里的数据就是富文本编辑器里插入图片的src的值
      //   success(`${this.baseUrl}/${res.data[0]}`)
      // }).catch(() => { failure('error') })
    }
  }
}
</script>
​
<style lang="scss" scoped>
.activeConfig {
  &-container {
    margin: 30px;
  }
}
</style>
​

特殊需求

需要找个能实现word文档上传到富文本编辑器，减轻编辑机构的负担，解决机构需要每次打开文档复制再编辑的繁琐工作，实现直接导入编辑

tinymce插件

一个下载插件，一个是注意点，图片在富文本是base64的方式

image-20220211191016020.png

导入插件

下载解压后

image-20220211191235021.png

将整个文件复制到public的插件目录

image-20220211191330453.png

再往tinymce配置添加即可

editorInit.plugins 和 editorInit.toolbar 添加importword即可

editorInit: {
        selector: '#tinymce',
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        height: 400,
        plugins: 'link lists image code table wordcount importword',
        toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat | importword'
        }

图片解决方案

如果碰到图片的问题，处理图片有两种方式：
1、一种在提交内容的时候统一处理图片，稿件文件里图片只要提交一次。
2、一种是监听图片上传，每次更新图片都上传图片。

图片上传函数有

images_upload_handler

第二种

const files = []
const base64ImgSum = []
for (let i = 0; i < imgs.length; i++) {
    //去除不用的属性
    imgs[i].removeAttribute('data-mce-src')
    imgs[i].removeAttribute('alt')
    //拿到所有的图片列表
    imgs[i].src.includes('base') && base64ImgSum.push(imgs[i])
}

//将base64图片转换file文件
dataURLToFile(dataURL, filename) {
    const arr = dataURL.split(',')
    const mime = arr[0].match(/:(.*?);/)[1] // mime类型 image/png
    const bstr = atob(arr[1]) // base64 解码

    let n = bstr.length
    const u8arr = new Uint8Array(n)

    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }

    return new File([u8arr], filename, { type: mime })
    // return new Blob([a8arr], {type: mime});
},
    
//将处理file文件当参处理即可
fd.append('file', this.dataURLToFile(base64ImgSum[i].src, `${(new Date()).getTime()}.jpg`))

完整代码

<template>
 <!-- 稿件文本编辑器 -->
 <div class="activeConfig">
   <div style="display:flex">
     <div class="activeConfig-container">
       <Editor id="tinymce" v-model="tinymceHtml" :init="editorInit" />
     </div>
     <div style="width:98px;margin: 0 10px;text-align:center">
       <div><el-button :disabled="!tinymceHtml" @click="openPreview">预览页面</el-button></div>
       <div><el-button :disabled="!tinymceHtml" style="margin:10px 0" @click="deleteBlankLine">删除空行</el-button></div>
       <!-- <div style="margin:10px 0"><el-button @click="getImgList" :disabled="!tinymceHtml">上传图片</el-button></div> -->
     </div>
   </div>
   <previewView ref="previewId" :content="tinymceHtml" />
 </div>
</template>

<script>
// 引入组件
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/skins/ui/oxide/skin.min.css'
// 扩展插件
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'

import {
 uploadBatch
} from '@/api/myTask'

import previewView from './preview'

export default {
 name: 'ActiveConfig',
 components: { Editor, previewView },
 props: {
   taskId: {
     type: Number,
     required: true,
     default: 1
   },
   authorize: {
     type: Object,
     required: true
   }
 },
 data() {
   return {
     // tinymce的绑定值
     tinymceHtml: '',
     // tinymce的初始化配置
     editorInit: {
       selector: '#tinymce',
       language_url: '/tinymce/langs/zh_CN.js',
       language: 'zh_CN',
       skin_url: '/tinymce/skins/ui/oxide',
       height: 400,
       plugins: 'image importword wordcount fullscreen',
       toolbar: 'image | importword | fullscreen',
       menubar: false,
       content_style: '.tox-tinymce-aux {z-index: 2600 !important;}',
       // 此处为图片上传处理函数
       // images_upload_handler: (blobInfo, success, failure) => {
       //   this.handleImgUpload(blobInfo, success, failure)
       // },
       images_upload_handler: (blobInfo, success) => {
         const img = 'data:image/jpeg;base64,' + blobInfo.base64()
         //   // console.log(1111)
         //   setTimeout(() => {
         //     // success('https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF')
         //   }, 3000)

         success(img)
       },
       importword_filter: (result, insert, message) => {
         // console.log(result)

         // console.log(insert)
         // console.log(message)
         // 自定义操作部分
         setTimeout(() => {
           const trTileList = document.getElementById('tinymce_ifr').contentWindow.document.body.getElementsByTagName('table').item(0).getElementsByTagName('tr')
           console.log(trTileList, trTileList.length)
           if (trTileList.length < 4) {
             console.log('表格数据格式错误')
           } else {
             console.log(document.getElementById('tinymce_ifr').contentWindow.document.body.getElementsByTagName('table').item(0).getElementsByTagName('tr'))
             const titleList = {}
             for (const index in trTileList) {
               console.log(index, typeof index)
               if (index === '0') titleList.bigTitleA = trTileList[index].innerText
               if (index === '1') titleList.bigTitleB = trTileList[index].innerText
               if (index === '2') titleList.bigTitleC = trTileList[index].innerText
               if (index === '3') titleList.shortTitle = trTileList[index].innerText
             }
             console.log(trTileList[0].innerText)
             console.log(titleList)
             this.$emit('updateTitle', titleList)

             document.getElementById('tinymce_ifr').contentWindow.document.body.getElementsByTagName('table').item(0).remove()
           }
         }, 1000)
         insert(result) // 回插函数
       },
       // statusbar: false // 是否隐藏底部的状态栏
       // menubar: false, // 是否隐藏最上方的菜单
       branding: false // 是否禁用“Powered by TinyMCE”
     }
   }
 },
 mounted() {
   tinymce.init({})
 },
 methods: {
   // 图片上传
   handleImgUpload(blobInfo, success, failure) {
     // this.baseUrl = process.env.VUE_APP_BASE_URL
     // const imgBase64 = 'data:image/jpeg;base64,' + blobInfo.base64()
     // const data = { img: [imgBase64] }
     // uploadImgage(data).then(res => {
     //   // 传入success回调里的数据就是富文本编辑器里插入图片的src的值
     //   success(`${this.baseUrl}/${res.data[0]}`)
     // }).catch(() => { failure('error') })
   },
   dataURLToFile(dataURL, filename) {
     const arr = dataURL.split(',')
     const mime = arr[0].match(/:(.*?);/)[1] // mime类型 image/png
     const bstr = atob(arr[1]) // base64 解码

     let n = bstr.length
     const u8arr = new Uint8Array(n)

     while (n--) {
       u8arr[n] = bstr.charCodeAt(n)
     }

     return new File([u8arr], filename, { type: mime })
     // return new Blob([a8arr], {type: mime});
   },
   getImgList() {
     const imgs = document.getElementById('tinymce_ifr').contentWindow.document.getElementsByTagName('img')
     // console.log(imgs)
     const files = []
     const base64ImgSum = []
     for (let i = 0; i < imgs.length; i++) {
       imgs[i].removeAttribute('data-mce-src')
       imgs[i].removeAttribute('alt')
       // console.log(imgs[i].src.includes('base'))
       imgs[i].src.includes('base') && base64ImgSum.push(imgs[i])
     }

     if (base64ImgSum.length) {
       for (let i = 0; i < base64ImgSum.length; i++) {
         // const blob = this.dataURLToFile(base64ImgSum[i].src, 'Whatever.jpg')
         // console.log(blob)
         const fd = new FormData()
         fd.append('file', this.dataURLToFile(base64ImgSum[i].src, `${(new Date()).getTime()}.jpg`))
         fd.append('id', this.taskId)
         uploadBatch(fd, this.authorize).then(res => {
           // console.log(res)
           files.push(res.msg[0].url)
           base64ImgSum[i].src = res.msg[0].url
           if (files.length === base64ImgSum.length) {
             // console.log('图片上传成功')
             this.$emit('updateEidt')
           }
         })
       }
     } else {
       this.$emit('updateEidt')
     }
   },
   // 删除空行
   deleteBlankLine() {
     const brLength = document.getElementById('tinymce_ifr').contentWindow.document.getElementsByTagName('br')
     console.log(brLength.length)
     while (brLength.length) {
       console.log(brLength[brLength.length - 1].parentNode.children.length)
       if (brLength[brLength.length - 1].parentNode.children.length === 1) {
         brLength[brLength.length - 1].parentNode.remove()
       } else if (brLength[brLength.length - 1].parentNode.children.length > 1) {
         brLength[brLength.length - 1].remove()
       }
     }

     this.tinymceHtml = document.getElementById('tinymce_ifr').contentWindow.document.body.innerHTML
   },
   openPreview() {
     this.$refs.previewId.dialogVisible = true
   }
 }
}
</script>

<style lang="scss" scoped>
.activeConfig-container{
   width: 100%;
}
.tox-silver-sink,.tox-tinymce-aux{
   z-index: 2600 !important;
}
</style>
昵称老重复
关注
  • 8
    点赞
  • 踩
  • 59
    收藏
    觉得还不错? 一键收藏
  • 49
    评论
专栏目录
vue如何安装使用Quill富文本编辑器
11-28
本文为大家记录了vue中安装使用Quill富文本编辑器的具体方法，供大家参考，具体内容如下 1、安装依赖 npm install vue-quill-editor --save 注：我在已有的vue项目中（含有已安装的依赖，即node_modules文件夹）直接进行安装并不成功，报错，没有截图，但是我没记错的话是显示”项目名\node_modules\cliui\node_modules\wordwrap”这个没有。所以我把项目下的node_modules文件删除，然后直接安装quill依赖（执行npm install vue-quill-editor –save）。然后npm run de
vue下载word并包含echarts图
12-24
vue下载word
vue-quill-editor富文本编辑器的使用（可上传附件word）
Z18834071903的博客
03-08 330
vue-quill-editor富文本编辑器的使用（可上传附件word）
HTML5 – 支持WORD上传的富文本编辑器
最新发布
alisky119的博客
04-03 649
编辑器是ckeditor5，为ckeditor编辑器增加粘贴Word图片的功能，支持快捷键操作（Ctrl+V），支持多种系统：Windows,macOS,Linux,信创国产化环境，中标麒麟，银河麒麟，统信，龙芯。1.下载ckeditor5源码，注意：不是在npm中直接安装ckeditor5，在npm中直接安装的ckeditor5是已经打包好的编辑器，我们无法为其添加插件，必须下载源码添加好后再手动打包。# 构建，生成ckeditor.js，生成的ckeditor.js在build目录下。
Vue项目使用富文本编辑器vue-quill-editor
DOM曼珠沙华的博客
06-17 318
安装 npm install vue-quill-editor --save 配置 import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' // import styles import 'quill/dist/quill.snow.css' // for snow theme import 'quill/dist/quill.bubble.css
VUE动态生成word的实现
10-15
主要介绍了VUE动态生成word的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
富文本编辑器实现导入word
weixin_45525177的博客
02-15 1613
if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)) { //判断浏览器内核是否为Trident内核IE8.0。// 当数据包大小不是数据单元的整数倍时，读取最后剩余的小于数据单元的所有数据。// 忽略简单form字段而不是上传域的文件域(等)然后访问http://localhost:8088/ueditor/ 就可以测试了。
【vue2+onlyoffice】word在线编辑&保存&下载
记录
06-13 6830
需要实现word文档的编辑和保存功能，之前写了一篇选方案的。现在就按照onlyoffice开始实现。【没有使用到多人协同】
vue使用docx-preview实现在线预览编辑word文档根据选择联动改变word
qq_39532524的博客
10-24 5027
在线预览word文档（oss在线地址转blob对象预览） 根据选项或输入内容在线更改word对应的字段（包含多个匹配） 每次更改跳转到第一个匹配的地方（居中显示并且高光显示）
前端实现在线预览、编辑Office文档（vue版）
热门推荐
weixin_45653441的博客
03-06 1万+
WEB前端实现在线预览、编辑Office文档，介绍如何在web前端引入JS插件实现在线预览、编辑Office文档。
vue 如何引入富文本插件vue-quill-editor
ping
04-27 690
官网链接: https://github.com/surmon-china/vue-quill-editor 官网有点长，我总结了一下我实现的关键步骤 1 安装依赖包 npm install vue-quill-editor --save 2 注册组件 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow....
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
08-27
主要介绍了在 Vue 项目中引入 tinymce 富文本编辑器的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
一款纯VUE3 开发的富文本编辑器 editor
10-18
这款vue 编辑是由vue3 开发的，不存在第三方引用，拿来即可用不用添加任何外部图片js,组件，且二次开发也方便 版本为vue-property-decorator
vue实现word，pdf文件的导出功能
10-18
给大家介绍了vue实现word或pdf文档导出的功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
word简历在线编辑-vue
01-17
技术栈： webpack ----打包神器 vue-cli ----快速构建项目 scss ----便利的css大法 element-ui ---- UI组件库 normalize.css ---- 重置掉该重置的样式 LeanCloud ---- 存储数据 html2canvas ---- HTML转成canvas jsPDF ---- 转成PDF
富文本编辑器tinymce支持从word复制粘贴保留格式和图片的插件powerpaste源码
01-29
tinymce是很强大的富文本编辑器，可以去官网下载，这里分享的是它官网的一个收费插件powerpaste的旧版本源码，但也不影响功能使用，此插件目前官网收费每月12美刀，我们就不花这钱了。以vue为例说明：将tinymce下载后放到static目录下，powerpaste放到\static\tinymce\plugins目录下，在index.html中引入tinymce.min.js。代码参数配置：tinymce.init({powerpaste_word_import: 'propmt',powerpaste_allow_local_images: true,paste_data_images: true,powerpaste_html_import: 'propmt',plugins:['找到paste替换成powerpaste']})
vue集成百度UEditor富文本编辑器使用教程
10-17
主要为大家详细介绍了vue集成百度UEditor富文本编辑器的使用教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
详解Vue基于vue-quill-editor富文本编辑器使用心得
10-17
主要介绍了Vue基于vue-quill-editor富文本编辑器使用心得，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
web - 支持word上传的富文本编辑器
Mr_Zang666的博客
07-19 344
"Servers" :[{"url":"www.ncmem.com"},{"url":"www.xproerui.com"}]//内部服务器地址(不下载此地址中的图片)JPG/PNG/GIF/BMP，推荐使用JPG格式，防止出现大图片。, "PasteImageType" : "" //粘贴文件，剪帖板的图片格式，为空表示本地图片格式。, "PasteImgSrc" : "" //shape:优先使用源公式图片，img:使用word自动生成的图片。
iso 21498 -2 标准解读
11-08
ISO 21498-2是国际标准化组织（ISO）制定的标准，它的全称是"ISO 21498-2:2018 有关信息与文件管理的文件识别和描述术语和数据模型的规范 第2部分：数据模型"。这个标准是为了指导和规范信息和文件管理领域的实践，以确保相关数据能够被准确地识别、描述和管理。 ISO 21498-2标准主要包括两个方面的内容：文件识别和描述术语以及数据模型。其中，文件识别和描述术语的目的是为了确保文件能够被唯一地标识和描述。这些术语包括文件类型、属性、关系等，通过统一的命名和定义，可以让用户更好地理解和管理文件。数据模型则是指定义了信息和文件的结构和关系，以及其在系统中的表示方式。通过统一的数据模型，不同的系统和应用程序可以对信息和文件进行共享和交换，提高工作效率和数据的一致性。 实际应用中，ISO 21498-2可以帮助组织和机构实现信息和文件的准确管理。例如，在电子档案管理中，该标准可以确保每个文件都有唯一的标识号，方便检索和访问。在企业信息管理中，该标准可以统一数据模型，确保不同系统之间的数据一致性。另外，在数字化存档和信息共享方面，该标准也能提供指导和规范。 总之，ISO 21498-2标准的目的是为了确保文件在信息和文件管理过程中能够准确地被识别、描述和管理。它的使用能够帮助机构和组织更好地管理信息和文件，提高工作效率和数据的一致性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值