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


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 相关文章推荐
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
详解vue 组件
Jun 11 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生成静态页面教程
2012/01/10 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
python实现下载pop3邮件保存到本地
2018/06/19 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
python网络编程之五子棋游戏
2020/05/14 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
应届大学生自荐信格式
2013/09/21 职场文书
消防应急演练方案
2014/02/12 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
北京故宫导游词
2015/01/31 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
Python绘制分类图的方法
2021/04/20 Python
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis