Uniapp uses uparse to parse the content of the background rich text editor and modify the uparse style

This paper

In the use of uniapp When developing , Some news content cannot be avoided , It needs to be used in the background Baidu UEditor Upload some content with mixed graphics and text .

Download plug-ins

First , To DCLOUD The plug-in market will uParse This plug-in passes HBuilder X Download to your project （ Plug in links ：https://ext.dcloud.net.cn/plugin?id=183.

Basic use

• For detailed methods, please refer to the plug-in documentation , I won't describe it in detail here .

<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> I am a HTML Code </div>' } }, methods: {
       preview(src, e) {
       // do something }, navigate(href, e) {
       // do something } } } </script>

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

modify uParse Original style

• If you want to change the style, use /deep/ Make mandatory modifications .
• uniapp It is usually used in App.vue Modify inside .

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>