先来暂时效果，如下图
本项目是基于vue+element编写的，如果使用者不是采用vue，可以自行修改此代码。下面贴出代码。可以参考这篇文章：
<template> <div class="editor-viewer"> <div class="content-viewer"> <div class="content-list"> <div v-for="(content, index) in contentList" class="editor-item" :key="index" :tabindex="index" @mouseover="handleMouseIn(index, content)" @mouseout="handleMouseOut(index, content)"> <div class="textarea" contenteditable="true" v-if="content.type === 'text'" @blur="changeText(index,$event)" >{{content.value}}</div> <img v-if="content.type === 'image'" :src="content.value"> <div class="editor-item-ops" v-if="content.visible"> <el-button icon="el-icon-arrow-down" v-if="contentList.length > 1 && index !== contentList.length - 1" circle @click="moveDown(index)"></el-button> <el-button icon="el-icon-arrow-up" circle v-if="contentList.length > 1 && index !== 0" @click="moveUp(index)"></el-button> <el-button icon="el-icon-delete" circle @click="delOne(index)"></el-button> </div> </div> </div> </div> <div class="editor-btn-viewer"> <el-upload class="editor-btn" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleUploadSuccess" :before-upload="beforeImageUpload" titlr="只能上传jpg/png文件，且不超过2M"><i class="el-icon-picture" ></i> 添加图片</el-upload> <div class="editor-btn" @click="addAtLast"><i class="el-icon-circle-plus-outline" ></i> 添加文本</div> <div style="clear: both;"></div> </div> </div> </template> <script> import {Upload} from 'element-ui' export default { data () { return { contentList: [{type:'text',value:"撒旦撒大大大大大"},{type:'text',value:"撒旦撒大大大大大"},{type:'text',value:"撒旦撒大大大大大"}, {type:'image',value:"https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1173791835,2187562430&fm=173&s=B72344A34EB3BDD25E156D2F03007050&w=640&h=410&img.JPEG"}] } }, props: ['contents'], components: { ElUpload: Upload }, methods: { //公共的移动方法 spliceContent (start, count, added) { if (typeof added !== 'undefined') { return this.contentList.splice(start, count, added) } else { return this.contentList.splice(start, count) } }, //绑定文本修改 changeText(index,e) { this.contentList[index].value = e.target.innerHTML; }, //操作按钮移入时显示 handleMouseIn (index) { let item = this.contentList[index]; item.visible = true; this.spliceContent(index, 1, item); }, //操作按钮移除时隐藏 handleMouseOut (index) { let item = this.contentList[index]; item.visible = false; this.spliceContent(index, 1, item); }, //向下移 moveDown (index) { let cur = this.spliceContent(index, 1) this.spliceContent(index + 1, 0, cur[0]) }, //向上移 moveUp (index) { let cur = this.spliceContent(index, 1) this.spliceContent(index - 1, 0, cur[0]) }, //删除内容 delOne (index) { this.spliceContent(index, 1) }, //添加内容 addAtLast () { this.contentList.push({type: 'text', value: '', visible: false}) }, //下面是上传图片 handleUploadSuccess(res, file) { // res 需要返回附加data：index let imageUrl = URL.createObjectURL(file.raw); this.spliceContent(res.index, 1, {type: 'image', value: imageUrl, visible: false}) }, beforeImageUpload(file) { const isJPG = file.type === 'image/jpeg'; const isLt2M = file.size / 1024 / 1024 < 2; console.info(file) if (!isJPG) { this.$message.error('上传头像图片只能是 JPG 格式!'); } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); } return isJPG && isLt2M; }, //提交信息 finishEdit () { } }, mounted () { } } </script> <style> .editor-viewer { width: 350px; border: 1px solid #ddd; position: relative; } .content-viewer { width: 100%; height: 550px; overflow-y: scroll; overflow-x: hidden; } .content-viewer .content-list { padding: 5px; } .content-viewer .content-list .editor-item { position: relative;margin-top: 10px; } .content-viewer .content-list .editor-item:hover{ box-shadow: 0 0 10px #ccc; } .content-viewer .content-list .editor-item>.textarea, .content-viewer .content-list .editor-item>img{ width: 100%; height: auto; min-height: 70px; text-align: left;border: 1px solid #eeeeee;padding: 8px;color: #666666;font-size: 13px; } .content-viewer .content-list .editor-item>.textarea{line-height: 22px;outline:0px;-webkit-user-select:text;} .content-viewer .content-list .editor-item .editor-item-ops { height: 50px; position: absolute; right: 6px; bottom: 0; z-index:100; } .content-viewer .content-list .editor-item .editor-item-ops > .editor-btn { background-color: #666; } .editor-btn-viewer { width: 100%; height: 50px; } .editor-btn-viewer .editor-btn{ float: left; display: inline-block; width: 50%; border-radius: 0; margin: 0; font-size: 16px; background-color: #eee;text-align: center;height: 50px;line-height: 50px;border: 1px solid #cecece;border-right: 0;} .editor-btn-viewer .editor-btn:hover { color: #409eff; border-color: #c6e2ff; background-color: #ecf5ff; } </style>
