使用微信小程序富文本的完整实例_微信小程序 富文本 例子

微信小程序富文本的完整实例,或者直接看下面也可以 (插入图片的功能需要自己提供有效的接口才能生效)

.wxml

	<!--pages/editor.wxml-->
	<view class="q-quill">
	    <view class="toolbar" catchtouchend="format1" style="bottom: {{isIOS ? keyboardHeight : 0}}px">
	      <i class="iconfont icon-charutupian" catchtouchend="insertImage1"></i>
	      <i class="iconfont icon-format-header-2 {{formats.header === 2 ? 'ql-active' : ''}}" data-name="header" data-value="{{2}}"></i>
	      
	      <i class="iconfont icon-format-header-3 {{formats.header === 3 ? 'ql-active' : ''}}" data-name="header" data-value="{{3}}"></i>
	      <i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i>
	      <i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i>
	      <i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i>
	      <i class="iconfont icon--checklist" data-name="list" data-value="check"></i>
	      <i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i>
	      <i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet"></i>
	      <i class="iconfont iconjuzhong {{formats.align === 'center' ? 'ql-active' : ''}}" data-name="align" data-value="center">中</i>
	    </view>
	  <view class="container" >
	  	<!-- 这个editor 是微信提供的组件 -->
	    <editor id="editor1" class="ql-container" placeholder="{{placeholder}}" bindstatuschange="onStatusChange1" bindready="onEditorReady1" show-img-size	="{{true}}" show-img-resize	="{{true}}" show-img-toolbar	="{{true}}" bindblur="blur1">
	    </editor>
	  </view>
	</view>
	<view style="color:#e8e8e8">点击这个位置，让富文本失焦</view>
	<!-- 这是对应解析富文本的组件 -->
	<rich-text nodes="{{param.content}}"></rich-text>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.js

	// pages/editor.js
	Page({
	  /**
	   * 
	   * 页面的初始数据
	   */
	  data: {
	    isShow: false,
	    placeholder: '请输入',
	    param: {
	      content: '',
	    },
	    richContent: "",
	    richJobRemark: ""
	  },
	
	  /**
	   * 生命周期函数--监听页面加载
	   */
	  onLoad: function (options) {
	
	  },
	
	  //富文本
	  // 富文本相关的函数
	  onEditorReady1() { //1
	    const that = this
	    this.createSelectorQuery().select('#editor1').context(function (res) {
	      console.log(res)
	      that.editorCtx1 = res.context
	      if (that.data.richContent == "" || that.data.richContent == null) {
	      } else {
	        that.editorCtx1.setContents({ html: that.data.richContent }) // 注意：插入的是对象
	      }
	    }).exec()
	  },
	  //富文本失焦的事件
	  blur1(e) { //1
	    let html = e.detail.html
	    let delta = e.detail.delta
	    console.log(html)
	    console.log(delta)
	    this.data.param.content = html
	    this.setData({
	      param: this.data.param
	    })
	    this.editorCtx1.blur()
	  },
	  //样式设置的部分
	  format1(e) { //1
	    console.log(e)
	    let { name, value } = e.target.dataset
	    if (!name) return
	    // console.log('format', name, value)
	    console.log(this)
	    this.editorCtx1.format(name, value)
	
	  },
	  //富文本编辑器状态改变
	  onStatusChange1(e) { //1
	    console.log(this.editorCtx1)
	    const formats = e.detail
	    this.setData({ formats })
	  },
	  //插入图片 （需要自己配置url以及上传参数）
	  insertImage1() { //1
	    const that = this
	    // let user_token = global.state.token;
	    wx.chooseImage({
	      count: 1,
	      success: function (res) {
	        wx.uploadFile({
	          url: 'url',
	          filePath: res.tempFilePaths[0],
	          name: 'file',
	          header: {
	            "token": user_token
	          },
	          success: function (res) {
	            console.log(res)
	            if (res.statusCode == 200) {
	              let data = JSON.parse(res.data);
	              let img = data.result.attachmentUrl;
	              that.editorCtx1.insertImage({
	                src: img,
	                data: {
	                  id: 'abcd',
	                  role: 'god'
	                },
	                // width: '100%',
	                success: function () {
	                  console.log('insert image success')
	                }
	              })
	            }
	          }
	        })
	      }
	    })
	  },
	  /**
	   * 生命周期函数--监听页面初次渲染完成
	   */
	  onReady: function () {
	
	  },
	
	  /**
	   * 生命周期函数--监听页面显示
	   */
	  onShow: function () {
	
	  },
	
	  /**
	   * 生命周期函数--监听页面隐藏
	   */
	  onHide: function () {
	
	  },
	
	  /**
	   * 生命周期函数--监听页面卸载
	   */
	  onUnload: function () {
	
	  },
	
	  /**
	   * 页面相关事件处理函数--监听用户下拉动作
	   */
	  onPullDownRefresh: function () {
	
	  },
	
	  /**
	   * 页面上拉触底事件的处理函数
	   */
	  onReachBottom: function () {
	
	  },
	
	  /**
	   * 用户点击右上角分享
	   */
	  onShareAppMessage: function () {
	
	  }
	})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

.wxss 引入的iconfont的下载地址

  @import '../style/iconfont.wxss'; //这是我引入的iconfont的字体样式文件
  // 下载地址 //at.alicdn.com/t/font_1606173_gwq4tqe78l.css
  .q-quill /deep/ .ql-toolbar.ql-snow + .ql-container.ql-snow {
    height: 32vh;
  }
  
  .q-quill /deep/ .ql-toolbar.ql-snow + .ql-container.ql-snow {
    height: 32vh;
  }
  
1
2
3
4
5
6
7
8
9
10

运行效果图：