VUE项目中引入135编辑器

**【前言】前人栽树,后人乘凉 
**
由于之前做过这个功能，但是没有记录，这次再一次开发的时候忘了几步操作,花了半天时间又一次实现，充分知道了好记性不如烂笔头，记录一下分享给大家
==|具体效果如图

 

 

|==百度编辑器嵌套135编辑器/秀米编辑器===|
【上手第一步】
1.百度编辑器官网下载ueditor的文件压缩包 {这里吐槽一下,这玩意百度都不怎么维护了}

【上手第二步】
2.项目目录文件public文件夹存放以下文件：文件结构如下
                      public===|
					            [1] ueditor===|   |*1*|存放解压之后的百度编辑器ueditor文件	
                                 		  [1].在ueditor根目录新建135editor.js 【主要用于弹出135编辑器】
                                          [2].在ueditor目录文件index.html文件中引入  <script type="text/javascript" charset="utf-8" src="./ueditor/135editor.js"></script>
										  [3].在ueditor目录文件index.html文件中 【用来显示135编辑器按钮】
										   .edui-button.edui-for-135editor .edui-button-wrap .edui-button-body .edui-icon{
												  background-image: url("http://static.135editor.com/img/icons/editor-135-icon.png") !important;
												  background-size: 85%;
												  background-position: center;
												  background-repeat: no-repeat;
											  }
										  [4].在ueditor根目录ueditor.config文件中的【toolbars】属性栏中增加 "135editor",
                                          [5].在ueditor根目录下的dialogs的文件夹新建 135editor文件夹
                                          ueditor==|
										            ===[1]dialogs
                                                               ===[2]135editor
													                        ===[3]135EditorDialogPage.html
															  
                                 [2]pluging==|*2*|新建文件夹存放135编辑器html文件/秀米html文件
		                                  ==[1] 135EditorDialogPage.html
				                          ==[2] xiumi-ue-dialog-v5.html
                   

【上手第三步】										  
3.安装百度编辑器 
                 [1]npm i vue-ueditor-wrap
				 [2]mian.js 注入该组件 import VueUeditorWrap from 'vue-ueditor-wrap'
                                       Vue.component('vue-ueditor-wrap', VueUeditorWrap)
			     
  

【上手第四步】
4.在使用编辑器的页面中引入：
                           [1]import VueUeditorWrap from "vue-ueditor-wrap";
						   [2]components: { VueUeditorWrap };
						   [3]<vue-ueditor-wrap   v-model="form.content" :config="myConfig"></vue-ueditor-wrap>
						   [4] data(){    //初始化编辑器
						   return:{
										myConfig: {
										// serverUrl: `${__GATEWAYPATH__}/ueditor/ueditorConfig`, // 上传功能的后端服务器接口地址
										UEDITOR_HOME_URL: "/ueditor/", // 你的UEditor资源存放的路径,相对于打包后的index.html
										autoHeightEnabled: true, // 编辑器是否自动被内容撑高
										autoFloatEnabled: false, // 工具栏是否可以浮动
										initialFrameHeight: 340, // 初始容器高度
										initialFrameWidth: "100%", // 初始容器高度
										enableAutoSave: true, // 关闭自动保存
							 },
						   }
						   }
						   

||||||||||||到此为止135编辑器就可以正常使用了|||||||||====>
???此时会遇到一个问题就是百度编辑器上传图片异常:
 ueditor.all.min.js:9 请求后台配置项http错误，上传功能将不能正常使用！
 
 ===>look look 下面来解决这个问题，首先这个需要后端开发协助配置，上传图片的端口指向后端
 
 【第一步】
  找到ueditor文件中的ueditor.config配置
  [1] ueditor.config.js中
            var URL =window.UEDITOR_HOME_URL ="/public/ueditor/";
            serverUrl:"指向后端上传图片文件的端口ip"
			imageActionName:"指向后端上传图片文件的端口ip"
 【此时此刻大功告成,开发不易加油~】