微信小程序实现富文本编辑器

本文主要是介绍微信小程序实现富文本编辑器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.参考官方文档

　　https://developers.weixin.qq.com/miniprogram/dev/component/editor.html

　　在文档最下方有示例代码，如下图：

　　点击“在开发者工具中预览效果”

2.将示例代码保存至桌面，以便后期操作

3.文件甲中有一下文件，如下图，我们主要使用前两个文件夹

4.将前两个文件甲复制到你项目的根目录下

5.写代码

　　wxml代码：

 1 <view class="container" style="height:{{editorHeight}}px;">
 2   <editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindstatuschange="onStatusChange" bindready="onEditorReady">
 3   </editor>
 4 </view>
 5 
 6 <view class="toolbar" catchtouchend="format" hidden="{{keyboardHeight > 0 ? false : true}}" style="bottom: {{isIOS ? keyboardHeight : 0}}px">
 7   <i class="iconfont icon-charutupian" catchtouchend="insertImage"></i>
 8   <i class="iconfont icon-format-header-2 {{formats.header === 2 ? 'ql-active' : ''}}" data-name="header" data-value="{{2}}"></i>
 9   <i class="iconfont icon-format-header-3 {{formats.header === 3 ? 'ql-active' : ''}}" data-name="header" data-value="{{3}}"></i>
10   <i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i>
11   <i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i>
12   <i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i>
13   <i class="iconfont icon--checklist" data-name="list" data-value="check"></i>
14   <i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i>
15   <i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet"></i>
16 </view>

　　js代码：

  1 Page({
  2     data: {
  3       formats: {},
  4       readOnly: false,
  5       placeholder: '开始输入...',
  6       editorHeight: 300,
  7       keyboardHeight: 0,
  8       isIOS: false
  9     },
 10     readOnlyChange() {
 11       this.setData({
 12         readOnly: !this.data.readOnly
 13       })
 14     },
 15     onl oad() {
 16       const platform = wx.getSystemInfoSync().platform
 17       const isIOS = platform === 'ios'
 18       this.setData({ isIOS})
 19       const that = this
 20       this.updatePosition(0)
 21       let keyboardHeight = 0
 22       wx.onKeyboardHeightChange(res => {
 23         if (res.height === keyboardHeight) return
 24         const duration = res.height > 0 ? res.duration * 1000 : 0
 25         keyboardHeight = res.height
 26         setTimeout(() => {
 27           wx.pageScrollTo({
 28             scrollTop: 0,
 29             success() {
 30               that.updatePosition(keyboardHeight)
 31               that.editorCtx.scrollIntoView()
 32             }
 33           })
 34         }, duration)
 35   
 36       })
 37     },
 38     updatePosition(keyboardHeight) {
 39       const toolbarHeight = 50
 40       const { windowHeight, platform } = wx.getSystemInfoSync()
 41       let editorHeight = keyboardHeight > 0 ? (windowHeight - keyboardHeight - toolbarHeight) : windowHeight
 42       this.setData({ editorHeight, keyboardHeight })
 43     },
 44     calNavigationBarAndStatusBar() {
 45       const systemInfo = wx.getSystemInfoSync()
 46       const { statusBarHeight, platform } = systemInfo
 47       const isIOS = platform === 'ios'
 48       const navigationBarHeight = isIOS ? 44 : 48
 49       return statusBarHeight + navigationBarHeight
 50     },
 51     onEditorReady() {
 52       const that = this
 53       wx.createSelectorQuery().select('#editor').context(function (res) {
 54         that.editorCtx = res.context
 55       }).exec()
 56     },
 57     blur() {
 58       this.editorCtx.blur()
 59     },
 60     format(e) {
 61       let { name, value } = e.target.dataset
 62       if (!name) return
 63       // console.log('format', name, value)
 64       this.editorCtx.format(name, value)
 65   
 66     },
 67     onStatusChange(e) {
 68       const formats = e.detail
 69       this.setData({ formats })
 70     },
 71     insertDivider() {
 72       this.editorCtx.insertDivider({
 73         success: function () {
 74           console.log('insert divider success')
 75         }
 76       })
 77     },
 78     clear() {
 79       this.editorCtx.clear({
 80         success: function (res) {
 81           console.log("clear success")
 82         }
 83       })
 84     },
 85     removeFormat() {
 86       this.editorCtx.removeFormat()
 87     },
 88     insertDate() {
 89       const date = new Date()
 90       const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
 91       this.editorCtx.insertText({
 92         text: formatDate
 93       })
 94     },
 95     insertImage() {
 96       const that = this
 97       wx.chooseImage({
 98         count: 1,
 99         success: function (res) {
100           that.editorCtx.insertImage({
101             src: res.tempFilePaths[0],
102             data: {
103               id: 'abcd',
104               role: 'god'
105             },
106             width: '80%',
107             success: function () {
108               console.log('insert image success')
109             }
110           })
111         }
112       })
113     },
114     click:function(e){
115       console.log(e.currentTarget.dataset.name)
116     }
117   })
118 

　　wxss代码：（注：前两行的路径要自行修改）

 1 @import "../../common/lib/weui.wxss";
 2 @import "../../editor/assets/iconfont.wxss";
 3 
 4 .container {
 5   position: absolute; 
 6   top: 0; 
 7   left: 0; 
 8   width: 100%;
 9 }
10 
11 .ql-container {
12   box-sizing: border-box;
13   width: 100%;
14   height: 100%;
15   font-size: 16px;
16   line-height: 1.5;
17   overflow: auto;
18   padding: 10px 10px 20px 10px;
19   border: 1px solid #ECECEC;
20 }
21 
22 .ql-active {
23   color: #22C704;
24 }
25 
26 .iconfont {
27   display: inline-block;
28   width: 30px;
29   height: 30px;
30   cursor: pointer;
31   font-size: 20px;
32 }
33 
34 .toolbar {
35   box-sizing: border-box;
36   padding: 0 10px;
37   height: 50px;
38   width: 100%;
39   position: fixed;
40   left: 0;
41   right: 100%;
42   bottom: 0;
43   display: flex;
44   align-items: center;
45   justify-content: space-between;
46   border: 1px solid #ECECEC;
47   border-left: none;
48   border-right: none;
49 }

　　json代码：

1 {
2   "navigationBarTitleText": "发表文章",
3   "disableScroll": true
4 }

6.然后依次保存就好

7.最后点击真机调试，用手机扫描二维码便可以使用了。

这篇关于微信小程序实现富文本编辑器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！