uniapp怎么解析html字符串,uniapp富文本解析插件的详细使用教程

如果你作为文章资源类或者博客类的小程序你就会发现,很多时候你的文章数据都是html格式或md格式,这样如果不经过处理,会非常难看,所以富文本解析就显得格外重要了,今天给大家写一个uniapp怎么使用富文本解析插件的教程。

最近一直在重构typecho博客小程序,但是现在的进度很缓慢,总觉着页面效果达不到自己想要的效果。抽空挖一个重点来给大家写个教程,说到博客小程序,最重要的就是文章了,但是从数据库中获取的文章格式是md的,如果直接显示会显得很乱,而且会引起极度不适,所以大家应该会想到富文本解析,有过经验的人应该用过微信富文本解析插件wxParse,但是他只能在微信端使用,而我们用uniapp的当然是希望全端兼容呀。那么往下看吧。

在uniapp插件市场有一些富文本插件,但是教程不是特别详细,这里给大家写一个详细的教程帮助大家消化一下。

安装插件

进入uniapp插件市场找到想要的插件,然后单击右上角的使用HBuilderX导入插件,然后选择你需要富文本解析功能的项目。

1f7964e5efd719a39fc4af57b5352fcb.png

安装marked模块

由于typecho程序默认使用的是md语法,这里我们需要先使用marked模块将md转化为html格式,才能进行富文本的渲染。如果你说wordpress,就不用进行这一步了。具体安装步骤如下:右键单击项目根目录文件夹选择:使用命令行窗口打开目录

然后下如下图所示地方输入npm install marked,等待完成

4d94547d7ef5e3e2c51efebc816afa7d.png

使用插件

先将获得的文章内容content进行md转html处理,然后再将转化后的内容进行富文本渲染,具体步骤如下:在需要使用的页面的sript导入插件和marked模块,代码如下:import marked from 'marked';

import jyfParser from "@/components/jyf-parser/jyf-parser"; //插件安装你安装的插件来定

7b4143a2ee2390d836c26bc07338569a.pngmd转html处理var article = marked(content);

这样得到的article就是经过转化获得的html数据富文本解析并展示

这样就可以展示typecho中的文章数据了。

说明

该教程主要是插件的使用,所以对数据的赋值等写的不是特别完善,可根据实际情况进行修改。

赞 5

原创文章,作者:小创果,如若转载,请注明出处:https://www.i4qq.com/jpjc/uniappfwbjc.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/571715.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c++和python有联系吗_Python和C++交互

关键字:Python 2.7,VS 2010,swig OS:Win8.1 with update。 1.下载swig:http://www.swig.org/download.html 2.将swig的路径添加到环境变量Path,例如set pathC:\swigwin-3.0.2。 3.用VS创建一个win32 consol…

这两年多我写PHP业务代码的方式是如何进化的

曾今 谁都有过迷茫期,下面是我开始PHP开发中,不断改变的代码组织方式。 初期:所有代码一股脑控制器controller 曾今只是简单的理解MVC 中期:业务代码抽象一部分到模型层model 开始觉得model层是否该做点什么了 后期:业…

html播放切片,[Html/Css]网页切片

简介这篇文章主要介绍了[Html/Css]网页切片以及相关的经验技巧,文章约2269字,浏览量461,点赞数4,值得参考!网页切片 前端必须掌握的技能,切片,虽然说难也不难,简单也确实是挺简单的&…

时间转换python_Python 日期与时间转换的方法

问题 你需要执行简单的时间转换,比如天到秒,小时到分钟等的转换。 解决方案 为了执行不同时间单位的转换和计算,请使用 datetime 模块。 比如,为了表示一个时间段,可以创建一个 timedelta 实例,就像下面这样…

设计模式学习总结(一)——设计原则与UML统一建模语言

目录 一、概要1.1、设计模式定义1.2、设计模式分类1.3、设计模式书籍二、UML统一建模语言2.1、UML分类2.2、类图2.2.1、关联2.2.2、聚合/组合2.2.3、依赖2.2.4、泛化(继承)三、设计原则2.1、单一职责原则(SRP)2.2、开闭原则&#…

计算机与生命科学专业排名,2019软科世界一流学科排名发布,54个专业TOP10牛校榜单全给你...

原标题:2019软科世界一流学科排名发布,54个专业TOP10牛校榜单全给你软科26日正式发布2019“软科世界一流学科排名”(Shanghai Rankings Global Ranking of Academic Subjects)。2019年排名覆盖54个学科,涉及理学、工学、生命科学、医学和社会…

python入门心得_一天入门 Python 的一些心得

1. 前言 好久没写文了。最近在搞一些好玩的技术用到了 Python 。我原以为要花些时日,谁知道第一天入门之后便没有再刻意地去学习它了。这里就写写其中的一些关键点吧。如果我去学一门语言不是因为它火了而是我用到它了。曾经闲着没事干的时候把 Kotlin 、Vue、React…

git 创建tag , 查看tag , 删除tag

2157 git tag  //查看tag2158 git tag test_tag c809ddbf83939a89659e51dc2a5fe183af384233    //在某个commit 上打tag2159 git tag ... 2169 git push origin test_tag    //!!!本地tag推送到线上 ... 2180 git tag -d test_tag        //本地删除tag…

太原计算机专业专科大学排名,太原【计算机学校】排名

太原【计算机学校】排名,资助政策1、根据国家助学金管理办法相关规定:凡被我校正式录取并注册学籍的学生在校期间均可以享受国家**费补助1900元/年,享受三年。创新科技中等专业学校排名, 有45个本科专业,16个专科专业, 3个专业硕士…

python print format

挺有用 //test.py 1 print %.*f %(1, 13.987) 2 print %.*f %(2, 13.987) 3 print p%8d %(123) 4 print p%-8d %(123) 5 print %d %(1) 6 print % d %2 7 print %#o %(17) 8 print %#x %(17) 9 print %#X %(29) 10 print %02d %(3) 11 print % 02d %(3) 12 print %%%d %(4) 13 …

python中正则表达式的默认匹配方式为_Python模式匹配与正则表达式

1.1 不用正则表达式来匹配文本 假设我希望在一个字符串中找到电话号码,电话号码的格式为三个数字,一个短横线,四个数字,一个短横线,四个数字 比如:131-3310-5293和132-2670-9864 def IsTruePhoneNumber(con…

计算机网络应用是学什么类型的,计算机网路中服务类型及应用

服务(service)这个极普通的术语在计算机网络中无疑是一个极重要的概念。在网络体系结构中,服务就是网络中各层向其相邻上层提供的一组操作,是相邻两层之间的界面。由于网络分层结构中的单向依赖关系,使得网络中相邻层之间的界面也是单向性的&…

oschina git服务, 如何生成并部署ssh key

1.如何生成ssh公钥 你可以按如下命令来生成 sshkey: ssh-keygen -t rsa -C "xxxxxxxxxx.com" # Generating public/private rsa key pair... # 三次回车即可生成 ssh key 查看你的 public key,并把他添加到码云(Gitee.com) SSH k…

需求调研报告模板_2020年工业软管行业深度市场调研及投资策略建议报告-液体化学品增加对其需求...

(原标题:液体化学品市场规模增加 对工业软管需求量变大)工业软管,又称为工业胶管。主要用于各行业各设备作软体连接的一种软管。相比民用软管,工业作业环境更复杂、更恶劣、设备对输送管的要求也更苛刻,因此…

计算机基础理论知识的论文,计算机基础毕业论文

计算机基础毕业论文随着科学技术的不断发展,计算机也开始人类在正常生活当中所应用的一个高新的技术。下面是小编整理的计算机基础毕业论文,欢迎来参考!摘要:大学进行计算机教学能够对学生的创新能力进行培养,还能够使…

配置TomCat环境变量

在完成jdk的配置后进行 配置方法: ①安装tomcat ②我的电脑--属性--高级系统设置--环境变量 ③创建CATALINA_HOME变量 ④然后编辑 path 环境变量引入CATALINA_HOME变量值 ⑤测试,打开浏览器输入localhost:8080 环境变量写法:  第…

hyperledger fabric_鼎诚鬼才|超级账本入门(四):HYPERLEDGER 权限管理

权限管理权限管理机制是 hyperledger fabric 项目的一大特色。下面给出使用权限管理的一个应用案例。启动集群首先现在相关镜像。$ docker pull yeasy/hyperledger:latest $ docker tag yeasy/hyperledger:latest hyperledger/fabric-baseimage:latest $ docker pull yeasy/hyp…

用计算机表白的数字,用数字表白

用数字表白2018-09-11组句:83848520920910851314——怕生怕死怕我爱你,就爱你,就要你怕我一生一世 584,5682177778,12234,1798,76868,587129955,829475,5201314. —— 我发誓,我想陪你一起去吹吹风,要让爱相随&#xf…

Python基础检测:20171105

第一周的预习结束了 效果并不理想,最后的检测也是有个别同学表现还可以.最后一次检测,除了依旧不是放在一个文件里,文件也没有标注作者从而导致我没办法一一回复外,有些问题写的不好意外.基本没什么毛病,摔! 本次问题是以小故事的形式展开并串联的,并没有什么特殊的意思.本人不…

python爬音乐网站_用 Python 爬取 QQ 音乐全部歌曲

前景介绍 最近小伙伴们听歌的兴趣大涨,网抑云综合症已经遍布各地。 咱们再来抬高一波QQ音乐的热度吧。 土豪充绿钻 和 刷永久绿钻的除外(me) 爬它 目标:https://y.qq.com/portal/singer_list.html 任务:将A到Z的歌手以及全部页数的歌存到本地…