结合vue+elementuiAdmin1.其实在element-admin中已经集成了tinyMce富文本的配置，但是需要在项目需求中自己上传本地图片，像这样（使用Swift搭建楼房）2.思路本项目上传图片：首先将本地图片转为base64格式，传给后台，后台保存后返回给我们一个图片地址。最后我们需要的就是这个地址来显示和保存具体操作：因为安装和基本的富文本配置都是elementui+admin帮我们搞定的。我主要贴出我这次用到的一些工具和配置。1)plugins:constplugins=['advlistanchorautolinkautosavecodecodesamplecolorpickercolorpickercontextmenudirectionalityemoticonsfullscreenhrimageimagetoolsinsertdatetimelinklistsmedianonbreakingnoneditablepagebreakpastepreviewprintsavesearchreplacespellcheckertabfocustabletemplatetextcolortextpatternvisualblocksvisualcharswordcount']2)工具条toolbarconsttoolbar=['searchreplacefontselectformatselectfontsizeselectbolditalicunderlinestrikethroughforecolorbackcolor','hralignleftaligncenteralignrightoutdentindentblockquoteundoredoremoveformatsubscriptsuperscriptcodecodesamplebulletnumlist','tablelinkimagecharmappreviewanchorpagebreakinsertdatetimemediaemoticonsfullscreen']3)最后所有的配置，和图片的上传exportdefault{name:'Tinymce',//components:{editorImage},props:{id:{type:String,default:function(){return'vue-tinymce-'++newDate()+((Math.random()*1000).toFixed(0)+'')}}，值：{类型：字符串，默认值：''}，配置：{类型:Object,default:()=>{return{theme:'modern',height:400}}},toolbar:{type:Array,required:false,default(){return[]}},accept:{默认值:'image/jpeg,image/png',type:String},url:{default:'',type:String},maxSize:{default:2097152,type:Number},withCredentials:{default:false,type:Boolean},menubar:{type:String,default:'fileeditinsertviewformattable'},height:{type:[Number,String],必填:false,default:360},width:{type:[Number,String],required:false,default:'auto'}},data(){return{Value:'',Url:'',upLoadBaseURL:'process.env.VUE_APP_BASE_API',hasChange:false,hasInit:false,tinymceId:this.id,fullscreen:false,languageTypeList:{'zh':'zh_CN','en':'en','es':'es_MX','ja':'ja'},api:{uploadImage:"/api/imageUpload"},}},computed:{containerWidth(){constwidth=this.widthif(/^[\d]+(\.[\d]+)?$/.test(width)){//匹配`100`,`'100'`return`${width}px`}returnwidth}},watch:{value(val){if(!this.hasChange&&this.hasInit){this.$nextTick(()=>window.tinymce.get(this.tinymceId).setContent(val||''))}}},安装(){this.init()},activated(){if(window.tinymce){this.initTinymce()}},deactivated(){this.destroyTinymce()},destroyed(){this.destroyTinymce()},methods:{init(){//从cdn动态加载tinymceload(tinymceCDN,(err)=>{if(err){this.$message.error(err.message)return}this.initTinymce()})},initTinymce(){//const_this=thisconst_this=这个窗口。tinymce.init({选择器：`#${this.tinymceId}`，语言：this.languageTypeList['zh']，高度：this.height，body_class：'panel-body'，object_resizing：false，工具栏：this。toolbar.length>0?this.toolbar:toolbar,menubar:this.menubar,plugins:plugins,end_container_on_empty_block:true,powerpaste_word_import:'clean',code_dialog_height:450,code_dialog_width:1000,advlist_bullet_styles:'square',advlist_number_styles:'default',imagetools_cors_hosts:['www.tinymce.com','codepen.io'],default_link_target:'_blank',link_title:false,//CONFIG:粘贴粘贴paste_retain_style_properties:'all',paste_word_valid_elements:'*[*]',//word需要它paste_data_images:true,//粘贴的时候可以自动上传内容中的图片，很强大的功能paste_convert_word_fake_lists:false,//插入word文档需要这个属性paste_webkit_styles:'all',paste_merge_formats:true,nonbreaking_force_tab:false,paste_auto_cleanup_on_paste:false,//CONFIG:ContentStyle很重要，这个基础样式也要写在最终渲染的页面中，保证一致性。`table`和`img`的问题基本上取决于Thisisforfillingcontent_style:`*{padding:0;保证金：0；}html,body{高度:100%;}img{最大宽度：100%；显示：块；高度：自动；}a{文本装饰：无；}iframe{宽度：100%；}p{行高：1.6;边距：0px；}table{word-wrap:break-word;断字：全部中断；最大宽度：100%；边框：无；边框颜色：#999；}.mce-object-iframe{宽度：100%；框大小：边框框；保证金：0；填充：0；}ul,ol{列表样式位置：内部；}`,insert_button_items:'图片链接|inserttable',//CONFIG:StyleSelectstyle_formats:[{title:'首行缩小',block:'p',styles:{'text-indent':'2em'}},{title:'行高',items:[{title:'1',styles:{'line-height':'1'},inline:'span'},{title:'1.5',styles:{'line-height':'1.5'},内联:'span'},{title:'2',样式:{'line-height':'2'},内联:'span'},{title:'2.5',styles:{'line-height':'2.5'},inline:'span'},{title:'3',styles:{'line-height':'3'},inline:'span'}]}],//FontSelectfont_formats:`MicrosoftYahei=MicrosoftYahei;Mono=andalemono,times;Arial=宋体、Helvetica、无衬线字体；ArialBlack=宋体黑，前卫；BookAntiqua=bookantiqua,palatino;ComicSansMS=comicsansms,sans-serif;CourierNew=couriernew,courier;Georgia=georgia,palatino;Helvetica=黑体字；Impact=影响，芝加哥；符号=符号；Tahoma=tahoma,arial,helvetica,sans-serif;次；投石机MS=trebuchetms,geneva;Verdana=verdana，日内瓦；webdings=webdings;Wingdings=wingdings,zapfdingbats`,//标签页flipv翻页|editimageimageoptions',nonbreaking_force_tab:true,//插入不间断空格需要不间断空格插件init_instance_callback:editor=>{if(_this.value){editor.setContent(_this.value)}_this.hasInit=trueeditor.on('NodeChangeChangeKeyUpSetContent',()=>{this.hasChange=truethis.$emit('input',editor.getContent())})},setup(editor){//自定义功能editor.on('FullscreenStateChanged',(e)=>{_this.fullscreen=e.state})},//....上传图片配置代码images_upload_handler:(blobInfo,成功，失败）=>{varreader=newFileReader();reader.readAsDataURL(blobInfo.blob());reader.onload=function(){raceApi.postImgUrl({image:this.result}).then(res=>{//这里请求上传一张base64格式的图片if(res.code==200){leturl=res.data.domain+res.data.pathsuccess(url)console.log(url);}})}},//prop传入的配置...this.config,content_style:'img{max-width:100%!important}',//初始化赋值主要是为了防止图片拉起来变形（上传的图片在app中显示会变形）setup:(editor)=>{//throw'on-ready'事件钩子editor.on('init',()=>{_this.loading=false_this.$emit('on-ready')editor.setContent(_this.value)})//throw'input'事件钩子，同步值数据editor.on('inputchangeundoredo',()=>{_this.$emit('input',editor.getContent())})}})},destroyTinymce(){consttinymce=window.tinymce.get(this.tinymceId)if(this.fullscreen){tinymce.execCommand('mceFullScreen')}如果(tinymce){tinymce.destroy()}},setContent(value){window.tinymce.get(this.tinymceId).setContent(value)},getContent(){window.tinymce.get(this.tinymceId).getContent()},imageSuccessCBK(arr){const_this=thisarr.forEach(v=>{window.tinymce.get(_this.tinymceId).insertContent(`
