后台编辑器组件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[]

console.log(dom)

if(!dom){

return false;

}

var size = Math.floor(dom.size / );

if (size > ) {

// 这里可以加个文件大小控制

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 == ) {

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: ;

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: 15px;

background-color: #fafbfc;

border-bottom: 1px solid #eeeff1;

position: relative;

}

.wrap .vm-editor-button{

position: relative;

border-radius: 4px;

outline: ;

cursor: pointer;

background-color: transparent;

border: none;

display: flex;

justify-content: center;

align-items: center;

margin: 5px;

padding: ;

}

.vm-editor-button:first-child{

margin-left:

}

.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: ;

top: 25px;

border-radius: 4px;

border: 1px solid #eeeff1;

box-shadow: 4px rgba(,,,.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: ;

top: ;

opacity: ;

}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

::-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>