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

阐述

在使用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>