vuecli3使用tinymce，（安心兑后台项目）

1.安装包

2.在public导入静态资源

新建文件夹tinymce 把node_modules里的tinymce的skins导入&＃xff0c;langs需要下载中文包&＃xff0c;skins是皮肤
powerpaste是复制粘贴的插件需要另外下载 emojis.js表情插件

3.封装富文本组件

<template><div class&＃61;"tinymce-box"><editor v-model&＃61;"myValue"ref&＃61;"edit":init&＃61;"init":disabled&＃61;"disabled"></editor></div>
</template><script>import tinymce from &＃39;tinymce/tinymce&＃39; //tinymce默认hidden&＃xff0c;不引入不显示import Editor from &＃39;&＃64;tinymce/tinymce-vue&＃39;import &＃39;tinymce/themes/silver&＃39;import &＃39;tinymce/icons/default/icons&＃39;// 编辑器插件plugins// 更多插件参考&＃xff1a;https://www.tiny.cloud/docs/plugins/import &＃39;tinymce/plugins/image&＃39;// 插入上传图片插件import &＃39;tinymce/plugins/media&＃39;// 插入视频插件import &＃39;tinymce/plugins/table&＃39;// 插入表格插件import "tinymce/plugins/link";import "tinymce/plugins/code";import &＃39;tinymce/plugins/lists&＃39;// 列表插件import &＃39;tinymce/plugins/wordcount&＃39;// 字数统计插件import "tinymce/plugins/colorpicker";import "tinymce/plugins/textcolor";import "tinymce/plugins/contextmenu";import "tinymce/plugins/preview"import "tinymce/plugins/hr"import {upLoadImg} from &＃39;network/commandBank&＃39;let that;export default {components: {Editor},name: &＃39;tinymce&＃39;,props: {disabled: {type: Boolean,default: false},plugins: {type: [String, Array],default: &＃39;lists image media table wordcount link code powerpaste preview hr&＃39;},toolbar: {type: [String, Array],default: "fontselect fontsizeselect hr link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image media quicklink h2 h3 blockquote table numlist bullist fullscreen" //工具栏},height:{type:Number,default(){return 600}},baseValue:{type:String,default(){return &＃39;&＃39;}}},data() {return {init: {images_upload_url:&＃39;http://192.168.3.47:8081/imgUpload&＃39;,language_url: &＃39;/tinymce/langs/zh_CN.js&＃39;, //这个是中文插件 需要下载font_formats: "微软雅黑&＃61;Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方&＃61;PingFang SC,Microsoft YaHei,sans-serif;宋体&＃61;simsun;serifsans-serif;Terminal&＃61;terminal;monaco;Times New Roman&＃61;times new roman;times", //字体fontsize_formats: "12px 14px 16px 18px 20px 24px 26px 28px 30px 32px 36px", //字体大小language: &＃39;zh_CN&＃39;,skin_url: &＃39;/tinymce/skins/ui/oxide&＃39;,// skin_url: &＃39;tinymce/skins/ui/oxide-dark&＃39;,//暗色系paste_data_images: true, //允许粘贴图像// emoticons_database_url: &＃39;/tinymce/emojis.js&＃39;, //表情的放在静态资源下menubar: false,height: this.height,plugins: this.plugins, //插件toolbar: this.toolbar, //toolbar 工具条branding: false,external_plugins: {&＃39;powerpaste&＃39;: &＃39;/tinymce/powerpaste/plugin.min.js&＃39; //word文档黏贴的插件},//上传图片的时候调用后台返回 链接images_upload_handler: async (blobInfo, success, failure) &＃61;> {let files &＃61; blobInfo.blob()let f &＃61; new FormData()f.append(&＃39;file&＃39;, files)try {let d &＃61; await upLoadImg(f)console.log(d.data);success(d.data)} catch (e) {this.$message({type: &＃39;warning&＃39;,message: &＃39;上传失败&＃xff01;服务器错误&＃xff01;&＃39;})}},},myValue: &＃39;&＃39;,}},mounted() {},created() {that &＃61; this},methods: {},watch: {myValue(newValue){this.$emit(&＃39;getVaue&＃39;,newValue&＃43;&＃39;&＃39;)},baseValue(newValue){this.myValue &＃61; newValue}}}</script>
<style scoped lang&＃61;"less"></style>