devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

小程序富文本编辑器组件

作者：我家小花儿 | 2024-08-13 11:45:36

赞

踩

小程序富文本编辑器组件

 效果图只是功能的一部分

话不多说，先上代码

html部分：

  1. <page-container show="{{showPage}}" z-index="9999999" round="{{round}}" overlay="{{overlay}}" duration="{{duration}}" position="{{position}}" close-on-slide-down="{{false}}" bindbeforeenter="onBeforeEnter" bindenter="onEnter" bindafterenter="onAfterEnter" bindbeforeleave="onBeforeLeave" bindleave="onLeave" bindafterleave="onAfterLeave" bindclickoverlay="onClickOverlay" custom-style="{{customStyle}}" overlay-style="{{overlayStyle}}">
  2.  
  3.  
  4.     <view class="detail-page">
  5.         <mp-navigation-bar back="{{false}}" title="文本编辑" ext-class="navigation" background="{{background}}">
  6.             <view slot="left">
  7.                 <view bindtap="exit" style="width: 100rpx;height:60rpx;display: flex;justify-content: left;align-items: center;">
  8.                     <van-icon name="arrow-left'" color="#333" size="40rpx" />
  9.                 </view>
  10.             </view>
  11.  
  12.         </mp-navigation-bar>
  13.         <view class="editor_toolbox">
  14.             <i class="iconfont icon-undo" data-method="undo" bindtap="edit" />
  15.             <i class="iconfont icon-redo" data-method="redo" bindtap="edit" />
  16.             <i class="iconfont icon-img" data-method="insertImg" bindtap="edit" />
  17.             <i class="iconfont icon-video" data-method="insertVideo" bindtap="edit" />
  18.             <i class="iconfont icon-link" data-method="insertLink" bindtap="edit" />
  19.             <i class="iconfont icon-text" data-method="insertText" bindtap="edit" />
  20.             <!-- <i class="iconfont icon-text" data-method="insertTable" bindtap="edit" /> -->
  21.             <i class="iconfont icon-clear" bindtap="clear" />
  22.             <i class="iconfont icon-save" bindtap="save" />
  23.         </view>
  24.  
  25.         <view>
  26.             <mp-html id="article" container-style="padding:20px" tag-style="{{tagStyle}}" content="{{html}}" domain="https://mp-html.oss-cn-hangzhou.aliyuncs.com" editable="{{editable}}" bindremove="remove"></mp-html>
  27.         </view>
  28.  
  29.         <block wx:if="{{modal}}">
  30.             <view class="mask" />
  31.             <view class="modal">
  32.                 <view class="modal_title">{{modal.title}}</view>
  33.                 <input class="modal_input" value="{{modal.value}}" maxlength="-1" auto-focus bindinput="modalInput" />
  34.                 <view class="modal_foot">
  35.                     <view class="modal_button" bindtap="modalCancel">取消</view>
  36.                     <view class="modal_button" style="color:#576b95;border-left:1px solid rgba(0,0,0,.1)" bindtap="modalConfirm">确定</view>
  37.                 </view>
  38.             </view>
  39.         </block>
  40.     </view>
  41.  
  42.     <van-dialog use-slot title="插入表格" show="{{ show }}" show-cancel-button bind:close="onClose" bind:confirm="getUserInfo">
  43.  
  44.         <view style="display: flex;justify-content: center;flex-direction: column;align-items: center;">
  45.             <view class="between" style="margin-top: 24rpx;">
  46.                 行：{{ row }}
  47.                 <van-stepper model:value="{{ row }}" mark:type="row" bind:change="onChange" />
  48.             </view>
  49.             <view class="between" style="margin-top: 24rpx;">
  50.                 列：{{ column }}
  51.                 <van-stepper model:value="{{ column }}" mark:type="column" bind:change="onChange" />
  52.             </view>
  53.         </view>
  54.     </van-dialog>
  55. </page-container>

css部分

  1. .editor_toolbox {
  2.   background-color: #ededed;
  3.   display: flex;
  4.   padding: 5px;
  5.   box-sizing: border-box;
  6.   line-height: 1.6;
  7. }
  8.  
  9. .detail-page {
  10.   width: 100%;
  11.   height: 100%;
  12.   position: fixed;
  13.   z-index: 999999999999;
  14. }
  15.  
  16. @font-face {
  17.   font-family: "iconfont";
  18.   src: url("data:application/x-font-woff2;charset=utf-8;base64,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")
  19.     format("woff2");
  20. }
  21.  
  22. .iconfont {
  23.   flex: 1;
  24.   text-align: center;
  25.   font-family: "iconfont" !important;
  26.   font-size: 22px;
  27.   font-style: normal;
  28.   -webkit-font-smoothing: antialiased;
  29.   -moz-osx-font-smoothing: grayscale;
  30. }
  31.  
  32. .icon-undo:before {
  33.   content: "\e607";
  34. }
  35.  
  36. .icon-redo:before {
  37.   content: "\e606";
  38. }
  39.  
  40. .icon-img:before {
  41.   content: "\e6e2";
  42. }
  43.  
  44. .icon-video:before {
  45.   content: "\e798";
  46. }
  47.  
  48. .icon-link:before {
  49.   content: "\e60d";
  50. }
  51.  
  52. .icon-text:before {
  53.   content: "\e6ce";
  54. }
  55.  
  56. .icon-clear:before {
  57.   content: "\e637";
  58. }
  59.  
  60. .icon-save:before {
  61.   content: "\e501";
  62. }
  63.  
  64. /* 模态框 */
  65. .modal {
  66.   position: fixed;
  67.   top: 50%;
  68.   left: 16px;
  69.   right: 16px;
  70.   background-color: #fff;
  71.   border-radius: 12px;
  72.   transform: translateY(-50%);
  73. }
  74.  
  75. .modal_title {
  76.   padding: 32px 24px 16px;
  77.   font-size: 17px;
  78.   font-weight: 700;
  79.   text-align: center;
  80. }
  81.  
  82. .modal_input {
  83.   display: block;
  84.   padding: 5px;
  85.   margin: 0 24px 32px 24px;
  86.   font-size: 14px;
  87.   border: 1px solid #dfe2e5;
  88. }
  89.  
  90. .modal_foot {
  91.   display: flex;
  92.   line-height: 56px;
  93.   font-weight: 700;
  94.   border-top: 1px solid rgba(0, 0, 0, 0.1);
  95. }
  96.  
  97. .modal_button {
  98.   flex: 1;
  99.   text-align: center;
  100. }
  101.  
  102. /* 蒙版 */
  103. .mask {
  104.   position: fixed;
  105.   top: 0;
  106.   right: 0;
  107.   bottom: 0;
  108.   left: 0;
  109.   background-color: black;
  110.   opacity: 0.5;
  111. }

js 部分

  1. const content = require('./content')
  2. const Shop = require("../../libs/api/shop");
  3. // 上传图片方法
  4. function upload(src, type) {
  5.     return new Promise((resolve, reject) => {
  6.         console.log('上传', type === 'img' ? '图片' : '视频', '：', src)
  7.  
  8.         // 实际使用时，上传到服务器
  9.         wx.uploadFile({
  10.             url: 'https://zlhb.wifimsl.cn/group/upload/image', // 接口地址
  11.             filePath: src,
  12.             name: 'image',
  13.             success(res) {
  14.                 const { data } = JSON.parse(res.data)
  15.                 resolve(data) // 返回线上地址
  16.             },
  17.             fail: reject
  18.         })
  19.  
  20.     })
  21. }
  22. // 删除图片方法
  23. function remove(src) {
  24.     console.log('删除图片：', src)
  25.     // 实际使用时，删除线上资源
  26. }
  27. Component({
  28.     /**
  29.  * 组件的属性列表
  30.  */
  31.     properties: {
  32.         title: String,
  33.         showPage: {
  34.             type: Boolean,
  35.             value: false,
  36.         },
  37.         html: {
  38.             type: String,
  39.             value: "",
  40.         },
  41.         naigation: {
  42.             type: String,
  43.             value: "文本编辑",
  44.         },
  45.     },
  46.     data: {
  47.         duration: 300,
  48.         position: 'right',
  49.         round: false,
  50.         overlay: true,
  51.         customStyle: '',
  52.         overlayStyle: '',
  53.         show: false,
  54.         tagStyle: { img: 'width:100% !important;' },
  55.  
  56.         html: '',
  57.         content,
  58.         editable: true,
  59.         column: 1,
  60.         row: 1,
  61.     },
  62.     ready() {
  63.  
  64.         this.ctx = this.selectComponent('#article')
  65.         /**
  66.          * @description 设置获取链接的方法
  67.          * @param {String} type 链接的类型（img/video/audio/link）
  68.          * @param {String} value 修改链接时，这里会传入旧值
  69.          * @returns {Promise} 返回线上地址（2.2.0 版本起设置了 domain 属性时，可以缺省主域名）
  70.          *   type 为 audio/video 时，可以返回一个源地址数组
  71.          *   2.1.3 版本起 type 为 audio 时，可以返回一个 object，包含 src、name、author、poster 等字段
  72.          *   2.2.0 版本起 type 为 img 时，可以返回一个源地址数组，表示插入多张图片（修改链接时仅限一张）
  73.          */
  74.         this.ctx.getSrc = (type, value) => {
  75.             return new Promise((resolve, reject) => {
  76.                 if (type === 'img' || type === 'video') {
  77.                     wx.showActionSheet({
  78.                         itemList: ['本地选取', '远程链接'],
  79.                         success: res => {
  80.                             if (res.tapIndex == 0) {
  81.                                 // 本地选取
  82.                                 if (type === 'img') {
  83.                                     wx.chooseImage({
  84.                                         count: value === undefined ? 9 : 1, // 2.2.0 版本起插入图片时支持多张（修改图片链接时仅限一张）
  85.                                         success: res => {
  86.                                             if (res.tempFilePaths.length == 1 && wx.editImage) {
  87.                                                 // 单张图片时进行编辑
  88.                                                 wx.editImage({
  89.                                                     src: res.tempFilePaths[0],
  90.                                                     complete: res2 => {
  91.                                                         wx.showLoading({
  92.                                                             title: '上传中'
  93.                                                         })
  94.                                                         upload(res2.tempFilePath || res.tempFilePaths[0], type).then(res => {
  95.                                                             wx.hideLoading()
  96.                                                             resolve(res)
  97.                                                         })
  98.                                                     }
  99.                                                 })
  100.                                             } else {
  101.                                                 // 否则批量上传
  102.                                                 wx.showLoading({
  103.                                                     title: '上传中'
  104.                                                 });
  105.                                                 (async () => {
  106.                                                     const arr = []
  107.                                                     for (let item of res.tempFilePaths) {
  108.                                                         // 依次上传
  109.                                                         const src = await upload(item, type)
  110.                                                         arr.push(src)
  111.                                                     }
  112.                                                     return arr
  113.                                                 })().then(res => {
  114.                                                     wx.hideLoading()
  115.                                                     resolve(res)
  116.                                                 })
  117.                                             }
  118.                                         },
  119.                                         fail: reject
  120.                                     })
  121.                                 } else {
  122.                                     wx.chooseVideo({
  123.                                         success: res => {
  124.                                             wx.showLoading({
  125.                                                 title: '上传中'
  126.                                             })
  127.                                             upload(res.tempFilePath, type).then(res => {
  128.                                                 wx.hideLoading()
  129.                                                 resolve(res)
  130.                                             })
  131.                                         },
  132.                                         fail: reject
  133.                                     })
  134.                                 }
  135.                             } else {
  136.                                 // 远程链接
  137.                                 this.callback = {
  138.                                     resolve,
  139.                                     reject
  140.                                 }
  141.                                 this.setData({
  142.                                     modal: {
  143.                                         title: (type === 'img' ? '图片' : '视频') + '链接',
  144.                                         value
  145.                                     }
  146.                                 })
  147.                             }
  148.                         }
  149.                     })
  150.                 } else {
  151.                     this.callback = {
  152.                         resolve,
  153.                         reject
  154.                     }
  155.                     let title
  156.                     if (type === 'audio') {
  157.                         title = '音频链接'
  158.                     } else if (type === 'link') {
  159.                         title = '链接地址'
  160.                     }
  161.                     this.setData({
  162.                         modal: {
  163.                             title,
  164.                             value
  165.                         }
  166.                     })
  167.                 }
  168.             })
  169.         }
  170.  
  171.  
  172.  
  173.     },
  174.     /**
  175.  * 组件的方法列表
  176.  */
  177.     methods: {
  178.         getUserInfo(event) {
  179.             console.log(event);
  180.             const text = 'insertTable'
  181.             const { row, column } = this.data
  182.             this.ctx[text](row, column)
  183.         },
  184.         onChange(e) {
  185.             const { type } = e.mark
  186.             this.setData({
  187.                 [type]: e.detail
  188.             })
  189.         },
  190.  
  191.         onClose() {
  192.             this.setData({ show: false });
  193.         },
  194.         // 删除图片/视频/音频标签事件
  195.         remove(e) {
  196.             // 删除线上资源
  197.             remove(e.detail.src)
  198.         },
  199.         // 处理模态框
  200.         modalInput(e) {
  201.             this.value = e.detail.value
  202.         },
  203.         modalConfirm() {
  204.             this.callback.resolve(this.value || this.data.modal.value || '')
  205.             this.setData({
  206.                 modal: null
  207.             })
  208.         },
  209.         modalCancel() {
  210.             this.callback.reject()
  211.             this.setData({
  212.                 modal: null
  213.             })
  214.         },
  215.         // 调用编辑器接口
  216.         edit(e) {
  217.             const text = e.currentTarget.dataset.method
  218.             if (text == 'insertTable') {
  219.                 this.setData({ show: true });
  220.                 // wx.showModal({
  221.                 //     title: '',
  222.                 //     content: `<view>测试</ view>`,
  223.                 //     complete: (res) => {
  224.                 //         if (res.cancel) {
  225.  
  226.                 //         }
  227.  
  228.                 //         if (res.confirm) {
  229.                 //             this.ctx[text]()
  230.                 //         }
  231.                 //     }
  232.                 // })
  233.  
  234.             } else {
  235.                 this.ctx[text]()
  236.             }
  237.  
  238.             console.log(this.ctx);
  239.         },
  240.         // 清空编辑器内容
  241.         clear() {
  242.             wx.showModal({
  243.                 title: '确认',
  244.                 content: '确定清空内容吗？',
  245.                 success: res => {
  246.                     if (res.confirm)
  247.                         this.ctx.clear()
  248.                 }
  249.             })
  250.         },
  251.         // 保存编辑器内容
  252.         save() {
  253.             const that = this
  254.             // 避免无法获取到正在编辑的文本内容
  255.             setTimeout(() => {
  256.                 var content = this.ctx.getContent()
  257.                 wx.showModal({
  258.                     title: '保存',
  259.                     content,
  260.                     confirmText: '完成',
  261.                     success: res => {
  262.                         if (res.confirm) {
  263.                             // 实际使用时，这里需要上传到服务器
  264.                             this.setData({ html: content, showPage: false })
  265.                             this.triggerEvent('getHtml', this.ctx.getContent())
  266.                             // that.update()
  267.                             // 复制到剪贴板
  268.                             // wx.setClipboardData({
  269.                             //     data: content,
  270.                             // })
  271.                             // 结束编辑
  272.                             // this.setData({
  273.                             //     editable: false
  274.                             // })
  275.                         }
  276.                     }
  277.                 })
  278.             }, 50)
  279.         },
  280.  
  281.         exit() {
  282.             wx.showModal({
  283.                 title: '提示',
  284.                 content: '离开前请保存编辑内容！',
  285.                 complete: (res) => {
  286.                     if (res.cancel) {
  287.  
  288.                     }
  289.  
  290.                     if (res.confirm) {
  291.                         this.setData({ showPage: false })
  292.                     }
  293.                 }
  294.             })
  295.  
  296.  
  297.  
  298.             return
  299.             wx.enableAlertBeforeUnload({ //开启页面退出时的对话框
  300.  
  301.                 message: "离开前请保存编辑内容！",
  302.  
  303.                 success: function (res) {
  304.  
  305.                     // console.log("成功：", res);
  306.  
  307.                     return true
  308.  
  309.                 },
  310.  
  311.                 fail: function (err) {
  312.  
  313.                     // console.log("失败：", err);
  314.  
  315.                     return false
  316.  
  317.                 },
  318.  
  319.             });
  320.  
  321.             // wx.navigateBack()
  322.         },
  323.         back() {
  324.  
  325.         },
  326.  
  327.         goTo(e) {
  328.             wx.navigateTo({ url: `../shareElement/index` })
  329.         },
  330.  
  331.         onBeforeEnter(res) {
  332.  
  333.         },
  334.         onEnter(res) {
  335.  
  336.         },
  337.         onAfterEnter(res) {
  338.  
  339.         },
  340.         onBeforeLeave(res) {
  341.  
  342.         },
  343.         onLeave(res) {
  344.  
  345.         },
  346.         onAfterLeave(res) {
  347.  
  348.         },
  349.  
  350.         onClickOverlay(res) {
  351.  
  352.         }
  353.     },
  354.  
  355. })

json部分

  1. {
  2.     "usingComponents": {
  3.         "mp-html": "/components/mp-html/index",
  4.         "van-stepper": "/components/vant/stepper/index",
  5.         "van-dialog": "/components/vant/dialog/index",
  6.         "van-nav-bar": "/components/vant/nav-bar/index"
  7.     },
  8.     "navigationBarTitleText": "文本编辑",
  9.     "navigationBarBackgroundColor": "#ffffff"
  10. }

以上是组件的所有代码部分，下边是使用

<editor-jj showPage="{{showPage}}" html="{{html}}" bind:getHtml="getHtml"></editor-jj>
  1.     getHtml(e) {
  2.         console.log('测试', e.detail);
  3.         // 这里是编辑后返回的结果
  4.  
  5.  
  6.         //参数介绍
  7.         // showPage 是组件的显示隐藏
  8.         // html 是组件的初始化内容，并不是双向绑定的，仅在初始化的时候使用
  9.     },

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/974710
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号