更新记录

1.0.0（2020-06-29）

首次发布

平台兼容性

zhangyuTinymce

Vue 富文本编辑器组件

zhangyuTinymce 是将tinymce富文本编辑器整合封装成了一个通用组件，用户可以直接调用该组件传入需要的参数即可。

使用方式

首先执行下面两条命令

npm install @tinymce/tinymce-vue -S

npm install tinymce -S

然后把我Demo里public文件夹下的tinymce目录复制到你的public目录下

在 script 中引用组件

import zhangyuTinymce from '@/components/zhangyuTinymce.vue'

在 template 中创建 <zhangyu-tinymce />并传参

<zhangyuTinymce :content="form.desc" @editorChange="editorChange"></zhangyuTinymce>

同时在 script 中加入 editorChange() 回调函数

export default {
    data(){
        return {
            form: {
                desc: ''
            }
        }
    },
    components: {
        zhangyuTinymce
    },
    methods:{
        //监听富文本内容改变
        editorChange(e){
            this.form.desc = e
        }
    }
}

属性说明

事件说明

完整示例

<template>
  <div>
    <zhangyuTinymce :content="form.desc" @editorChange="editorChange"></zhangyuTinymce>
  </div>
</template>

<script>
import zhangyuTinymce from '@/components/zhangyuTinymce.vue'

export default {
    data(){
        return {
            form: {
                desc: ''
            }
        }
    },
    components: {
        zhangyuTinymce
    },
    methods:{
        editorChange(e){
            this.form.desc = e
        }
    }
}
</script>

<style>

</style>

Tips

• 大家请根据项目实际业务需求自行修改示例Demo的内容