wxparse使用（富文本插件）

优点：目前已知唯一可以转化HTML到小程序识别的插件

缺点：转换一个HTML标签可能需要大量的微信小程序标签还有样式

配置：第一步，下载

https://github.com/icindy/wxParse

第二步，放入项目中，我选择pages目录下

第三步，配置

wxml加入：

<import src="../wxParse/wxParse.wxml"/>

在需要的地方使用：

<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

其中article是后台html值的变量名

js加入：

var WxParse = require('../wxParse/wxParse.js');

这里貌似使用es6的import会有错误

我在onload事件写下了：

WxParse.wxParse('article', 'html', this.data.article, this, 5);

注意的是第三个和第四个参数，前几个可以固定不变但是第一个要和数据变量名一致，第三个是后台数据，第四个是指的小程序标签，可以注册多个wxparse

wxss加入：

@import '../wxParse/wxParse.wxss';

到此完成，但是要注意的是a标签的转化，需要加入一个方法，示例如下：

wxParseTagATap: function (e) {var href = e.currentTarget.dataset.src;console.log(href);wx.redirectTo({url: href});}

这个在点击a标签的时候控制台其实是输出了警告信息的

此外url也只能是小程序内部地址，这是个限制，他不能跳到外部，这里我想后台编辑的时候可以用二维码替代，小程序跳转外部地址可以使用web-view标签，详情参考官方文档

wxparse使用（富文本插件）相关推荐

微信小程序开发(十三)富文本插件wxParse的wxParseImgTap的bug修复
在上一篇微信小程序开发(十二)富文本插件wxParse的使用中,我已经使用了wxParse插件.下午有时间就仔细的把玩了一下,发现了一个bug. 问题描述仔细看报错,我们会发现是wxParse.js ...
php小程序的wxparse.js是什么,微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）...
1.把wxParse文件全部放入项目. 2.在wxml中import wxParse.wxml,并把template插入到到对应的位置上 {{title}} {{date}} {{time}} 3.在 ...
quill-editor 富文本插件（含全部全部工具栏）
quill-editor 富文本插件使用一.npm 安装 vue-quill-editor 二.在main.js中引入 import VueQuillEditor from 'vue-quill- ...
pagination分页、jedate日期、wangEditor富文本插件使用总结
插件的使用 1. 导包 2. 写HTML结构 3. 初始化 pagination分页插件官方文档:http://josecebe.github.io/twbs-pagination/ Demo: 1 ...
VUE3 引入富文本插件 CKEditor5
目录 1.插件选型: 2.引入流程: 1.下载 2.全局引入 3.页面使用 3.问题报错解决: 4.关于TinyMce: 1.插件选型: vue3的可选择的富文本插件很多,这次的业务需求只是简单的文字 ...
超易上手的富文本插件wangEditor for vue2
前言我们在项目中经常接触的富文本插件有很多应用方案,我常用的有quill-editor.tiptap.wangEditor.先简单介绍下区别: quill-editor:用的最多的插件,但是已经不在 ...
微信小程序开发(十二)富文本插件wxParse的使用
昨天一位网友问我小程序怎么解析富文本.他尝试过把html转出小程序的组件,但是还是不成功,我说可以把内容剥离出来.但是这两种方法都是不行了.后来找到了wxParse-微信小程序富文本解析组件. 特性 ...
微信小程序富文本插件
一.简介及说明在小程序项目开发中,会遇到富文本编辑的内容,后台返回到小程序端无法解析,这时就需要一个插件来处理. 微信小程序没有提供webview等html解析,原展示类文本没有办法图文并茂的原生展 ...
富文本插件和回显 vue-quill-editor
在开发过程中,input的限制会越来越明显.这时富文本输入框就派上用场了. 推荐使用这个插件 vue-quill-editor 插件的使用方法和自定义组件的使用方法一样第一步: 安装插件 npm i ...
百度ueditor富文本插件插入视频问题汇总【必须收藏】
业务场景:想必在非vue情况下很多后台大多都在用百度的富文本,这不公司的一些老项目在迁移另一台服务器后就遇到了各式各样的奇怪问题,此文会总结汇总该插件的所有相关问题及修改方案,不断更新! 问题一:在插 ...

wxparse使用（富文本插件）

wxparse使用（富文本插件）相关推荐

最新文章

热门文章