<template>
|
<!-- <textarea :id="tinymceId" style="visibility: hidden" />-->
|
<div class="tinymce-box">
|
<div v-for="(
|
item,index) in options" :key="index" class="options">
|
<div v-if="item.url" class="cheImg">
|
<img :src="item.url" alt="">
|
</div>
|
<div v-else class="Empty">
|
<i class="el-icon-picture-outline"></i>
|
</div>
|
<div class="tinymce-text">{{item.label}}</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import loadTinymce from '@/utils/loadTinymce'
|
import { plugins, toolbar } from './config'
|
import { debounce } from 'throttle-debounce'
|
|
|
export default {
|
props: {
|
value: {
|
default: ''
|
}
|
},
|
data() {
|
return {
|
tinymceId: this.id,
|
options:[],
|
defaultUrl:'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'
|
}
|
},
|
mounted() {
|
this.options = this._vnode.parent.context.conf.__slot__.options
|
// console.log(this._vnode)
|
|
|
},
|
destroyed() {
|
|
},
|
methods: {
|
|
}
|
}
|
</script>
|
<style scoped>
|
.tinymce-box{
|
width: 100%;
|
display: flex;
|
box-sizing: border-box;
|
flex-wrap: wrap;
|
}
|
.options{
|
margin: 6px;
|
width: 100px;
|
height: 120px;
|
background: white;
|
border-radius: 10px;
|
box-sizing: border-box;
|
}
|
.Empty{
|
font-size: 40px;
|
width: 100%;
|
height: 80px;
|
color: #909399;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.cheImg{
|
width: 100%;
|
height: 80px;
|
object-fit: cover;
|
}
|
.cheImg>img{
|
width: 100%;
|
height: 100%;
|
}
|
.tinymce-text{
|
text-align: center;
|
}
|
</style>
|
