父组件
<template>
<div class="home">
<tinmce v-model="value"></tinmce>
<div v-html="value"></div>
</div>
</template>
<script>
// @ is an alias to /src
import tinmce from './tinmce.vue';
export default {
name: 'HomeView',
data(){
return {
value:'New Content'
}
},
components: {
tinmce,
},
mounted(){
}
}
</script>
子组件
<template>
<section id="tinymce-editor"></section>
</template>
<script>
import '../../public/tinymce/tinymce.min.js'
import '../../public/tinymce/themes/silver/theme.min.js'
// 引入字体
import '../../public/tinymce/langs/zh-Hans'
// 引入插件
import '../../public/tinymce/plugins/preview/plugin.min.js'
import '../../public/tinymce/plugins/image/plugin'
import '../../public/tinymce/plugins/imagetools/plugin'
export default {
props:{
value:{
type:String,
default:''
}
},
mounted(){
tinymce.init({
selector:'#tinymce-editor',
language:'zh-Hans',
// 菜单栏
menubar:'bar1 bar2',
menu:{
bar1:{title:'菜单',items:'copy paste cut preview image'}
},
//工具栏
// toolbar:'undo redo preview',
plugins:'preview image imagetools',
//监听tinymce初始化完成事件
setup:(editor)=>{
editor.on('init',(e)=>{
editor.setContent(this.value)
})
},
// 监听input和change事件,实时更新value
init_instance_callback:(editor)=>{
editor.on('input',(e)=>{
this.$emit('input',e.target.innerHTML)
})
editor.on('change',(e)=>{
this.$emit('input',e.level.content)
})
}
})
}
}
</script>
<style lang="scss" scoped>
@import url('../../public/tinymce/skins/ui/oxide/skin.min.css');
</style>