脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序整合富文本编辑器

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

 更新时间：2019年04月25日 08:57:10   作者：guanguan0_0  
这篇文章主要介绍了微信小程序整合使用富文本编辑器的方法,结合实例形式分析了微信小程序整合与使用富文本插件WxParse相关步骤与操作技巧,需要的朋友可以参考下

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

使用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;

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

您可能感兴趣的文章:

相关文章

  • JSON中双引号的轮回使用过程中一定要小心

    JSON中双引号的轮回使用过程中一定要小心

    如果JSON对象中有属性是包含双引号当转换成字符串形式，将自动加上反斜线，详细请祥看本文
    2014-03-03
  • javascript中String对象的slice()方法分析

    javascript中String对象的slice()方法分析

    这篇文章主要介绍了javascript中String对象的slice()方法,以实例形式分析了slice()方法的定义、参数与具体用法,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • js统计页面的来访次数实现代码

    js统计页面的来访次数实现代码

    这篇文章主要介绍了如何使用js统计页面的来访次数,需要的朋友可以参考下
    2014-05-05
  • 从理论角度讨论JavaScript闭包

    从理论角度讨论JavaScript闭包

    本文将介绍一个在JavaScript经常会拿来讨论的话题 —— 闭包（closure）。 闭包其实已经是个老生常谈的话题了； 有大量文章都介绍过闭包的内容， 尽管如此，这里还是要试着从理论角度来讨论下闭包， 看看ECMAScript中的闭包内部究竟是如何工作的
    2019-04-04
  • 利用JS hash制作单页Web应用的方法详解

    利用JS hash制作单页Web应用的方法详解

    这篇文章主要给大家介绍了关于如何利用JS hash制作单页Web应用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • 详解axios跨端架构是如何实现的

    详解axios跨端架构是如何实现的

    我们都知道,axios 是是一个跨平台请求方案,在浏览器端采用 XMLHttpRequest API 进行封装,而在 Node.js 端则采用 http/https 模块进行封装,那么本文,我们将来探讨这个话题：axios 的跨端架构是如何实现的,需要的朋友可以参考下
    2024-04-04
  • JS实现简易留言板特效

    JS实现简易留言板特效

    这篇文章主要为大家详细介绍了JS实现简易留言板特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-12-12
  • JS通过Cookie判断页面是否为首次打开

    JS通过Cookie判断页面是否为首次打开

    这篇文章主要介绍了JS通过Cookie判断页面是否为首次打开 的相关资料,需要的朋友可以参考下
    2016-02-02
  • JS脚本根据手机浏览器类型跳转WAP手机网站（两种方式）

    JS脚本根据手机浏览器类型跳转WAP手机网站（两种方式）

    随着移动互联网的不断普及，企业的网络宣传不仅只局限在PC端，还要在移动端发展。我们在自己的网站做了WAP手机完整之后，如果有用户通过手机访问我们的企业顶级域名网站，就要判断跳转到专为的WAP网站，下面小编给大家整理有关手机浏览器跳转WAP手机网站的相关内容
    2015-08-08
  • 前端程序员必须知道的高性能Javascript知识

    前端程序员必须知道的高性能Javascript知识

    这篇文章主要为大家详细介绍了前端程序员必须知道的高性能Javascript知识，感兴趣的小伙伴们可以参考一下
    2016-08-08

最新评论