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


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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
语义化 H1 标签
Jan 14 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
vue中使用v-model完成组件间的通信
Aug 22 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
JS运算符优先级与表达式示例详解
Sep 04 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方法调用模式与函数调用模式简例
2011/09/20 PHP
php文件缓存类汇总
2014/11/21 PHP
php银联网页支付实现方法
2015/03/04 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
中文专业毕业生自荐书范文
2014/01/04 职场文书
教师绩效工资方案
2014/02/01 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
建筑学专业自荐书
2014/07/09 职场文书
2014年国庆节寄语
2014/09/19 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
css3带你实现3D转换效果
2022/02/24 HTML / CSS