vue中使用Tinymce

1、安装tinymce编辑器

npm i tinymce
npm i @tinymce/tinymce-vue

或：

yarn add tinymce

yarn add @tinymce/tinymce-vue

2、配置中文语言包

地址：中文语言包

注：最好将语言包放在public/langs/或static/langs/目录下，下面组件将会引用

3、封装组件

在components 目录下新建 tinymce.vue

    
            //引入tinymce-vueimport Editor from '@tinymce/tinymce-vue'//公共的图片前缀//import Global from "./Global";export default {    components: { Editor },    props: {        //编号        id: {            type: String        },        //内容        value: {            type: String,            default: ''        },        //是否禁用        disabled: {            type: Boolean,            default: false        },        //插件        plugins: {            type: [String, Array],            default: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media code codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help emoticons autosave autoresize formatpainter',        },        //工具栏        toolbar: {            type: [String, Array],            default: 'code undo redo restoredraft | fullscreen | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \    table image media charmap emoticons hr pagebreak insertdatetime print preview | bdmap indent2em lineheight formatpainter axupimgs',        }    },    data() {        let that = this;        return {            tinymceId: this.id || 'vue-tinymce' + Date.parse(new Date()),            myValue: this.value,            init: {                //汉化,路径是自定义的                language_url: '/tinymce/langs/zh_CN.js',                language: 'zh_CN',                //皮肤                skin: 'oxide',                //插件                plugins: this.plugins,                //工具栏                toolbar: this.toolbar,                //高度                height: 500,                //图片上传                images_upload_handler: function (blobInfo, success, failure) {                    //文件上传的formData传递                    let formData = new FormData();                    formData.append('file', blobInfo.blob(), blobInfo.filename());                    //上传的api,和后端配合，返回的是图片的地址，然后加上公共的图片前缀                    that.$api.system.uploadImage(formData).then(res => {                        var url = "tt"//Global.baseUrlImg + res;                        console.log(url)                        success(url)                    }).catch(res => {                        failure('图片上传失败')                    });                }            }        }    },    methods: {    },    watch: {        //监听内容变化        value(newValue) {            this.myValue = newValue        },        myValue(newValue) {            this.$emit('input', newValue)        }    }}.tox-notifications-container {    display: none;}/*在页面正常使用时不用加这个样式，在弹窗使用时，要加这个样式，因为使用弹窗，z-index层数比较低，工具栏的一些工具不能使用，要将z-index层数提高。*/.tox.tox-silver-sink.tox-tinymce-aux {    z-index: 2100 !important;}

4、引用组件

新建test.vue

    
              import TinymceEditor from "./components/tinymce.vue"export default {    components: {        TinymceEditor    },    data() {        return {            content: ""        }    },    methods: {        // 获取富文本的内容        newContent(val) {            this.content = val; // 直接更新 content 属性        }    }}

注：文件引入路径是关键