devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序使用editor富文本编辑器 以及回显 全屏弹窗的模式_微信小程序 editor 回显

作者：2023面试高手 | 2024-02-16 05:56:39

赞

踩

微信小程序 editor 回显

 

  1.   <!--富文本接收的位置-->
  2.   <view class="white-box">
  3.     <view class="title">
  4.       <view class="yellow-fence"></view>
  5.       <view class="v1">教研记录</view>
  6.     </view>
  7.     <view class="add-btn" bindtap="addRecords">添加新的教研记录</view>
  8.     <view wx:for="{{records}}" class="rich-text-box" wx:key="index">
  9.       <!-- <mp-html content="{{item}}" selectable="true" show-img-menu="true" /> -->
  10.       <rich-text nodes="{{item}}" data-index="{{index}}" bindtap="echoRecordsData"></rich-text>
  11.     </view>
  12.   </view>
  13.  
  14.   <view class="white-box">
  15.     <view class="title">
  16.       <view class="yellow-fence"></view>
  17.       <view class="v1">研究成果</view>
  18.     </view>
  19.     <view class="add-btn" bindtap="addAchievement">添加研究成果说明</view>
  20.     <view wx:for="{{achievement}}" class="rich-text-box" wx:key="index">
  21.       <!-- <mp-html content="{{item}}" selectable="true" show-img-menu="true" /> -->
  22.       <rich-text nodes="{{item}}" data-index="{{index}}" bindtap="echoAchievementData"></rich-text>
  23.     </view>
  24.   </view>

以上是富文本的值返回接收的地方 下面是富文本的html

  1.   <!--富文本编辑器弹窗-->
  2.   <view class="container" style="height:100vh;" wx:if="{{showEidter}}">
  3.     <view class="save-box">
  4.       <view class="v1" bindtap="cancelEidter">取消</view>
  5.       <view class="v2" bindtap="saveEditer">确定</view>
  6.     </view>
  7.     <editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindstatuschange="onStatusChange" bindready="onEditorReady" bindfocus="onFocus" bindinput="onBlur">
  8.     </editor>
  9.     <view class="toolbar" catchtouchend="format">
  10.       <i class="iconfont icon-charutupian" catchtouchend="insertImage"></i>
  11.       <i class="iconfont icon-format-header-2 {{formats.header === 2 ? 'ql-active' : ''}}" data-name="header" data-value="{{2}}"></i>
  12.       <i class="iconfont icon-format-header-3 {{formats.header === 3 ? 'ql-active' : ''}}" data-name="header" data-value="{{3}}"></i>
  13.       <i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i>
  14.       <i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i>
  15.       <i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i>
  16.       <i class="iconfont icon--checklist" data-name="list" data-value="check"></i>
  17.       <i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i>
  18.       <i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet"></i>
  19.     </view>
  20.   </view>
  1. Page({
  2.   data: {
  3.     /*富文本-start*/
  4.     formats: {},
  5.     readOnly: false,
  6.     placeholder: '开始输入...',
  7.     isClickImg: false,
  8.  
  9.     records: [], //教研记录列表    
  10.     isRecordsEidt: false, //是否编辑的是教研记录
  11.     recordsEidtIndex: null, //教研记录编辑的是哪一条
  12.  
  13.     achievement: [], //研究成果列表
  14.     isAchievementEidt: false, //是否编辑的是研究成果
  15.     achievementEidtIndex: null, //研究成果编辑的是哪一条
  16.  
  17.     showEidter: false,
  18.     editData: '',
  19.     /*富文本-end*/    
  20.   },
  21.  
  22.   onLoad(options) {},
  23.  
  24.   /*富文本编辑器-start*/
  25.   //编辑教研记录列表
  26.   echoRecordsData(e) {
  27.     const that = this
  28.     let oidx = e.currentTarget.dataset.index
  29.     this.setData({
  30.       isRecordsEidt: true,
  31.       showEidter: true,
  32.       recordsEidtIndex: oidx,
  33.  
  34.       isAchievementEidt: false, //是否编辑的是研究成果
  35.       achievementEidtIndex: null, //研究成果编辑的是哪一条
  36.     })
  37.     //console.log(that.data.records[oidx])
  38.     // 修改时，反显数据
  39.     this.createSelectorQuery().select("#editor")
  40.       .context((res) => {
  41.         res.context.setContents({
  42.           html: that.data.records[oidx],
  43.         });
  44.       })
  45.       .exec();
  46.   },
  47.   echoAchievementData(e) {
  48.     const that = this
  49.     let oidx = e.currentTarget.dataset.index
  50.     this.setData({
  51.       isAchievementEidt: true,
  52.       showEidter: true,
  53.       achievementEidtIndex: oidx,
  54.  
  55.       isRecordsEidt: false, //是否编辑的是教研记录
  56.       recordsEidtIndex: null, //教研记录编辑的是哪一条
  57.     })
  58.     //console.log(that.data.records[oidx])
  59.     // 修改时，反显数据
  60.     this.createSelectorQuery().select("#editor")
  61.       .context((res) => {
  62.         res.context.setContents({
  63.           html: that.data.achievement[oidx],
  64.         });
  65.       })
  66.       .exec();
  67.   },
  68.   //重置
  69.   cancelEidter() {
  70.     this.setData({
  71.       isRecordsEidt: false,
  72.       showEidter: false,
  73.       recordsEidtIndex: null,
  74.       isAchievementEidt: false,
  75.       achievementEidtIndex: null,
  76.       editData: ''
  77.     })
  78.   },
  79.   saveEditer() {
  80.     //如果是教研记录新增
  81.     let recordsEidtIndex = this.data.recordsEidtIndex
  82.     let achievementEidtIndex = this.data.achievementEidtIndex
  83.     if (this.data.isRecordsEidt) {
  84.       let odata = this.data.records
  85.       if (recordsEidtIndex || recordsEidtIndex === 0) {
  86.         //编辑
  87.         odata[recordsEidtIndex] = this.data.editData
  88.       } else {
  89.         //新增
  90.         odata.push(this.data.editData)
  91.       }
  92.       this.setData({
  93.         records: odata
  94.       })
  95.       //console.log(this.data.records)
  96.       this.cancelEidter()
  97.     } else if (this.data.isAchievementEidt || achievementEidtIndex === 0) {
  98.       let odata = this.data.achievement
  99.       if (achievementEidtIndex) {
  100.         //编辑
  101.         odata[achievementEidtIndex] = this.data.editData
  102.       } else {
  103.         //新增
  104.         odata.push(this.data.editData)
  105.       }
  106.       this.setData({
  107.         achievement: odata
  108.       })
  109.       //console.log(this.data.records)
  110.       this.cancelEidter()
  111.     }
  112.   },
  113.  
  114.   addRecords() {
  115.     this.setData({
  116.       isRecordsEidt: true,
  117.       showEidter: true
  118.     })
  119.   },
  120.   addAchievement() {
  121.     this.setData({
  122.       isAchievementEidt: true,
  123.       showEidter: true
  124.     })
  125.   },
  126.   readOnlyChange() {
  127.     this.setData({
  128.       readOnly: !this.data.readOnly
  129.     })
  130.   },
  131.  
  132.   onEditorReady() {
  133.     const that = this
  134.     wx.createSelectorQuery().select('#editor').context(function (res) {
  135.       //console.log(res)
  136.       if (res.context) {
  137.         that.editorCtx = res.context
  138.       }
  139.     }).exec()
  140.   },
  141.   format(e) {
  142.     let {
  143.       name,
  144.       value
  145.     } = e.target.dataset
  146.     if (!name) return
  147.     // console.log('format', name, value)
  148.     this.editorCtx.format(name, value)
  149.   },
  150.   onStatusChange(e) {
  151.     const formats = e.detail
  152.     this.setData({
  153.       formats
  154.     })
  155.   },
  156.   insertDivider() {
  157.     this.editorCtx.insertDivider({
  158.       success: function () {
  159.         console.log('insert divider success')
  160.       }
  161.     })
  162.   },
  163.   clear() {
  164.     this.editorCtx.clear({
  165.       success: function (res) {
  166.         console.log("clear success")
  167.       }
  168.     })
  169.   },
  170.   removeFormat() {
  171.     this.editorCtx.removeFormat()
  172.   },
  173.   insertDate() {
  174.     const date = new Date()
  175.     const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
  176.     this.editorCtx.insertText({
  177.       text: formatDate
  178.     })
  179.   },
  180.   insertImage() {
  181.     this.setData({
  182.       isClickImg: true
  183.     })
  184.     const that = this
  185.     wx.chooseImage({
  186.       count: 1,
  187.       success: function (res) {
  188.         that.editorCtx.insertImage({
  189.           src: res.tempFilePaths[0],
  190.           data: {
  191.             id: 'abcd',
  192.             role: 'god'
  193.           },
  194.           width: '80%',
  195.           success: function () {
  196.             console.log('insert image success')
  197.           }
  198.         })
  199.       }
  200.     })
  201.   },
  202.   onFocus() {
  203.     this.setData({
  204.       isClickImg: false
  205.     })
  206.   },
  207.   onBlur(e) {
  208.     //console.log(this.data.isClickImg)
  209.     //防止上传的图片直接失焦 保存内容的问题    
  210.     if (!this.data.isClickImg) {
  211.       //console.log(e.detail.html)
  212.       this.setData({
  213.         editData: e.detail.html
  214.       })
  215.     }
  216.     //this.oneEditor.blur()
  217.   },
  218.   /*富文本编辑器-end*/
  219.   
  220. })
  1. /*富文本编辑器-start*/
  2. .container {
  3.   position: fixed; 
  4.   top: 0; 
  5.   right: 0;
  6.   bottom: 0;
  7.   left: 0; 
  8.   z-index: 999;  
  9.   display: flex;
  10.   flex-direction: column;
  11.   background: #fff;
  12. }
  13. .ql-container {
  14.   flex: 1;
  15.   padding: 10px 10px 50px 10px;
  16.   box-sizing: border-box;
  17.   font-size: 16px;
  18.   line-height: 1.5;
  19. }
  20.  
  21. .ql-active {
  22.   color: #22C704;
  23. }
  24.  
  25. .iconfont {
  26.   display: inline-block;
  27.   width: 30px;
  28.   height: 30px;
  29.   cursor: pointer;
  30.   font-size: 20px;
  31. }
  32.  
  33. .toolbar {
  34.   position: fixed;
  35.   left: 0;
  36.   right: 100%;
  37.   bottom: 0;
  38.   padding: 0 10px;
  39.   display: flex;
  40.   align-items: center;
  41.   justify-content: space-between;
  42.   width: 100%;
  43.   height: 50px;  
  44.   box-sizing: border-box;    
  45.   background: #fff;
  46.   border-top: 1rpx solid #f2f2f2;
  47. }
  48. .save-box{ margin: 10rpx 10rpx 0 0; display: flex; justify-content: flex-end;}
  49. .save-box .v1,.save-box .v2{ font-size: 28rpx; width: 100rpx; height: 60rpx; text-align: center; line-height: 60rpx; border-radius: 12rpx;}
  50. .save-box .v1{ margin-right: 10rpx; background: #ddd; color: #fff;}
  51. .save-box .v2{ background: #ffb81c; color: #fff;}
  52. .rich-text-box{ margin-bottom: 20rpx;}
  53. /*富文本编辑器-end*/

记录一下使用方法 也可以参考一下怎么使用

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读