uniapp用uParse实现解析后台的富文本编辑器的内容及修改uParse样式

@Winner

6076人浏览 · 2022-06-20 15:10:01

@Winner · 2022-06-20 15:10:01 发布

阐述

在使用uniapp开发的时候，避免不了一些新闻类的内容，需要后台使用百度的 UEditor 进行上传一些图文混排的内容。

下载插件

首先，到DCLOUD插件市场将uParse这个插件通过HBuilder X下载到你的项目中（插件链接：https://ext.dcloud.net.cn/plugin?id=183。
在这里插入图片描述

基本使用

具体详细的时候方法可以参考插件文档，这边不在详细描述了。

<template>
  <div>
    <u-parse :content="article" @preview="preview" @navigate="navigate" ></u-parse>
  </div>
</template>

<script>
import uParse from '@/components/u-parse/u-parse.vue'

export default {
  components: {
    uParse
  },
  data () {
    return {
      article: '<div>我是HTML代码</div>'
    }
  },
  methods: {
    preview(src, e) {
      // do something
    },
    navigate(href, e) {
      // do something
    }
  }
}
</script>

<style>
@import url("@/components/u-parse/u-parse.css");
</style>

修改uParse原样式

如果要修改样式的话要用/deep/进行强制修改。
uniapp使用的时候一般都在App.vue里面修改。

App.vue

<style scoped>
    @import url("/components/u-parse/u-parse.css");
    /deep/ .wxParse{
        margin: 10px auto;
        width: 90vw;
        padding: 20px 10px;
    }
    /deep/ .first{
        text-align: center;
        padding-bottom: 5px;
        border-bottom: 1px solid #CDCDCD;
    }
</style>