###~css
.toolbar {
border: 1px solid #ccc;
}
.text {
border: 1px solid #ccc;
height: 400px;
}
#div3{
margin-top: 50px
}
###~vue
<template>
<div class="hello">
<!-- <button @click="gettwo()">点击</button> -->
<div id="div1" class="toolbar">
</div>
<div style="padding: 5px 0; color: #ccc">中间隔离带</div>
<div id="div2" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
<p>请输入内容</p>
</div>
<div id="div3">
<p>第二个 demo(常规)</p>
</div>
</div>
</template>
<script>
import {shuchu} from '../assets/get'
import E from 'wangeditor'
import '../assets/editor.css'
export default {
// data () {
// return {
// }
// },
// methods: {
// gettwo(){
// shuchu();
// }
// },
mounted(){
var editor1 = new E('#div1', '#div2') // 两个参数也可以传入 elem 对象,class 选择器
editor1.create()
var editor2 = new E('#div3')
editor2.create()
}
}
</script>
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/7ba2b8a1c476c3c6fd50100a232aa0f2.png)