HIHtmlAndAttributeTest

demo仅仅是为了方便初次学习编辑含有图片资源富文本，HTML超文本与富文本相互转换的人

demo知识点内容包括

1. 添加图片到富文本
2. 从富文本删除图片
3. 将富文本转换为带有图片标志符到纯文本
4. 将带有图片标志符的纯文本转换为富文本
5. 将HTML超文本转换为富文本
6. 将富文本转化为HTML超文本
7. 模拟如何将含有图片的内容上传到服务器
8. 模拟从服务器获取文本与图片资源分离的内容，合并展示

demo提供了富文本与服务端的传输的解决方案，其解决方案如下

在富文本编辑的提交方

• 前端在编辑富文本时，实时监听记录图片资源，为图片资源传输到资源服务器做准备
• 前端编辑完富文本后，将记录的图片资源上传到资源服务器，并按顺序存储好图片资源的url，以便展示无误
• 将所有的富文本中的图片资源都替换为与后端约定好的图片标识符，如demo中模拟约定好的[图片]标志，变成纯文本
• 将包含图片标识符的纯文本及图片资源的url同时上传到应用服务器，由服务器记录保存。

在获取富文本的展示方

• 从应用服务器获取包含图片标识符的纯文本，以及图片资源的url
• 将所有的图片资源都缓存到本地
• 将纯文本中的图片标识符[图片]按顺序替换为图片，转化为富文本

注意：若图片在富文本中需要按特定的frame展示，则需要知道图片的size，便于做适配，此处提供两套解决方案

1. 在上传的时候，将图片的宽高比或者图片的宽高上传到应用服务器
   1. 将宽高或宽高比添加进图片名中
   2. 将宽高或宽高比添加进传输数据结构中
2. 将图片进行缓存后，再通过获取图片的size在进行布局