先来暂时效果，如下图
本项目是基于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"}]
}
},
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>
