.content-wrapper{padding: 18px;height: ~"calc(100% - 80px)";overflow: auto;
}

 import '../main.less'

npm install @tinymce/tinymce-vue -S
npm install tinymce -S

<template><div class="editor"><TinymceEditor ref="editor" v-model="content" :disabled="disabled" @onClick="onClick"></TinymceEditor></div>
</template><script>import TinymceEditor from '@/components/tinymce-editor'export default {name: "EidtPost",components: {TinymceEditor},data() {return {content: 'Welcome to Use Tinymce Editor',disabled: false}},methods: {// 鼠标单击的事件
      onClick(e, editor) {console.log('Element clicked')console.log(e)console.log(editor)},// 清空内容
      clear() {this.$refs.editor.clear()}}}
</script><style scoped>.editor {padding: 20px;height: 100%;margin-left: 10%;margin-right: 10%;}</style>

<template><div class="tinymce-editor"><editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick"></editor></div>
</template>
<script>import tinymce from 'tinymce/tinymce'import Editor from '@tinymce/tinymce-vue'import 'tinymce/themes/silver'// 编辑器插件plugins// 更多插件参考：https://www.tiny.cloud/docs/plugins/import 'tinymce/plugins/image'// 插入上传图片插件import 'tinymce/plugins/media'// 插入视频插件import 'tinymce/plugins/table'// 插入表格插件import 'tinymce/plugins/lists'// 列表插件import 'tinymce/plugins/wordcount'// 字数统计插件export default {components: {Editor},props: {value: {type: String,default: ''},disabled: {type: Boolean,default: false},plugins: {type: [String, Array],default: 'lists image media table wordcount autoresize'},toolbar: {type: [String, Array],default: 'undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat'}},data () {return {init: {language_url: '/static/tinymce/langs/zh_CN.js',language: 'zh_CN',skin_url: '/static/tinymce/skins/ui/oxide',// skin_url: '/tinymce/skins/ui/oxide',//暗色系height: document.body.clientHeight * 0.8,plugins: this.plugins,toolbar: this.toolbar,branding: false,menubar: false,// 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，// 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handlerimages_upload_handler: (blobInfo, success, failure) => {const img = 'data:image/jpeg;base64,' + blobInfo.base64()success(img)}},myValue: this.value}},mounted () {tinymce.init({})},methods: {// 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events// 需要什么事件可以自己增加
      onClick (e) {this.$emit('onClick', e, tinymce)},// 可以添加一些自己的自定义事件，如清空内容
      clear () {this.myValue = ''}},watch: {value (newValue) {this.myValue = newValue},myValue (newValue) {this.$emit('input', newValue)}}}</script><style scoped>.editor {padding: 20px;height: 100%;margin-left: 10%;margin-right: 10%;}</style>