手写一个可拖拽排序、增删模块的富文本编辑器

相信前端开发工程师一定有遇到这样的要求，就是能够让用户自行编辑文本、上传图片、段落排序的功能，这个在电脑上操作还说得过去，但是放在移动端上，这样的需求少之又少了，可是偏偏就有这样的产品经理，非要你做一个图文混排的编辑器，放置在微信公众号里，当小编听到这个需求时候，内心有一万只草泥马在奔腾。可是没办法，产品经理说了算。只有硬着头皮开始研究。

先给大家看看效果图

效果图

最开始小编去网上搜索web端可用的富文本编辑器，少的可怜。心灰意冷之际，无意间看到一个叫美篇的app（并不是打广告），去体验了一下，发现还不错。于是就开始照着这种模式去开发。

拖拽排序使用了一个叫sortable.js的插件，大家有兴趣可以去搜索一下，该插件的功能很强大，可拖拽排序，删除模块，可是官方的API写的不是那么清楚，这里，我简单的把最重要的这两个共功能的和大家分享一下。删除时候我自己加了一个判断，当前模块点击删除时候，判断用户时候上传了图片或者编辑了文字，如果有，则提示是否确定删除，点击确认才删除，否则不删除；当删除的模块没有上传图片或者编辑文字时候，就会直接删除。

设置拖动和删除

完成上述配置后，就可以拖拽和删除了，可是离我们的目标还远着呢。接下来开始实现上传图片的功能。

上传图片我使用HTML5 FileReader获取图片，实现本地预览，并异步上传到七牛服务器，然后返回当前图片地址，悄无声息替换本地路径。这样的好处就是，用户在上传图片时候，并不会阻塞当前页面，用户依旧可以执行其他操作，在执行其他操作时候，默默的将图片上传至七牛服务器，然后根据返回的地址，替换预览时候的base64路径，神不知鬼不觉。代码如下

上传图片

接下来是编辑文本

编辑文本

对了，还有两个很重要的点忘了提醒大家，第一是：一定要记录你当前点击模块的的索引，这个非常重要，不然你上传的图片和编辑的文本不能正确的显示在当前的模块；第二就是：点击添加模块时候，不能采用字符串拼接的方式，不然不能添加事件，要采用clone（true），才能复制事件。

克隆模块

整体思路大致就是这样，欢迎各位前端开发人员和爱好者提出宝贵的意见。

源码已经上传至github了，有需要的同学可以留言。