filesbox/miniprogram/FilesBox/node_modules/mp-html/plugins/editable

editable

功能：富文本编辑
下表列出了本插件与原生 editor 组件的功能差异，可按需选用

组件	优点	缺点
原生 editor	底层通过 contenteditable 实现，编辑流畅	支持标签少（不支持音视频、表格以及 section 等常用标签）、部分小程序平台不支持或低版本不兼容
本插件	支持标签全面、支持平台全面	编辑灵活性不够强

大小：≈17.5KB
支持平台：

微信小程序	QQ 小程序	百度小程序	支付宝小程序	头条小程序	uni-app
√	√	√	√	√	√(nvue 不支持)

说明：
引入本插件后，会给组件添加以下属性：

属性名	类型	默认值	说明
editable	Boolean	false	是否开启内容编辑
placeholder	String	请输入	输入框为空时占位符（2.1.0+）

添加以下事件：

事件名	触发时机	用途
remove（2.2.0+）	删除图片/视频/音频标签时	删除已上传的线上文件

支持以下操作：

类型	操作
文本	修改
图片	更换链接、调整宽度、设置成超链接（2.0.4+）、设置预览图链接、禁用预览、删除
链接	更换链接、删除
音视频	设置封面、设置循环播放、设置自动播放（2.2.0+）、删除
普通标签	设置字体大小、斜体、粗体、下划线（2.0.4+）、居中、缩进、删除

2.2.1 版本起所有标签支持上下移动操作，但仅限同级标签间移动，即在有同级标签且非第一个（或最后一个）时可以上移（或下移）

在支付宝小程序中使用时需要在页面样式中添加 page { position: relative; } 避免 tooltip 错位

菜单项可以通过编辑 plugins/editable/config.js 进行修改，仅可以删减或调整顺序，添加或更名无效

组件实例上提供了以下方法（editable 属性为 true 时才可以调用）：

名称	功能
undo	撤销一个操作
redo	重做一个操作
insertHtml	在光标处插入指定 html 内容（2.1.0+）
insertImg	在光标处插入一张图片
insertTable(rows, cols)	在光标处插入一个 rows 行 cols 列的表格（2.1.3+）
insertVideo	在光标处插入一个视频
insertAudio	在光标处插入一个音频
insertLink	在光标处插入一个链接
insertText	在光标处插入一段文本
clear	清空内容
getContent	获取编辑后的 html 内容

考虑到不同场景下希望获取链接的方法不同，需要在初始时给组件设置一个 getSrc 方法（否则插入图片、音视频、链接或修改链接等操作无法使用），每次组件内需要链接时会调用此方法，开发者可在此方法中自行决定如何获取链接，返回 线上地址 即可（具体用法见下方示例）

编辑完成后，通过 getContent 方法获取编辑后的 html，最后将 editable 属性设置为 false 即可正常渲染

点击保存按钮时，部分平台 tap 事件早于 blur 事件触发，直接获取内容可能导致无法获取当前编辑的文本内容，因此建议设置一个小的延时后获取（可参考下方示例，详细）

示例：

Page({
  onLoad () {
    // ctx 为组件实例，获取方法见上
    /**
     * @description 设置获取链接的方法
     * @param {String} type 链接的类型（img/video/audio/link）
     * @param {String} value 修改链接时，这里会传入旧值
     * @returns {Promise} 返回线上地址（2.2.0 版本起设置了 domain 属性时，可以缺省主域名）
     *   type 为 audio/video 时，可以返回一个源地址数组
     *   2.1.3 版本起 type 为 audio 时，可以返回一个 object，包含 src、name、author、poster 等字段
     *   2.2.0 版本起 type 为 img 时，可以返回一个源地址数组，表示插入多张图片（修改链接时仅限一张）
     */
    this.ctx.getSrc = (type, value) => {
      return new Promise((resolve, reject) => {
        // 以图片为例
        if (type == 'img') {
          wx.chooseImage({
            count: value === undefined ? 9 : 1, // 2.2.0 版本起插入图片时支持多张（修改图片链接时仅限一张）
            success: res => {
              wx.showLoading({
                title: '上传中'
              });
              (async ()=>{
                const arr = []
                for (let item of res.tempFilePaths) {
                  // 依次上传
                  const src = await upload(item)
                  arr.push(src)
                }
                return arr
              })().then(res => {
                wx.hideLoading()
                resolve(res)
              })
            },
            fail: reject
          })
        }
      })
    }
  },
  finishEdit () {
    setTimeout(() => {
      var html = ctx.getContent() // 获取编辑好的 html
      // 上传 html
      wx.request({
        url: 'xxx',
        data: {
          html
        },
        success: () => {
          this.setData({
            editable: false // 结束编辑
          })
        }
      })
    }, 50)
  }
})

示例项目：
微信小程序点击 代码片段 即可在微信开发者工具中导入；uni-app 下载 示例项目 在 HBuilder X 中打开即可体验；注意示例项目中不一定包含最新版本，仅供参考使用方法

注意事项：

1. 不要在 editable 属性被设置为 true 前通过 setContent 方法（用 content 属性）设置内容，否则在切换为 true 后会变成空白
2. editable 属性为 true 时不支持在 scroll-view 中使用，否则提示框的位置可能不正确