@tencentcloud/ai-desk-customer-vue 0.1.0

package/components/common/RichText/plugins/audio/uni-app/audio.vue

@@ -0,0 +1,269 @@
+<template>
+	<view v-if="controls" @click="onClick" class="_contain">
+    <!-- 海报和按钮 -->
+		<view class="_poster" :style="'background-image:url('+poster+')'">
+			<view class="_button" @tap="_buttonTap">
+				<view :class="playing?'_pause':'_play'" />
+			</view>
+		</view>
+    <!-- 曲名和作者 -->
+		<view class="_title">
+			<view class="_name">{{name||'未知音频'}}</view>
+			<view class="_author">{{author||'未知作者'}}</view>
+		</view>
+    <!-- 进度条 -->
+    <slider class="_slider" activeColor="#585959" block-size="12" handle-size="12" :disabled="error" :value="value" @changing="_seeking" @change="_seeked" />
+    <!--播放时间-->
+		<view class="_time">{{time||'00:00'}}</view>
+	</view>
+</template>
+
+<script>
+/**
+ * @fileoverview audio 组件
+ */
+import context from './context'
+export default {
+  data () {
+    return {
+      error: false,
+      playing: false,
+      time: '00:00',
+      value: 0
+    }
+  },
+  props: {
+    aid: String,
+    name: String, // 音乐名
+    author: String, // 作者
+    poster: String, // 海报图片地址
+    autoplay: [Boolean, String], // 是否自动播放
+    controls: [Boolean, String], // 是否显示控件
+    loop: [Boolean, String], // 是否循环播放
+    src: String // 源地址
+  },
+  watch: {
+    src (src) {
+      this.setSrc(src)
+    }
+  },
+  mounted () {
+    this._ctx = uni.createInnerAudioContext()
+    this._ctx.onError((err) => {
+      this.error = true
+      this.$emit('error', err)
+    })
+    this._ctx.onTimeUpdate(() => {
+      const time = this._ctx.currentTime
+      const min = parseInt(time / 60)
+      const sec = Math.ceil(time % 60)
+      this.time = (min > 9 ? min : '0' + min) + ':' + (sec > 9 ? sec : '0' + sec)
+      if (!this.lastTime) {
+        this.value = time / this._ctx.duration * 100 // 不在拖动状态下
+      }
+    })
+    this._ctx.onEnded(() => {
+      if (!this.loop) {
+        this.playing = false
+      }
+    })
+    context.set(this.aid, this)
+    this.setSrc(this.src)
+  },
+  beforeDestroy () {
+    this._ctx.destroy()
+    context.remove(this.aid)
+  },
+  onPageShow () {
+    if (this.playing && this._ctx.paused) {
+      this._ctx.play()
+    }
+  },
+  methods: {
+    // 设置源
+    setSrc (src) {
+      this._ctx.autoplay = this.autoplay
+      this._ctx.loop = this.loop
+      this._ctx.src = src
+      if (this.autoplay && !this.playing) {
+        this.playing = true
+      }
+    },
+    // 播放
+    play () {
+      this._ctx.play()
+      this.playing = true
+      this.$emit('play', {
+        target: {
+          id: this.aid
+        }
+      })
+    },
+    // 暂停
+    pause () {
+      this._ctx.pause()
+      this.playing = false
+      this.$emit('pause')
+    },
+    // 设置播放速率
+    playbackRate (rate) {
+      this._ctx.playbackRate = rate
+    },
+    // 移动进度条
+    seek (sec) {
+      this._ctx.seek(sec)
+    },
+    // 内部方法
+    _buttonTap () {
+      if (this.playing) this.pause()
+      else this.play()
+    },
+    _seeking (e) {
+      // 避免过于频繁 setData
+      if (e.timeStamp - this.lastTime < 200) return
+      const time = Math.round(e.detail.value / 100 * this._ctx.duration)
+      const min = parseInt(time / 60)
+      const sec = time % 60
+      this.time = (min > 9 ? min : '0' + min) + ':' + (sec > 9 ? sec : '0' + sec)
+      this.lastTime = e.timeStamp
+    },
+    _seeked (e) {
+      this.seek(e.detail.value / 100 * this._ctx.duration)
+      this.lastTime = undefined
+    },
+    onClick(e) {
+      this.$emit('onClick', e)
+    }
+  }
+}
+</script>
+
+<style>
+/* 顶层容器 */
+._contain {
+  position: relative;
+  display: inline-flex;
+  width: 290px;
+  background-color: #fcfcfc;
+  border: 1px solid #e0e0e0;
+  border-radius: 2px;
+}
+
+/* 播放、暂停按钮 */
+._button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  overflow: hidden;
+  background-color: rgb(0, 0, 0, 0.2);
+  border: 1px solid white;
+  border-radius: 50%;
+  opacity: 0.9;
+}
+
+._play {
+  margin-left: 2px;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 8px solid white;
+}
+
+._pause {
+  width: 8px;
+  height: 8px;
+  background-color: white;
+}
+
+/* 海报 */
+._poster {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 70px;
+  height: 70px;
+  background-color: #e6e6e6;
+  background-size: contain;
+}
+
+/* 标题栏 */
+._title {
+  flex: 1;
+  margin: 4px 0 0 14px;
+  text-align: left;
+}
+
+._author {
+  width: 45px;
+  font-size: 12px;
+  color: #888;
+}
+
+._name {
+  width: 140px;
+  font-size: 15px;
+  line-height: 39px;
+}
+
+._author,
+._name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 进度条 */
+._slider {
+  position: absolute;
+  right: 16px;
+  bottom: 8px;
+  width: 140px;
+  margin: 0;
+}
+
+/* 播放时间 */
+._time {
+  margin: 7px 14px 0 0;
+  font-size: 12px;
+  color: #888;
+}
+
+/* 响应式布局，大屏幕用更大的尺寸 */
+@media (min-width: 400px) {
+  ._contain {
+    width: 380px;
+  }
+
+  ._button {
+    width: 26px;
+    height: 26px;
+  }
+
+  ._poster {
+    width: 90px;
+    height: 90px;
+  }
+
+  ._author {
+    width: 60px;
+    font-size: 15px;
+  }
+
+  ._name {
+    width: 180px;
+    font-size: 19px;
+    line-height: 55px;
+  }
+
+  ._slider {
+    right: 20px;
+    bottom: 10px;
+    width: 180px;
+  }
+
+  ._time {
+    font-size: 15px;
+  }
+}
+</style>

package/components/common/RichText/plugins/audio/uni-app/build.js

@@ -0,0 +1,3 @@
+module.exports = {
+  template: '<my-audio v-if="n.name==\'audio\'" :class="n.attrs.class" :style="n.attrs.style" :aid="n.attrs.id" :author="n.attrs.author" :controls="n.attrs.controls" :autoplay="n.attrs.autoplay" :loop="n.attrs.loop" :name="n.attrs.name" :poster="n.attrs.poster" :src="n.src[ctrl[i]||0]" :data-i="i" data-source="audio" @play="play" @error="mediaError" />'
+}

package/components/common/RichText/plugins/card/README.md

@@ -0,0 +1,30 @@
+# card
+功能：商品（联络人）信息卡  
+大小：*≈7KB*  
+支持平台：  
+
+| 微信小程序 | QQ 小程序 | 百度小程序 | 支付宝小程序 | 头条小程序 | uni-app |
+|:---:|:---:|:---:|:---:|:---:|:---:|
+| √ | √ | √ | √ | √ | √(nvue 不支持) |
+
+### 效果图  
+![效果图](../../docs/assets/plugin/card.png)
+
+### 参数列表  
+|参数名|是否必须|类型|说明|
+|:---- |:---|:----- |----- |
+|src|是|String|图片Url|
+|title|是|String|标题|
+|desc|是|String|描述|
+|url|是|String|跳转url|
+|color|是|String|文字颜色|
+|bgcolor|是|String|卡片背景颜色|
+|border|是|String|卡片边框颜色|
+
+### 说明：  
+1. 可以显示商品信息卡片/联络人信息卡片  
+
+### 基础库要求：    
+满足最低要求即可  
+
+?> 如果希望页面上使用本组件，组件的路径为 *path/to/mp-html/card/card*  

package/components/common/RichText/plugins/card/build.js

@@ -0,0 +1,14 @@
+module.exports = {
+  usingComponents: {
+    'my-card': '../card/card'
+  },
+  handler (file) {
+    if (file.isBuffer()) {
+      let content = file.contents.toString()
+      if (file.path.includes('parser.js')) {
+        content = content.replace(/trustTags\s*:\s*makeMap\('/, "trustTags: makeMap('card,").replace(/voidTags\s*:\s*makeMap\('/, "voidTags: makeMap('card,")
+      }
+      file.contents = Buffer.from(content)
+    }
+  }
+}

package/components/common/RichText/plugins/card/index.js

@@ -0,0 +1,7 @@
+/**
+ * @fileoverview Card 插件
+ */
+function Card (vm) {
+}
+
+module.exports = Card

package/components/common/RichText/plugins/card/miniprogram/build.js

@@ -0,0 +1,3 @@
+module.exports = {
+  template: '<my-card wx:if="{{n.name==\'card\'}}" class="{{n.attrs.class}}" style="{{n.attrs.style}}" mode="{{opts[5]}}" src="{{n.attrs.src}}" title="{{n.attrs.title}}" desc="{{n.attrs.desc}}" url="{{n.attrs.url}}" color="{{n.attrs.color}}" bgcolor="{{n.attrs.bgcolor}}" border="{{n.attrs.border}}" name="{{n.attrs.name}}" data-i="{{i}}" data-source="card" />'
+}

package/components/common/RichText/plugins/card/miniprogram/card.js

@@ -0,0 +1,26 @@
+/**
+ * @fileoverview card 组件
+ */
+Component({
+  properties: {
+    mode: {
+      type: Boolean,
+      default: false
+    },
+    src: String,
+    title: String,
+    desc: String,
+    url: String,
+    color: String,
+    bgcolor: String,
+    border: String
+  },
+  data: {},
+  methods: {
+    onClick (e) {
+      if (this.properties.url && this.properties.url.trim().length > 6 && !this.properties.mode) {
+        wx.navigateTo({ url: this.properties.url })
+      }
+    }
+  }
+})

package/components/common/RichText/plugins/card/miniprogram/card.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/components/common/RichText/plugins/card/miniprogram/card.wxml

@@ -0,0 +1,9 @@
+<view class="card" bindtap="onClick" style="background-color:{{bgcolor||'#a4d0ff'}};border:{{border||'1px solid #FFF'}};color:{{color||'#000'}}">
+    <image class="card-img" mode="aspectFill" src="{{src}}" />
+    <view class="text-wrap text-wrap-width" wx:if="{{!!desc}}">
+        <view class="title one-t">{{title}}</view>
+        <view class="desc one-t">{{desc}}</view>
+    </view>
+    <view wx:else class="text-wrap-width title more-t">{{title}}</view>
+    <image class="card-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAABCFBMVEUAAAC/v7+qqqqZmZmLi6KJnZ2ImZmHlpaGlKGMjJmSkp6Li5eQkJuKlZ+Pj5mOjpeJkpuNjZ6IkJmHj5eLi5uKkpmGjZqJj5uLi5eIjpmIjZiKj5qKj5mJjpiHjJqJjZaGj5iKj5eIjJmKjpqHi5eGjZeIi5eHjZiIi5eHjJiIjpaHjJeIjZiGjJeIjZiGjJaGjJeIi5aGjJeHi5eHi5aHjJeHjJaHjJeGi5eHjJaHjJeGi5aGi5aHjJeHjJaGjJeGjJeHjJaHi5eGi5eHjJaHjJeGjJaGjJeHi5aHjJeHjJeHi5aGjJeHi5aGjJaHi5eGjJaHi5eHjJaGi5eGi5aHjJeGi5aGi5apAvjmAAAAV3RSTlMABAYKCw0PERMUFRYXGBkbHB0eICEjJiksLS8wMjQ1ODk7PD9ATFZXWFlaW1xdXl+Hi6msu7/Dx8vMzs/R0tTV19na3N3f4uTn6evs7e7v8PHy9PX7/P18cCTXAAABEklEQVRo3u2YWU5CQRQFn4qCM4LzhIoDAorzrIgCigiCimf/O/Gj3UIlmJxaQFXSea/T90aRMcYYY4zpG0ZPu9cZMnAi6SsLBjqS9LnJBcqSpC53Sjs/kqSPNaxwGAqtFbrQXKILjQW68DpPF17m6EI9TRdqM3TheZouVCbpQnkcK5RC4T5BF27jdOFqhC5cDtOFixhdOB+iC2cDdOEoggttLrDbk6QW5/+WJB1T/r1e+FAHWT/2q/35scsiF/w3cdZ/R13Y+8H/MMb6Hycgfz74n6ZYfzXJ+mspyF8I/vos68cep0X4eV2EB4SD4H9bZP3vy+yTtL3KjrGddXgQ34BXCVvwMmT7P69zjDHGGGP6gF83lHISOctsKQAAAABJRU5ErkJggg=="></image>
+</view>

package/components/common/RichText/plugins/card/miniprogram/card.wxss

@@ -0,0 +1,55 @@
+.one-t {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: all linear 0.2s;
+}
+.more-t {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  transition: all linear 0.2s;
+}
+.card {
+  width: 80%;
+  margin: 10rpx auto;
+  max-width: 700rpx;
+  max-height: 140rpx;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx 0 20rpx 10rpx;
+  border-radius: 12rpx;
+}
+.card-img {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 12rpx;
+  flex: 0 0 96rpx;
+}
+.card-icon {
+  width: 30rpx;
+  height: 96rpx;
+}
+.card .text-wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.card .text-wrap-width {
+  width: 72%;
+}
+.card .title {
+  font-weight: bold;
+  font-size: 34rpx;
+  line-height: 48rpx;
+}
+.card .desc {
+  font-size: 27rpx;
+  line-height: 37rpx;
+}

package/components/common/RichText/plugins/card/uni-app/build.js

@@ -0,0 +1,3 @@
+module.exports = {
+  template: '<my-card v-if="n.name==\'card\'" :class="n.attrs.class" :style="n.attrs.style" :mode="opts[5]" :src="n.attrs.src" :title="n.attrs.title" :desc="n.attrs.desc" :url="n.attrs.url" :color="n.attrs.color" :bgcolor="n.attrs.bgcolor" :border="n.attrs.border" :name="n.attrs.name" :data-i="i" data-source="card" />'
+}

package/components/common/RichText/plugins/card/uni-app/card.vue

@@ -0,0 +1,122 @@
+<template>
+    <view class="card" @click="onClick" :style="[customStyle]" :data-i="$attrs['data-i']">
+        <image class="card-img" mode="aspectFill" :src="src" />
+        <view class="text-wrap text-wrap-width" v-if="!!desc">
+            <view class="title one-t">{{title}}</view>
+            <view class="desc one-t">{{desc}}</view>
+        </view>
+        <view v-else class="text-wrap-width title more-t">{{title}}</view>
+        <image class="card-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAABCFBMVEUAAAC/v7+qqqqZmZmLi6KJnZ2ImZmHlpaGlKGMjJmSkp6Li5eQkJuKlZ+Pj5mOjpeJkpuNjZ6IkJmHj5eLi5uKkpmGjZqJj5uLi5eIjpmIjZiKj5qKj5mJjpiHjJqJjZaGj5iKj5eIjJmKjpqHi5eGjZeIi5eHjZiIi5eHjJiIjpaHjJeIjZiGjJeIjZiGjJaGjJeIi5aGjJeHi5eHi5aHjJeHjJaHjJeGi5eHjJaHjJeGi5aGi5aHjJeHjJaGjJeGjJeHjJaHi5eGi5eHjJaHjJeGjJaGjJeHi5aHjJeHjJeHi5aGjJeHi5aGjJaHi5eGjJaHi5eHjJaGi5eGi5aHjJeGi5aGi5apAvjmAAAAV3RSTlMABAYKCw0PERMUFRYXGBkbHB0eICEjJiksLS8wMjQ1ODk7PD9ATFZXWFlaW1xdXl+Hi6msu7/Dx8vMzs/R0tTV19na3N3f4uTn6evs7e7v8PHy9PX7/P18cCTXAAABEklEQVRo3u2YWU5CQRQFn4qCM4LzhIoDAorzrIgCigiCimf/O/Gj3UIlmJxaQFXSea/T90aRMcYYY4zpG0ZPu9cZMnAi6SsLBjqS9LnJBcqSpC53Sjs/kqSPNaxwGAqtFbrQXKILjQW68DpPF17m6EI9TRdqM3TheZouVCbpQnkcK5RC4T5BF27jdOFqhC5cDtOFixhdOB+iC2cDdOEoggttLrDbk6QW5/+WJB1T/r1e+FAHWT/2q/35scsiF/w3cdZ/R13Y+8H/MMb6Hycgfz74n6ZYfzXJ+mspyF8I/vos68cep0X4eV2EB4SD4H9bZP3vy+yTtL3KjrGddXgQ34BXCVvwMmT7P69zjDHGGGP6gF83lHISOctsKQAAAABJRU5ErkJggg=="></image>
+    </view>
+</template>
+
+<script>
+    export default {
+        props: {
+            mode: {
+                type: Boolean,
+                default: false
+            },
+            src: String,
+            title: String,
+            desc: String,
+            url: String,
+            color: String,
+            bgcolor: String,
+            border: String
+        },
+        data () {
+            return {
+                
+            }
+        },
+        computed: {
+            customStyle () {
+                return {
+                    'background-color': this.bgColor || '#a4d0ff',
+                    border: this.border || '1px solid #FFF',
+                    color: this.color || '#000'
+                } 
+            }
+        },
+        methods: {
+            onClick (e) {
+              if (this.url && this.url.trim().length > 6 && !this.mode) {
+                  uni.navigateTo({ url: this.url })
+              }
+              this.$emit('click', e)
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .one-t {
+    	overflow: hidden;
+    	white-space: nowrap;
+    	text-overflow: ellipsis;
+    	transition: all linear 0.2s;
+    }
+    
+    .more-t {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break:break-all;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        transition: all linear 0.2s;
+    }
+    
+    .card {
+        
+        width: 80%;
+        margin: 10rpx auto;
+        max-width: 700rpx;
+        max-height: 140rpx;
+        
+        box-sizing: border-box;
+        overflow: hidden;
+        
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        
+        padding: 20rpx 0 20rpx 10rpx;
+        border-radius: 12rpx;
+        
+        &-img {
+            width: 96rpx;
+            height: 96rpx;
+            border-radius: 12rpx;
+            flex: 0 0 96rpx;
+        }
+        
+        &-icon {
+            width: 30rpx;
+            height: 96rpx;
+        }
+        
+        .text-wrap {
+            
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            
+            &-width {
+                width: 72%;
+            }
+        }
+        
+        .title {
+            font-weight: bold;
+            font-size: 34rpx;
+            line-height: 48rpx;
+        }
+        
+        .desc {
+            font-size: 27rpx;
+            line-height: 37rpx;
+        }
+    }
+</style>

package/components/common/RichText/plugins/editable/README.md

@@ -0,0 +1,137 @@
+# 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* 事件触发，直接获取内容可能导致无法获取当前编辑的文本内容，因此建议设置一个小的延时后获取（可参考下方示例，[详细](https://github.com/jin-yufeng/mp-html/issues/368)）  
+
+示例：  
+```javascript
+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)
+  }
+})
+```
+
+**示例项目**：  
+微信小程序点击 [代码片段](https://developers.weixin.qq.com/s/GFbJKum77eBy) 即可在微信开发者工具中导入；*uni-app* 下载 [示例项目](https://mp-html.oss-cn-hangzhou.aliyuncs.com/editable.zip) 在 *HBuilder X* 中打开即可体验；注意示例项目中不一定包含最新版本，仅供参考使用方法  
+
+注意事项：  
+1. 不要在 *editable* 属性被设置为 *true* 前通过 *setContent* 方法（用 *content* 属性）设置内容，否则在切换为 *true* 后会变成空白  
+2. *editable* 属性为 *true* 时不支持在 *scroll-view* 中使用，否则提示框的位置可能不正确