后台编辑器组件VmEditor
<template> <div class="wrap"> <div class="vm-editor"> <div class="wm-editor-menu"> <div class="vm-editor-button"> <span class="button"> <img src="../assets/images/img_icon.png" @click="change" alt="" srcset=""> </span> <div class="vm-editor-dropdown" v-show="showInput"> <div class="add-img"> Add Image <input type="file" accept="image/gif, image/jpeg, image/png" ref="file" @change="handleFileChange"> </div> </div> </div> </div> <div class="vm-editor-content" contenteditable="true" v-html="html" @input="onDivInput($event)" @focus="lock=true" @blur="lock=false"></div> </div> </div> </template> <script> export default { props: ['data'], data() { return { html: this.data, lock: false, showInput: false } }, watch: { 'data'() { if (!this.lock) { this.html = this.data; } } }, mounted() { }, methods: { onDivInput: function(e) { // this.html = e.target.innerHTML; this.$emit('upload', e.target.innerHTML) }, handleFileChange: function(e) { this.showInput = false var dom = this.$refs.file.files[0] console.log(dom) if(!dom){ return false; } var size = Math.floor(dom.size / 1024); if (size > 10240) { // 这里可以加个文件大小控制 this.$alert('请选择小于10M图片', '提示', { confirmButtonText: '确定' }); return false } var _this = this; var params = new FormData(); params.append('file', dom); this.$postImg('/upload/image',params).then(res => { if(res.code == 0) { document.execCommand('insertImage', false, res.data) }else{ } }).catch(err => { console.log(err) }) }, change: function() { this.showInput = !this.showInput } } } </script> <style scoped> .wrap .vm-editor{ background-color: #fff; border-radius: 4px; border: 1px solid #eeeff1; min-width: 100px; width: 95%; overflow: hidden; } .wrap .vm-editor-content{ outline: 0; height: calc(100% - 40px); height: 160px; text-align: left; padding: 15px; font-size: 16px; overflow-y: scroll; } .wrap .wm-editor-menu{ width: 100%; box-sizing: border-box; display: flex; height: 40px; align-items: center; padding: 0 15px; background-color: #fafbfc; border-bottom: 1px solid #eeeff1; position: relative; } .wrap .vm-editor-button{ position: relative; border-radius: 4px; outline: 0; cursor: pointer; background-color: transparent; border: none; display: flex; justify-content: center; align-items: center; margin: 0 5px; padding: 0; } .vm-editor-button:first-child{ margin-left:0 } .wrap .vm-editor-button span.button:hover{ background-color:#eee } .wrap .button{ width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; } .wrap .button img{ width: 16px; height: 16px; } .wrap .vm-editor-dropdown{ position: absolute; background: #fff; left: 0; top: 25px; border-radius: 4px; border: 1px solid #eeeff1; box-shadow: 0 0 4px rgba(0,0,0,.05); } .wrap .add-img{ width: 100px; height: 30px; line-height: 30px; font-size: 14px; text-align: center; position: relative; cursor: pointer; } .wrap .add-img input{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; } /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 4px; height: 4px; background-color: #F5F5F5; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { border-radius: 3px; background-color: #FFF; } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { border-radius: 3px; background-color: #eeeff1; } </style>
VmEditor 组件 个人后台管理系统
<template>
<div class="wrap">
<div class="vm-editor">
<div class="wm-editor-menu">
<div class="vm-editor-button">
<span class="button">
<img src="../assets/images/img_icon.png" @click="change" alt="" srcset="">
</span>
<div class="vm-editor-dropdown" v-show="showInput">
<div class="add-img">
Add Image
<input type="file" accept="image/gif, image/jpeg, image/png" ref="file" @change="handleFileChange">
</div>
</div>
</div>
</div>
<div class="vm-editor-content" contenteditable="true" v-html="html" @input="onDivInput($event)" @focus="lock=true" @blur="lock=false"></div>
</div>
</div>
</template>
<script>
export default {
props: ['data'],
data() {
return {
html: this.data,
lock: false,
showInput: false
}
},
watch: {
'data'() {
if (!this.lock) {
this.html = this.data;
}
}
},
mounted() {
},
methods: {
onDivInput: function(e) {
// this.html = e.target.innerHTML;
this.$emit('upload', e.target.innerHTML)
},
handleFileChange: function(e) {
this.showInput = false
var dom = this.$refs.file.files[0]
console.log(dom)
if(!dom){
return false;
}
var size = Math.floor(dom.size / 1024);
if (size > 10240) {
// 这里可以加个文件大小控制
this.$alert('请选择小于10M图片', '提示', {
confirmButtonText: '确定'
});
return false
}
var _this = this;
var params = new FormData();
params.append('file', dom);
this.$postImg('/upload/image',params).then(res => {
if(res.code == 0) {
document.execCommand('insertImage', false, res.data)
}else{
}
}).catch(err => {
console.log(err)
})
},
change: function() {
this.showInput = !this.showInput
}
}
}
</script>
<style scoped>
.wrap .vm-editor{
background-color: #fff;
border-radius: 4px;
border: 1px solid #eeeff1;
min-width: 100px;
width: 95%;
overflow: hidden;
}
.wrap .vm-editor-content{
outline: 0;
height: calc(100% - 40px);
height: 160px;
text-align: left;
padding: 15px;
font-size: 16px;
overflow-y: scroll;
}
.wrap .wm-editor-menu{
width: 100%;
box-sizing: border-box;
display: flex;
height: 40px;
align-items: center;
padding: 0 15px;
background-color: #fafbfc;
border-bottom: 1px solid #eeeff1;
position: relative;
}
.wrap .vm-editor-button{
position: relative;
border-radius: 4px;
outline: 0;
cursor: pointer;
background-color: transparent;
border: none;
display: flex;
justify-content: center;
align-items: center;
margin: 0 5px;
padding: 0;
}
.vm-editor-button:first-child{
margin-left:0
}
.wrap .vm-editor-button span.button:hover{
background-color:#eee
}
.wrap .button{
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
}
.wrap .button img{
width: 16px;
height: 16px;
}
.wrap .vm-editor-dropdown{
position: absolute;
background: #fff;
left: 0;
top: 25px;
border-radius: 4px;
border: 1px solid #eeeff1;
box-shadow: 0 0 4px rgba(0,0,0,.05);
}
.wrap .add-img{
width: 100px;
height: 30px;
line-height: 30px;
font-size: 14px;
text-align: center;
position: relative;
cursor: pointer;
}
.wrap .add-img input{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 4px;
height: 4px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
border-radius: 3px;
background-color: #FFF;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 3px;
background-color: #eeeff1;
}
</style>