小程序 富文本编辑器editor
2019-07-30 本文已影响0人
nCov
富文本编辑editor,真的不错可以实现图文混排,目前支持上不是很好,这里就围绕图片沉余处理的方案
方案1 用户选择图片时即执行上传图片
优点:编辑里可回显上传的图片路径;
缺点如用户编辑时有删除图片操作,我个人认为应该删除对应已上传图片避免多余图片占用空间
BUG:但是此时我没有找到用户删除对应的Api
EditorContext.

方案2 用户提交的时候再上传图片
为了避免多余图片占用空间,用户在编辑器里任何操作图片都不管,只需在提交的时候再上传图片(图片数量可控,避免上传太多会失败)
BUG:但是在真机预览的时候发现选择图片的临时路径是wxfile:// 且编辑不支持显示
在开发者工具选择图片临时路径是htto://开头,能显示图片
方案3 依然用户选择图片时即执行上传图片
既然方案1和方案2走不通,我又想到此方法,依然用户选择图片即上传图片,把图片上传服务器临时文件里(temp),将用户最后编辑使用的图片移动到另一个使用文件里,temp里所有的图片我们就可以删除,不占用空间,可是我使用的用开开发,如你是有自己服务器且能移动文件操作可以使用这个方案
*云存储:不支持移动文件
storage.

方案4 继续用户选择图片时即执行上传图片
其实我最喜欢方案2,但是真机不显示临时路径没办法,此方法有点啰嗦,
思路:
1.选择图片后即上传图片(依然是上传图片到temp目录)
2.用户上传同时记录下 [本地图片临时路径,云路径]
3.在返回的html找出当前图片云路径并封装成数组(云图片数组)
4.[云图片数组]->[本地图片临时路径,云路径] 对应 云路径 与 本地图片临时路径
5.在用[本地图片临时路径]上传 你要上传的路径
但是目前editor 不支持云图片显示