一、效果如图所示

二、页面标签展示

<editor id="editer" api-key="no-api-key" v-model="editerValue" :init="initEditor" />

三、引入编辑器及配置

<script>import {productUpload } from "../../http/api";import Editor from '@tinymce/tinymce-vue';export default {components:{Editor},data () {return {editerValue: "",initEditor:{skin: 'oxide',//主题language_url: '/static/tinymce/langs/zh_CN.js',//语言包路径language: 'zh_CN',//中文icons_url: '/static/tinymce/icons/christmas/icons.js',//图标路径icons: 'christmas',//图标height: document.documentElement.clientHeight - 150,//编辑器高度branding: false,//是否禁用“Powered by TinyMCE”menubar: true,//顶部菜单栏显示,statusbar: false, // 隐藏编辑器底部的状态栏paste_data_images: true, // 是否允许粘贴图像file_picker_types: 'image',//上传类型images_upload_credentials: true,//自定义请求头plugins: [//工具栏插件"paste", "indent2em", "hr", "lists", "advlist", "link","image", "charmap", "paste", "print", "preview", "anchor", "kityformula-editor","pagebreak", "searchreplace", "visualblocks", "visualchars", "code","help", "fullscreen", "insertdatetime", "media", "nonbreaking", "save","table", "directionality", "emoticons", "template",],toolbar: [//工具栏"undo redo save | cut copy paste | forecolor backcolor bold italic underline strikethrough link unlink " + "openlink anchor | alignleft aligncenter alignright alignjustify alignnone outdent indent | " +"bullist numlist | blockquote subscript superscript removeformat | ltr rtl","styleselect formatselect fontselect fontsizeselect | table tabledelete tablecellprops tablemergecells " +"tablesplitcells tableinsertrowbefore tableinsertrowafter tabledeleterow tablerowprops tablecutrow " + "tablecopyrow tablepasterowbefore tablepasterowafter tableinsertcolbefore tableinsertcolafter tabledeletecol | " + "image media","insertdatetime charmap emoticons hr pagebreak template code pastetext print visualblocks visualchars " +"nonbreaking searchreplace preview kityformula-editor indent2em fullscreen",],font_formats: "宋体=SimSun;黑体=SimHei;微软雅黑=Microsoft Yahei;微软正黑体=Microsoft JhengHei;" + "楷体=KaiTi;新宋体=NSimSun;仿宋=FangSong;苹方=PingFang SC;华文黑体=STHeiti;华文楷体=STKaiti;" +"华文宋体=STSong;华文仿宋=STFangsong;华文中宋=STZhongsong;华文琥珀=STHupo;华文新魏=STXinwei;" +"华文隶书=STLiti;华文行楷=STXingkai;冬青黑体简=Hiragino Sans GB;兰亭黑-简=Lantinghei SC;" + "翩翩体-简=Hanzipen SC;手札体-简=Hannotate SC;宋体-简=Songti SC;娃娃体-简=Wawati SC;" + "魏碑-简=Weibei SC;行楷-简=Xingkai SC;雅痞-简=Yapi SC;圆体-简=Yuanti SC;幼圆=YouYuan;" +"隶书=LiSu;方正舒体=FZShuTi;方正姚体=FZYaoti;",fontsize_formats: '6px 8px 12px 14px 16px 18px 20px 22px 26px 28px 36px 48px 56px 72px',//图片上传paste_data_images: true, //是否允许粘贴图像file_picker_types: 'image',//上传类型images_upload_handler: function(blobInfo, success, failure) {let formdata = new FormData();formdata.append("file", blobInfo.blob());productUpload(formdata).then(res => {if (process.env.NODE_ENV == 'development') {success("http://192.168.x.xxx:xxxx/demo/" + res.data);}else if(process.env.NODE_ENV == 'production'){success("demo/" + res.data);}}).catch(err => {failure(err.data)});}}}}}</script>