1.使用的第三方的库
npm install @tinymce/tinymce-vue@3.2.8 tinymce@5.10.9 --save
2.引入应用,直接上代码,支持上传图片,视频
<template>
<div class="tinymce-container" ref="tinymceContainer">
<Eidtor api-key="" v-if="initialized" v-model="tinymceHtml" :disabled="disabled" :width="width" @input="handleChange" id="tinymceId" :init="editorInit" ref="tinymce" />
<input type="file" @change="handleVideoUpload" accept="video/*" style="visibility:hidden;width: 0px;height:0px;position: absolute;
left: -9999px;" ref="videoFileInput">
</div>
</template>
// 如果使用api-key 则这段可以不需要
import 'tinymce/tinymce';
import 'tinymce/themes/silver/theme';
import 'tinymce/icons/default/icons.min.js';
import 'tinymce/plugins/image/plugin.min.js';
import 'tinymce/plugins/link/plugin.min.js';
import 'tinymce/plugins/code/plugin.min.js';
import 'tinymce/plugins/table/plugin.min.js';
import 'tinymce/plugins/lists/plugin.min.js';
import 'tinymce/plugins/contextmenu/plugin.min.js';
import 'tinymce/plugins/wordcount/plugin.min.js';
import 'tinymce/plugins/colorpicker/plugin.min.js';
import 'tinymce/plugins/textcolor/plugin.min.js';
import 'tinymce/plugins/imagetools/plugin.min.js';
import 'tinymce/plugins/fullscreen/plugin.min.js';
import 'tinymce/plugins/paste/plugin.min.js';
import 'tinymce/plugins/media/plugin.min.js';
import '@/assets/static/tinymce/zh_CN.js