当前位置:首页 » 《随便一记》 » 正文

uniapp小程序开发-富文本编辑器mp-html,juice外部样式转内联样式

26 人参与  2023年05月07日 18:09  分类 : 《随便一记》  评论

点击全文阅读


前言

在开发一款公司的小程序过程中,有一个需求:web端后端可以上传word文档,后端转为html字符串;小程序接收显示,并且可以在小程序进行编辑修改。
其实在日常小程序中很少见到富文本编辑器的使用,所以这次使用的过程中也尝试了多种,但是最好用的还是mp-html

mp-html

这款插件也是DCloud插件库里的一款,内部其实也是封装使用微信中原生的editor

这款插件的兼容性也很不错,目前也是有人维护的,
在这里插入图片描述
如果小程序有需要还是可以支棱起来的

如何使用

在使用上我还是踩了一些坑的,文档以及百度上的一些资料都太模糊,不足以让我一个初学者去使用。现在我记录一下我的使用过程

第一步

使用 npm install mp-html -dev 安装
在这里插入图片描述

安装成功后,在node_modules中找到mp-html
在这里插入图片描述

第二步

找到node_modules/mp-html/tools/config.js 这个文件的配置可以开启编辑器,媒体,视频等插件,必须要删除之前的注释符号才是真的打开配置在这里插入图片描述在这里插入图片描述

第三步

在我们的终端,将使用命令路径切换至 cd .\node_modules\mp-html\在这里插入图片描述执行npm install
npm run build:uni-app
这样就把编辑器启动好了

第四步

可以封装一个组件,组件中直接引用
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'

components: {mpHtml},
// html 可以一段字符串‘<p style="font-size:20px">dgfhfghfghfghjghj</p>’<mp-html ref="article" container-style="padding:20px" :content="html"  :editable="editable" @remove="remove" />

遇到的问题

因为后端解析的word文档是一个完整的html字符串,例如:
<html><head><style>...</style></head><body>.....</body></html>
而对于我们的富文本是不支持解析这些标签的,而且富文本编辑器仅支持内联样式。后端提供的字符串全部是外联样式。在此,可以使用一个插件解决问题:juice

juice

还有一个插件与juice齐名的插件:inline-css ,因为安装过程中一直反应一个async-hooks 未安装,一直安装一直失败,网上没有找到一个解决方式,我就没有用这个了。如果有人看到可以私信我,帮我一下!感激哦!!!
使用方式

var juice = require('juice');var result = juice("<style>div{color:red;}</style><div/>");
<div style="color: red;"></div>

截取body内的内容

我们可以使用一个正则就可以解决

var rx = /<body[^>]*>([\s\S]+?)<\/body>/i;var m = rx.exec(result); if (m) this.nodes = m[1];

后记

如果小程序中仅需要展示的话,微信原生的rich-text足够了(wxparser也是可以的,但是需要加一下配置)

wxparser 配置(不能在页面的子组件中使用,无效,可以使用slot)

在pages.json里面,需要使用wxparser 的页面单独配置就可以
在这里插入图片描述

 "mp-weixin": {   "usingComponents": {      "wxparser": "plugin://wxparserPlugin/html-parser"    }  }

结语

这篇仅开发过程中遇到的问题记录。排版随便,见谅


点击全文阅读


本文链接:http://zhangshiyu.com/post/61449.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1