微信小程序整合使用富文本编辑器的方法详解


Posted in Javascript onApril 25, 2019

本文实例讲述了微信小程序整合使用富文本编辑器的方法。分享给大家供大家参考,具体如下:

使用WxParse插件实现小程序的富文本显示 ,下载地址:富文本插件WxParse

具体使用步骤:

1. 复制插件文件夹到项目根目录,emojis是表情包,可选择性删除

微信小程序整合使用富文本编辑器的方法详解

2. 在.js文件中引入WxParse模块

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

3. 在.wxss文件中引入WxParse.wxss样式,也可以在app.wxss中引入

@import"../../../wxParse/wxParse.wxss";

4. 数据绑定

var article= '<div>我是HTML代码</div>';
var that = this;
WxParse.wxParse('article', 'html', article,that, 5);
/**
* WxParse.wxParse(bindName , type, data,target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
** 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/

5. 在.wxml文件中引用模板文件

//导入文件
<import src="../../../wxParse/wxParse.wxml" />
//引用模版
<template is="wxParse" data="{{wxParseData:article.nodes}}" />
/** data中的article为bindName */

实际开发中遇到的问题

1.图片路径需要修改,添加基路径

在wxParse.js文件中的主函数入口中有这样一段:说明调用到了格式化数据的方法

transData = HtmlToJson.html2json(data, bindName);

2. 在html2json.js文件中,将变量__placeImgeUrlHttps设置为app的基路径:

var __placeImgeUrlHttps = getApp().data.baseUrl;

3. 在html2json.js文件的html2json方法中有这样一段代码:

imgUrl = wxDiscode.urlToHttpUrl(imgUrl, __placeImgeUrlHttps);

将该代码改为:

imgUrl = __placeImgeUrlHttps + imgUrl;

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
一个JavaScript继承的实现
Oct 24 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
JavaScript判断数组类型的方法
Oct 23 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
微信小程序实现的五星评价功能示例
Apr 25 #Javascript
微信小程序实现单列下拉菜单效果
Apr 25 #Javascript
Vue组件通信的几种实现方法
Apr 25 #Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 #Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 #Javascript
页面内锚点定位及跳转方法总结(推荐)
Apr 24 #Javascript
详解Vue项目中实现锚点定位
Apr 24 #Javascript
You might like
简单介绍PHP非阻塞模式
2016/03/03 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
python实现下载文件的三种方法
2017/02/09 Python
python3处理含有中文的url方法
2018/05/10 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
银行实习人员自我鉴定
2013/09/22 职场文书
计算机应用职专应届生求职信
2013/11/12 职场文书
优秀演讲稿范文
2013/12/29 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
青春演讲稿范文
2014/05/08 职场文书
思想作风建设心得体会
2014/10/22 职场文书
干部考察材料范文
2014/12/24 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
歌咏比赛主持词
2015/06/29 职场文书
开业庆典致辞
2015/08/01 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python