由于微信小程序不能使用常规的图文编辑器(比如百度的UEditor )编辑新闻内容之类的，所以用vue写了个针对小程序用的图文编辑器。效果如下
多图上传图片用到了 ajaxfileupload.js （不知道哪位仁兄写的，拿来用了，很好用）
最终形成一串Json数据（转成字符串，传入后台存入数据库，小程序端用JSON.parse 转成JSON ，按照后台一样的方式渲染即可【小程序端代码还没写，后面再贴出来吧】）
json格式如
[{"mytype":1,"content":"测试数据\n\n11111\n\n","font":{"size":0,"weight":1,"del":1,"line":0,"center":1,"color":"#ED1C24","bgcolor":"#fff","showcolor":0}},{"mytype":3,"content":""},{"mytype":2,"content":"/upload/dyProductImgs/20180725/9841925131090216.jpg_E500_100.jpg","loading":1,"groupid":"627459ec-d372-e372-218e-b93b83cb2d02"},{"mytype":2,"content":"/upload/dyProductImgs/20180725/1574162212592205.jpg_E500_100.jpg","loading":1,"groupid":"627459ec-d372-e372-218e-b93b83cb2d02"},{"mytype":2,"content":"/upload/dyProductImgs/20180725/8745023656415428.jpg_E500_100.jpg","loading":1,"groupid":"627459ec-d372-e372-218e-b93b83cb2d02"},{"mytype":2,"content":"/upload/dyProductImgs/20180725/7027501123579481.jpg_E500_100.jpg","loading":1,"groupid":"627459ec-d372-e372-218e-b93b83cb2d02"}]
html代码
<div> <div v-for="i in editorData.length+1" v-on:click="hidecolorbox(i-1)"> <div> <div> <div> <div v-if="reload"> <input type="file" v-on:change.stop="uploadfile(i-1)" v-bind:id="buildfileid(i-1)" v-bind:name="buildfileid(i-1)" multiple="multiple"> </div> <label v-on:click.stop="itemadd(i-1,1)"> <div><img src="https://www.jb51.net/~/res/img/icon-font.png" alt="" /></div> <div>文字</div> </label> <!--v-on:click.stop="itemadd(i-1,2)"--> <label v-bind:for="buildfileid(i-1)"> <div><img src="https://www.jb51.net/~/res/img/icon-img.png" alt="" /></div> <div>图片</div> </label> <label v-on:click.stop="itemadd(i-1,3)"> <div><img src="https://www.jb51.net/~/res/img/icon-line.png" alt="" /></div> <div>分割</div> </label> <label v-on:click.stop="itemadd(i-1,4)"> <div><img src="https://www.jb51.net/~/res/img/icon-video.png" alt="" /></div> <div>视频</div> </label> <label v-on:click.stop="itemadd(i-1,5)"> <div><img src="https://www.jb51.net/~/res/img/icon-link.png" alt="" /></div> <div>链接</div> </label> </div> </div> </div> <div v-if="i <= editorData.length"> <div> <div v-on:click.stop="itemup(i-1)"> <img src="https://www.jb51.net/~/res/img/icon-up.png" /> </div> <div v-on:click.stop="itembottom(i-1)"> <img src="https://www.jb51.net/~/res/img/icon-bottom.png" /> </div> <div v-on:click.stop="itemdel(i-1)"> <img src="https://www.jb51.net/~/res/img/icon-del.png" /> </div> </div> <div v-if="editorData[i-1].mytype==1"> <!--文字类型的输入框--> <div> <div> <div title="加粗" v-on:click.stop="fontweight(i-1)" v-bind:class="{ 'head-btn': true,'sel':editorData[i-1].font.weight==1 }"><img src="https://www.jb51.net/~/res/img/icon-font-weight.png" alt="" /></div> <div title="放大字体" v-on:click.stop="fontda(i-1)" v-bind:class="{ 'head-btn': true}"><img src="https://www.jb51.net/~/res/img/icon-font-da.png" alt="" /></div> <div title="缩小字体" v-on:click.stop="fontxiao(i-1)" v-bind:class="{ 'head-btn': true}"><img src="https://www.jb51.net/~/res/img/icon-font-xiao.png" alt="" /></div> <div title="删除线" v-on:click.stop="fontdel(i-1)" v-bind:class="{ 'head-btn': true,'sel':editorData[i-1].font.del==1 }"><img src="https://www.jb51.net/~/res/img/icon-font-del.png" alt="" /></div> <div title="下划线" v-on:click.stop="fontline(i-1)" v-bind:class="{ 'head-btn': true,'sel':editorData[i-1].font.line==1 }"><img src="https://www.jb51.net/~/res/img/icon-font-line.png" alt="" /></div> <div title="居中" v-on:click.stop="fontcenter(i-1)" v-bind:class="{ 'head-btn': true,'sel':editorData[i-1].font.center==1 }"><img src="https://www.jb51.net/~/res/img/icon-font-center.png" alt="" /></div> <div title="字体颜色" v-on:click.stop="fontshowcolor(i-1)" v-bind:class="{ 'head-btn': true }" v-bind:style="initfontcolor(editorData[i-1].font)"> A <div v-on:click.stop="stopclick" v-bind:class="{'hide':editorData[i-1].font.showcolor!=1}"> <div> 字体颜色 </div> <div> <div v-for="color in colors"> <span v-on:click.stop="fontsetcolor(i-1,color)" v-bind:style="initbgcolor(color)"></span> </div> </div> <div> 字体颜色代码 </div> <div> <input type="text" v-model="editorData[i-1].font.color" /> </div> <!--<div> 字体背景颜色 </div> <div> <div v-for="color in colors"> <span v-on:click.stop="fontsetcolor(i-1,color)" v-bind:style="initbgcolor(color)"></span> </div> </div> <div> 字体背景颜色代码 </div> <div> <input type="text" v-model="editorData[i-1].font.bgcolor" /> </div>--> </div> </div> </div> <div></div> <div> <textarea rows="" cols="" v-bind:style="initstyle(editorData[i-1].font)" v-model="editorData[i-1].content"></textarea> </div> <div></div> </div> </div> <div v-if="editorData[i-1].mytype==2"> <!--图片--> <div> <img v-if="editorData[i-1].loading==1" v-bind:src="editorData[i-1].content" alt="" /> <img v-if="editorData[i-1].loading==0" src="https://www.jb51.net/~/res/img/img_loading.gif" alt="" /> </div> </div> <div v-if="editorData[i-1].mytype==3"> <!--分割线--> <div> </div> </div> <div></div> </div> </div> </div>
js 代码
需要引用 jquery、vue、ajaxfileupload