vue引入富文本框tinmce

父组件

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