pc端的富文本数据展示：需要做哪些处理

最新推荐文章于 2024-04-10 15:14:17 发布
最新推荐文章于 2024-04-10 15:14:17 发布
阅读量866 收藏
点赞数
分类专栏： pc端vue知识点分享 文章标签： 前端 css3 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/able_me/article/details/121441725
版权

请认真阅读富文本的注释（富文本区域）：

<template>
  <div class="JournalismDetail_BOX">
    <!-- 新闻资讯 -->
    <div class="Journalism_heard">
      <img src="../../assets/news_banner@2x.png" />
    </div>
    <div class="JournalismDetail_box">
      <div class="left_box">
        <!-- 头部导航位置 -->
        <div class="Navigation_position">
          <div class="Navigation_content">
            <!-- <span> 当前位置：</span> -->
            <a-breadcrumb class="breadcrumb_box">
              <span> 当前位置：</span>
              <a-breadcrumb-item
                ><a class="breadcrumb_item" href="/newsInformation"
                  >新闻资讯</a
                ></a-breadcrumb-item
              >
              <a-breadcrumb-item>新闻详情</a-breadcrumb-item>
            </a-breadcrumb>
          </div>
          <div class="Navigation_return" @click="backOff">返回上一级</div>
        </div>
        <!-- 标题位置 -->
        <div class="text_box">
          <div class="text">{{ journalismDetail.title || '暂无数据' }}</div>
          <div class="Information_situation">
            <div class="Information_content">
              <span>信息来源：</span
              ><span>{{ journalismDetail.category || '暂无数据' }}</span>
            </div>
            <div class="Information_content">
              <span>发布时间：</span
              ><span>{{
                formatDate(journalismDetail.pubDate, 'D') || '暂无数据'
              }}</span>
            </div>
            <!-- <div class="Information_content">
              <span>浏览量：</span
              ><span>{{ journalismDetail.click || "暂无数据" }}</span>
            </div> -->
          </div>
          <!-- 富文本html开始 -->
          <div
            class="article_start ql-editor content-detail"
            v-html="journalismDetail.content"
          ></div>
            <!-- 富文本html结束 -->
          <div class="enclosure_box" v-if="NewsAnnex()">
            <div class="enclosure_name">相关附件</div>
            <div
              class="enclosure_content"
              v-for="(item, index) in journalismDetail.attachment"
              :key="index"
            >
              <div class="enclosure_index">{{ index + 1 }}.</div>
              <div class="enclosure_file">
                <a :href="$ServerBaseUrl + `/api/file/download/${item.uuid}`">
                  {{ item.name }}</a
                >
              </div>
            </div>
          </div>

          <!-- 上下页区域 -->
          <div class="Page_UpAndDown">
            <!-- 上下页 -->
            <div class="Page_Up">
              <span @click="topPage()">上一页：</span>
              <span @click="goNewsDetail(newsType[topPageInit - 1].uuid)">{{
                newsType[topPageInit - 1].title !== ''
                  ? newsType[topPageInit - 1].title
                  : '暂无数据'
              }}</span>
            </div>
            <div class="Page_Down" v-if="newsType.length >= 2">
              <span @click="bottomPage()">下一页：</span>

              <span @click="NewsBottomPage(pageNumData[topPageInit].uuid)">{{
                newsType[topPageInit].title !== ''
                  ? newsType[topPageInit].title
                  : '暂无数据'
              }}</span>
              <!-- <span
                v-else
                @click="NewsBottomPage(pageNumData[topPageInit].uuid)"
              >
                暂无数据
              </span> -->
            </div>
          </div>
        </div>
      </div>
      <div class="right_box">
        <div class="recommended_reading">
          <div class="recommended_reading_content">推荐阅读</div>
          <!-- :class="{ Read_the_title_blur: selectSidebars == item.id }" -->
          <div
            class="Read_the_title"
            v-for="(item, index) in newsType"
            :key="index"
            @click="selectSidebar(index, item.uuid)"
          >
            <span class="Dot"></span>
            {{ item.title || '暂无数据' }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { Pagination } from 'antd';
export default {
  data() {
    return {
      JournalismState: true, // 有无新闻内容
      sidebarContentColor: false, // 侧边栏选中项文字颜色
      selectSidebars: null, // 默认选中项
      page: 1,
      navigation: '', // 路由传递的参数
      uuid: '', // 路由传递过来的当前数据id
      newsType: [
        {
          title: '暂无数据',
        },
        {
          title: '暂无数据',
        },
      ], // 推荐的侧边栏数据
      selectContentText: null, // 广告标题选中的颜色
      journalismDetail: {
        title: '',
        category: '',
        pubDate: '',
        click: '',
        content: '',
      }, // 初始化数据
      topPageInit: 1, // 当前位置
      pageNumData: [
        // {
        //   title: "",
        // },
        // {
        //   title: "",
        // },
      ], // 上下页数的数据
      bottomPageInit: 1, // 下一页
      topPageTitle: '', // 上一页显示的标题
      botmPageNoTitle: false, // 下一页显示的标题
      pageActuelleUp: '', // 上一页展示的数据
      pageActuelleBot: '', // 下一页展示的数据
      isNewsAnnex: false, // 控制附件是否显示
    }
  },
  mounted() {
    this.navigation = this.$route.query.navigation
    this.uuid = this.$route.query.uuid
    this.getInitData()
  },
  methods: {
    //格式化日期
    formatDate(date, flag) {
      return '-'
      if (date) {
        if (flag == 'm') {
          return date.substring(0, date.length - 3)
        } else if (flag == 'D') {
          return date.substring(0, date.length - 8)
        }
      }
    },
       // 初始化的时候对富文本进行处理  富文本js开始 this.$ServerBaseUrl是配置好的域名ip地址
    getInitData() {
      this.$get(`/api/article/quanzhou/public/${this.uuid}/click`).then(
        (res) => {
          // console.log(res.data, "获取富文本");
            // 对富文本字段进行处理 RegExp方法处理字符串，参数1要检索的字段，参数2替换成的值
          const regex2 = new RegExp('src="/api', 'gi')
          res.data.content = res.data.content.replace(
            regex2,
            `src="${this.$ServerBaseUrl}/api`
          )
          this.journalismDetail = res.data
          this.$get(
            `/api/article/quanzhou/public/page?statusIn=1&size=8&type=XWZX&categoryId=${res.data.categoryId}`
          ).then((data) => {
            let newData = data.data.content
            this.pageNumData = data.data.content
            // console.log(data.data.content, newData[0], newData[1], 999);
            // newData.splice(0, 1);
            newData.shift() // 删除第一个
            this.newsType = newData
            // console.log(data.data.content, newData, 6666);
            // this.NewsAnnex(); // 查看福建是否存在
            // 处理富文本图片显示不出来的问题
            // const regex = new RegExp("<img", "gi");
            // const regex2 = new RegExp('src="/api', "gi");
            // richtext = richtext.replace(
            //   regex2,
            //   `src="${this.$ServerBaseUrl}/api`
            // );
            // richtext = richtext.replace(regex, `<img style="max-width: 100%;"`);
          })
        }
      )
    },
    // 选择的侧边栏
    selectSidebar(i, uuid) {
      // console.log(i);
      this.selectSidebars = ++i
      // console.log(this.selectSidebars);
      this.uuid = uuid
      this.getInitData()
    },
    // 文章列表选中
    articleList(i) {
      this.selectContentText = ++i
      // console.log(this.selectContentText);
    },
    // 当前页数
    onChange(current) {
      this.current = current
      // console.log(this.current);
    },
    // 附件展示和隐藏 length 报错是这里影响的
    NewsAnnex() {
      let attachmentLength =
        this.journalismDetail.attachment == [] ? false : true
      if (attachmentLength) {
        this.isNewsAnnex = true
        return true
      } else {
        this.isNewsAnnex = false
        return false
      }
    },
    // 后退一步
    backOff() {
      this.$router.go(-1)
    },
    // 上一页
    topPage() {
      // console.log(this.newsType, "数组情况");
      // console.log(this.topPageInit, "看页数");
      if (this.topPageInit <= 0) {
        this.topPageInit = 0
        this.getInitData()
      } else {
        // console.log(this.topPageInit, "看页数");
        // this.topPageTitle = this.newsType[this.topPageInit - 1].title;
        this.topPageInit -= 1
        // console.log(this.topPageInit, "看页数");
        // debugger;
      }
      // this.topPageInit -= 1;
      // console.log(this.topPageInit,"看页数");
    },
    // 下一页
    bottomPage() {
      let botmNew = this.pageNumData.length
      if (this.topPageInit >= botmNew - 1) {
        this.topPageInit = 1
        this.getInitData()
      } else {
        this.botmPageTitle = this.pageNumData[this.topPageInit + 1].title
        // console.log(this.botmPageTitle);
        // debugger
        // if(this.pageNumData[this.topPageInit + 1].title){
        //     this.botmPageNoTitle=true
        // }
        this.topPageInit += 1
        // console.log(this.topPageInit);
      }
    },

    // 上一页新的详情页
    goNewsDetail(uuid) {
      this.$get(`/api/article/quanzhou/public/${uuid}/click`).then((res) => {
        // console.log(res, "-----");
        this.uuid = uuid
        this.getInitData()
        // this.journalismDetail = res.data;
      })
    },
    // 下一页新的详情页
    NewsBottomPage(uuid) {
      this.$get(`/api/article/quanzhou/public/${uuid}/click`).then((res) => {
        // console.log(res, "-----");
        this.uuid = uuid
        this.getInitData()
        // this.journalismDetail = res.data;
      })
    },
  },
}
</script>

<style lang="less" scoped>
.JournalismDetail_BOX {
  background-color: #f5f5f5;
  padding-bottom: 40px;
  .Journalism_heard {
    width: 100%;
    height: 400px;
    background-color: rgb(127, 169, 192);
    > img {
      width: 100%;
      height: 400px;
    }
  }
  .JournalismDetail_box {
    width: 1200px;
    // height: 2080px; // 设计图的尺寸
    // height: 1200px; // 自定义尺寸
    height: 100%;
    background-color: #fff;
    margin: 22px auto;
    display: flex;
    justify-content: flex-start;
    .left_box {
      width: 900px;
      height: 100%;
      background-color: #fff;
      // margin-right: 20px;
      padding: 20px;
      border-right: 20px solid #f5f5f5;
      .Navigation_position {
        display: flex;
        justify-content: space-between;
        height: 31px;
        border-bottom: 1px solid #d8d8d8;
        margin-bottom: 39px;
        .Navigation_content {
          flex: 1;
          height: 20px;
          .breadcrumb_box {
            > span {
              height: 20px;
              color: #666666;
              font-weight: 400;
              font-size: 14px;
            }
            .breadcrumb_item {
              color: #666666;
              &:hover {
                color: #00468e;
              }
            }
          }
        }
        .Navigation_return {
          height: 20px;
          cursor: pointer;
          color: #999999;
          &:hover {
            color: #333333;
          }
        }
      }
      .text_box {
        .text {
          font-family: PingFangSC-Regular, PingFang SC;
          font-size: 18px;
          font-weight: 400;
          color: #333333;
          text-align: center;
          margin-bottom: 10px;
        }
        .Information_situation {
          // width: 494px;
          width: 374px;
          display: flex;
          justify-content: space-between;
          margin: 0 auto;
          margin-bottom: 30px;
          .Information_content {
            > span {
              font-size: 14px;
              font-weight: 400;
              color: #666666;
            }
          }
        }
        .article_start {
          font-size: 14px;
          font-weight: 400;
          color: #333333;
        }
        .enclosure_box {
          margin-top: 40px;
          border-top: 1px solid #d8d8d8;
          .enclosure_name {
            margin: 16px 0px;
            font-size: 16px;
            color: #333;
            font-weight: 500;
          }
          .enclosure_content {
            display: flex;
            justify-content: flex-start;
            margin-bottom: 10px;
            .enclosure_index {
              margin-right: 20px;
            }
          }
        }

        #Journalism_text {
          width: 100%;
          height: 800px;
          line-height: 700px;
          resize: none;
          background-color: #fff;
          text-align: center;
          scroll-margin-inline-start: 1px solid #f2f2f2;
          -webkit-scrollbar: 1px;
          margin-bottom: 72px;
        }
        .Page_UpAndDown {
          margin: 60px auto;
          .Page_Up {
            cursor: pointer;
            > span {
              height: 28px;
              font-size: 14px;
              font-weight: 400;
              color: #333333;
              line-height: 28px;

              &:hover {
                color: #00468e;
              }
            }
          }
          .Page_Down {
            cursor: pointer;
            > span {
              height: 28px;
              font-size: 14px;
              font-weight: 400;
              color: #333333;
              line-height: 28px;
              &:hover {
                color: #00468e;
              }
            }
            // &:nth-child(2) {
            //   &:hover {
            //     color: #00468e;
            //   }
            // }
          }
        }
      }
    }
    .right_box {
      width: 280px;
      height: 100%;
      background-color: #fff;
      padding: 20px 20px;
      .recommended_reading {
        .recommended_reading_content {
          position: relative;
          font-size: 18px;
          font-weight: 400;
          color: #333333;
          // padding-left: 5px; // 效果图的距离
          padding-left: 10px;
          margin-bottom: 10px;
          &::before {
            width: 3px;
            height: 18px;
            //   height: 25px;
            background-color: #00468e;
            border-radius: 2px 0px 2px 0px;
            position: absolute;
            content: '';
            top: 0px;
            bottom: 0;
            left: 0;
            margin: auto;
            background: #026bac;
            box-shadow: 0px 1px 1px 0px rgba(2, 107, 172, 0.3);
            margin-top: auto;
            margin-right: auto;
            margin-bottom: auto;
            margin-left: auto;
            border-top-left-radius: 50px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 50px;
            border-bottom-left-radius: 0px;
            background-image: initial;
            background-position-x: initial;
            background-position-y: initial;
            background-size: initial;
            background-repeat-x: initial;
            background-repeat-y: initial;
            background-attachment: initial;
            background-origin: initial;
            background-clip: initial;
            background-color: #00468e;
          }
        }
        .Read_the_title {
          position: relative;
          padding-left: 10px;
          padding-bottom: 10px;
          cursor: default;
          font-size: 14px;
          font-weight: 400;
          color: #333333;
          cursor: pointer;
          &:hover {
            color: #00468e;
          }
          // &::before {
          //   width: 4px;
          //   height: 4px;
          //   background-color: #333;
          //   border-radius: 50%;
          //   position: absolute;
          //   content: "";
          //   top: 9px;
          //   left: 0;
          //   background-color: #00468e;
          //   background-image: initial;
          //   background-position-x: initial;
          //   background-position-y: initial;
          //   background-size: initial;
          //   background-repeat-x: initial;
          //   background-repeat-y: initial;
          //   background-attachment: initial;
          //   background-origin: initial;
          //   background-clip: initial;
          //   &:hover {
          //     background-color: #00468e;
          //   }
          // }
          .Dot {
            width: 4px;
            height: 4px;
            background-color: #333;
            border-radius: 50%;
            position: absolute;
            top: 9px;
            left: 0;
            &:hover {
              background-color: #00468e;
            }
          }
        }
        // 小圆点高亮蓝色
        .Read_the_title:hover > .Dot {
          background-color: #00468e;
        }
        //   动态添加颜色
        // .Read_the_title_blur {
        //   color: #00468e;
        //   &::before {
        //     background-color: #00468e;
        //   }
        // }
      }
    }
  }
}
</style>

相伴而行
关注
专栏目录
小程序的富文本如何解决
weixin_46932940的博客
04-09 1203
1.利用小程序内置的组件来解决 使用rieh-text属性来解析富文本 代码如下： <rich-text nodes="{{这里是富文本}}"> </rich-text> 2.利用第三方的方法： 使用wxparse来解决 第一步：下载wxparse 第二步：复制wxparse文件夹 第三步：在需要渲染的wxml页面的js中引入wxpare模式 第四步：在全局app。wxss中引入wxparse的样块 第五步：数据绑定 wxparse。wxparse(bindName,type,t
H5页面PC富文本内容自适应显示
weixin_34226182的博客
06-26 4379
接上篇博客，现在增加一个新需求：h5页面B区显示富文本HTML片段。 功能描述 要求 有一段PC端显示的富文本HTML片段，在手机H5页面B区上加载显示 保持PC端的样式缩放适应手机屏幕 如果HTML富文本有图片 图片默认不加载 当手机可视区间到B区时候，图片触发懒加载显示 点击富文本图时候，有弹层加载图片，可放大查看 提示 可以考虑用iframe方式处理富文本 但是...
PC端编辑 但能在PC端模拟移动端预览的富文本编辑器
weixin_33720078的博客
01-17 3033
想实现在电脑上编辑，能够像浏览器的模拟器那样能够直接预览效果，网上找了很久也没什么结果，刚入行不久的小菜鸟，给各位大佬请安！请赐教！功能类似于下图。。。。。 我用的是vue和elementUi 转载于:https://juejin.im/post/5c4071be51882525a94e2515...
用TextView实现富文本展示，点击断句和语音播报
weixin_33724059的博客
10-30 192
最近有一个需求：移动端需要展示用户在PC端做的笔记，而笔记内容是富文本形式——有图片，有文字，文字可以设置颜色、加粗、倾斜等等。同时，用户点击的时候能够语音朗读所点击的当前整句的内容。 第一反应就是富文本！PC端生成的就是html文件，创给我，直接用WebView展示不就ok了嘛！ 但是，还有一需求：点击断句——我们需要判断用户的点击，定位到所点击的整句话，然后再将整句内容实现语音播报。 这样的话...
pc端免费的富文本两款推荐
gztrljh
10-03 277
tinymce ：到现在都有维护更新，免费，界面超级好看，大气 中文网：http://tinymce.ax-z.cn/ quill：开源免费，好看，好用 https://quilljs.com/ 掌握一款富文本编辑器还有是有必要的
富文本回显 p 标签？去不掉怎么办？如何解决？
最新发布
weixin_71108480的博客
04-10 1189
使用富文本控件上传的上传的数据，回显到文本框时显示标签，并且数据库里面的数据也为带有p标签的数据，如何去掉。
微信小程序富文本编辑器：从wangEditor到vue-quill-editor的迁移实战
文章中提到的wangEditor是一个常用的富文本编辑器，适用于PC端，但存在移动端图片上传的局限性。为了解决这个问题，作者选择了vue-quill-editor，这是一款基于Quill的Vue.js组件，不仅功能丰富，而且适合进行深度...
移动端(html5)富文本编辑器,vue移动端中使用vue-html5-editor富文本编辑器详解
weixin_35810162的博客
06-10 8854
富文本编辑器的应用常见于PC端的后台文章管理，但如果我们需求需要在手机端上使用富文本，我们要如何使用呢？vue-html5-editor富文本编辑器的出现，使手机端上对于富文本的操作更加便捷！本文简要介绍如何基础使用vue-html5-editor编辑器！最终效果如图：1、安装vue-html5-editornpm install vue-html5-editor --save-dev2、安装富文...
工作笔记四——vueJS在移动端使用富文本编辑器
热门推荐
袁杰Jerry
01-25 1万+
本文主要介绍vue移动端使用富文本编辑器的使用及常见问题处理。参考组件vue-html5-editor。 本例主要基于vue-cli脚手架创建。更多vue相关应用请参考：https://github.com/JerryYuanJ/a-vue-app-template 1.项目创建与初始化 创建一个vue-cli项目，建议在安装的时候不要使用ESLINT做代码检查，练习的项目不需要这种检查机...
微信小程序解决富文本不支持的问题
milli236的博客
03-23 5276
使用wxParse来解决1.下载wxParse ：github地址：https://github.com/icindy/wxParse目录下的wxParse文件夹，把他拷贝到我们的项目目录下假如a页面需要显示富文本信息：引入后，在要使用的页面 a.wxml文件里引入 &lt;import src="../../wxParse/wxParse.wxml"/&gt; //你的路径地址  &lt;tem...
超级富文本编辑器支持移动端pc端
03-09
超级富文本编辑器支持移动端pc端
vue-quill-editor汉化
lao_wang_tou的博客
03-09 1983
.ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: "14px" !important; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=...
uni-app 富文本 小程序 富文本 （微信小程序、支付宝小程序、百度小程序）直接套用pc端富文本问题解析
Li_Ning21的博客
12-05 1993
微信跟百度 直接使用 u-parse组件，效果还是不错的，注意一点是a标签的复制提示语，自己需要uni.hideLoading()一下，再重置。支付宝相对复杂一点，采用原生rich-text 标签，搭配官方推荐的mini-html-parser2，处理富文本。同时需要处理一下pc端可正常展示，但是小程序富文本不支持的部分： 直接上组件代码
富文本编辑存储及显示 vue+springBoot
别再捏我脸了的博客
06-28 6763
1.前言 最近项目中需要实现对资讯文章等的编辑与存储 前端语言：vue，组件：element，富文本编辑器（vue-ueditor-wrap） 后端语言：springBoot 2.项目需求 需求：前端通过富文本编辑器对文章资讯进行编辑，保存在数据库中，显示时原样式显示。 3.实现 3.1前端 3.1.1安装依赖vue-ueditor-wrap npm i vue-ueditor-wrap 3.1.2下载ueditor并将其复制到public目录下 下载链接 vue-ue...
PC/移动端的富文本编辑器
php菜鸟技术天地
08-23 1897
移动端/PC端，需要一个富文本编辑器 移动端的截图（手机效果好些）： PC端的截图： 在wangEditor的官网（http://www.wangeditor.com/）中，提供了一些常用的工具，可以按需来配置，还可以自己二次封装： wangEditor3使用手册：https://www.kancloud.cn/wangfupeng/wangeditor3/332599 ...
百度ueditor富文本--PC端单个，PC端多个，mobile单个，mobile多个
直到世界的尽头
08-08 9897
我们在之前的文章中已经做过富文本插件的调研。富文本插件Ueditor是百度推出的一款开源在线 HTML 编辑器。http://fex-team.github.io/ueditor/比较好用，我们本章详细记录它的应用过程，以及在不同场景下的具体配置。我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录 ueditor用法。应用bootstrap
简单操作实现PC端灵活展示
迪赛智慧数的博客
03-31 377
目前数据可视化大屏在金融、运输、媒体、制造、地产、消费品、新零售等各个行业都有真实应用场景。许多数据可视化软件都能满足各行业需求，但是在展示方面，可视化互动平台还是比较推荐的。 这款软件其中一个功能就是可以将用户数据通过PC端灵活展示，用户只需简单操作几个步骤就能实现。 首先进入平台设计界面并设计一个自己的大屏并点击保存。 示例为PC展示端公司销售情况的销售数据报表。 PC端的展示功能十分强大，接下来小编带大家从屏幕分享与屏幕展示来了解，迪赛智慧数可视化互动平台的展示功能。 一、屏幕分享.
vue-editor富文本内容，展示到div标签上
m0_46577631的博客
04-14 2446
如果直接使用数据用{{}}去展示就会出现标签将数据包裹住展示在页面上，所以就想到了使用v-html来展示 <div v-html="fromData.content"></div>
JS execCommand 方法个人经典收藏
onrd
05-26 1286
[color=red]最近学习编辑器，接触源码之前，我考虑JS应该有一个函数可以得到 所选择文本的内容，今天看到 createRange（） ，接着有发现一个execCommand（），惊喜，这可是让菜鸟经验值暴涨的函数啊，呵呵，从网上找了些资料，收藏之。 from:http://blog.jerryjiang.net/?p=33[/color]————————————————————————...
火山PC三维数组使用案例：展示多维数据处理能力
火山PC在处理这类数据时可能集成了专门的可视化工具，帮助用户直观理解和分析数据。 5. 源码文件的探究： 从文件名称“必看源码.v”可以推测，压缩包子文件中包含了一个或多个关键的源码文件。这些文件可能是用某种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值