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

最新推荐文章于 2024-05-29 10:28:16 发布

@Winner

最新推荐文章于 2024-05-29 10:28:16 发布

阅读量5.9k

点赞数 1

分类专栏： uniapp 小程序 html

本文链接：https://blog.csdn.net/zxh7770/article/details/125373021

版权

uniapp UEditor 图文混排 uParse 组件集成

关键词由CSDN通过智能技术生成

小程序同时被 3 个专栏收录

26 篇文章 6 订阅

订阅专栏

uniapp

12 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

阐述

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