E企盈营销工具技术服务商 热线:4006-838-530

用于微信小程序的图文编辑器

E企盈直播平台营销卖货系统

由于微信小程序不能使用常规的图文编辑器(比如百度的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                 AD:【E企盈小程序开发公司】E企盈系统专业开发:直播系统,直播平台系统源码,小程序,商城版小程序,分销小程序,小程序定制,微分销,微商,微信分销,微信分销商城,微信分销系统,微信分销管理,微信分销平台,微商代理系统,E企盈是专业的直播小,E企盈是专业的直播小程序,公众号分销系统,营销系统,社群私域流量卖货系统技术开发商,热线:4006-838-530

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 用于微信小程序的图文编辑器
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏