由于微信小程序不能使用常规的图文编辑器(比如百度的UEditor )编辑新闻内容之类的，所以用vue写了个针对小程序用的图文编辑器。效果如下
多图上传图片用到了 ajaxfileupload.js （不知道哪位仁兄写的，拿来用了，很好用）
最终形成一串Json数据（转成字符串，传入后台存入数据库，小程序端用JSON.parse 转成JSON ，按照后台一样的方式渲染即可【小程序端代码还没写，后面再贴出来吧】）
json格式如
[{"mytype":1,"content":"测试数据11111","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代码
1 div class="editor-box vue-container" 2 div class="vuefor" v-for="i in editorData.length+1" v-on:click="hidecolorbox(i-1)" 3 div class="tool-box" 4 div class="tool-box-sub" 5 div class="tool-list" 6 div v-if="reload" 7 input type="file" v-on:change.stop="uploadfile(i-1)" v-bind:id="buildfileid(i-1)" v-bind:name="buildfileid(i-1)" multiple="multiple" 8 /div 9 label class="tool-item" v-on:click.stop="itemadd(i-1,1)" 10 div class="icon"img src="~/res/img/icon-font.png" alt="" //div 11 div class="text"文字/div 12 /label 13 !--v-on:click.stop="itemadd(i-1,2)"-- 14 label class="tool-item" v-bind:for="buildfileid(i-1)" 15 div class="icon"img src="~/res/img/icon-img.png" alt="" //div 16 div class="text"图片/div 17 /label 18 label class="tool-item" v-on:click.stop="itemadd(i-1,3)" 19 div class="icon"img src="~/res/img/icon-line.png" alt="" //div 20 div class="text"分割/div 21 /label 22 label class="tool-item enabled" v-on:click.stop="itemadd(i-1,4)" 23 div class="icon"img src="~/res/img/icon-video.png" alt="" //div 24 div class="text"视频/div 25 /label 26 label class="tool-item enabled" v-on:click.stop="itemadd(i-1,5)" 27 div class="icon"img src="~/res/img/icon-link.png" alt="" //div 28 div class="text"链接/div 29 /label 30 /div 31 /div 32 /div 33 div class="editor-item" v-if="i = editorData.length" 34 35 div class="head" 36 div class="h-btn fleft" v-on:click.stop="itemup(i-1)" 37 img src="~/res/img/icon-up.png" / 38 /div 39 div class="h-btn fleft" v-on:click.stop="itembottom(i-1)" 40 img src="~/res/img/icon-bottom.png" / 41 /div 42 div class="h-btn fright" v-on:click.stop="itemdel(i-1)" 43 img src="~/res/img/icon-del.png" / 44 /div 45 /div 46 div class="content" v-if="editorData[i-1].mytype==1" 47 !--文字类型的输入框-- 48 div class="text-box" 49 div class="head" 50 div title="加粗" v-on:click.stop="fontweight(i-1)" v-bind:class="{ 'head-btn': true,'sel':editorData[i-1].font.weight==1 }"img src="~/res/img/icon-font-weight.png" alt="" //div 51 div title="放大字体" v-on:click.stop="fontda(i-1)" v-bind:class="{ 'head-btn': true}"img src="~/res/img/icon-font-da.png" alt="" //div 52 div title="缩小字体" v-on:click.stop="fontxiao(i-1)" v-bind:class="{ 'head-btn': true}"img src="~/res/img/icon-font-xiao.png" alt="" //div 53 div title="删除线" v-on:click.stop="fontdel(i-1)" v-bind:class="{ 'head-btn': true,'sel':editorData[i-1].font.del==1 }"img src="~/res/img/icon-font-del.png" alt="" //div 54 div title="下划线" v-on:click.stop="fontline(i-1)" v-bind:class="{ 'head-btn': true,'sel':editorData[i-1].font.line==1 }"img src="~/res/img/icon-font-line.png" alt="" //div 55 div title="居中" v-on:click.stop="fontcenter(i-1)" v-bind:class="{ 'head-btn': true,'sel':editorData[i-1].font.center==1 }"img src="~/res/img/icon-font-center.png" alt="" //div 56 div title="字体颜色" v-on:click.stop="fontshowcolor(i-1)" v-bind:class="{ 'head-btn': true }" v-bind:style="initfontcolor(editorData[i-1].font)" 57 A 58 div v-on:click.stop="stopclick" class="color-box" v-bind:class="{'hide':editorData[i-1].font.showcolor!=1}" 59 div class="color-title" 60 字体颜色 61 /div 62 div class="color-list" 63 div class="color-item" v-for="color in colors" 64 span v-on:click.stop="fontsetcolor(i-1,color)" v-bind:style="initbgcolor(color)"/span 65 /div 66 /div 67 div class="color-title" 68 字体颜色代码 69 /div 70 div class="color-input" 71 input type="text" v-model="editorData[i-1].font.color" / 72 /div 73 !--div class="color-title" 74 字体背景颜色 75 /div 76 div class="color-list" 77 div class="color-item" v-for="color in colors" 78 span v-on:click.stop="fontsetcolor(i-1,color)" v-bind:style="initbgcolor(color)"/span 79 /div 80 /div 81 div class="color-title" 82 字体背景颜色代码 83 /div 84 div class="color-input" 85 input type="text" v-model="editorData[i-1].font.bgcolor" / 86 /div-- 87 /div 88 /div 89 /div 90 div class="line"/div 91 div class="input" 92 textarea name="" rows="" cols="" v-bind:style="initstyle(editorData[i-1].font)" v-model="editorData[i-1].content"/textarea 93 /div 94 div class="line"/div 95 /div 96 /div 97 98 div class="content" v-if="editorData[i-1].mytype==2" style="" 99 !--图片--100
