微信小程序富文本编辑器的纯原生实现(一)

先上图
微信小程序富文本编辑器的纯原生实现(一)_第1张图片
微信小程序富文本编辑器的纯原生实现(一)_第2张图片
主要实现以下功能:

**1. 富文本编辑,图文混排

  • 图片添加原则上可以无限,demo做了限制,最多四张
  • 删除图片,图片上下文字合并**

先分析原理,小程序中需要的并不是复杂的图文编辑器,来编辑负责的文字样式,只需要实现图文混排的编辑和展示即可,所以结构如下图:
微信小程序富文本编辑器的纯原生实现(一)_第3张图片

  • 黑色的最外框代表编辑区域
  • 黑色的小格子代表文本区域
  • 红色格子代表图片
  • 右边是对左边进行的一个合并,根据规律,每个图片下面都会跟着一个文本编辑区域(当没有文字时为不可见),所以文本编辑器变成了最上面一个文本编辑框,后面动态的跟着图文组合。

这就是整个的结构,下面来进行实现:
richtest.xwml