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 

<template>     <div>         <Editor :id="tinymceId" :init="init" :disabled="disabled" v-model="myValue"></Editor>     </div> </template>  <script> //引入tinymce-vue import 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)         }     } } </script> <style> .tox-notifications-container {     display: none; }  /*在页面正常使用时不用加这个样式，在弹窗使用时，要加这个样式，因为使用弹窗，z-index层数比较低，工具栏的一些工具不能使用，要将z-index层数提高。*/ .tox.tox-silver-sink.tox-tinymce-aux {     z-index: 2100 !important; }</style>

4、引用组件

新建test.vue

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

注：文件引入路径是关键