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.htmlautoHeightEnabled: 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"【此时此刻大功告成,开发不易加油~】

VUE项目中引入135编辑器相关推荐

如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
VUE 项目中引入外部js文件（CND引入）
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件引入 :<script src="https://cdnjs.cloudflare.com ...
如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法第一种:/static/page.html 第二种:通过iframe嵌入第一种:/static/page.html 在static或public文件夹下,新 ...
vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...
【EasyExcel】在SpringBoot+VUE项目中引入EasyExcel实现对数据的导出（封装工具类）
在SpringBoot+VUE项目中引入EasyExcel实现导入导出一.引入EasyExcel 通过maven引入,坐标如下: <dependency><groupId>c ...
vue项目中引入monaco editor
monaco-editor概述 monaco-editor 是微软开源的一款web代码编辑器,vscode就是集成monaco-editor来实现的. 官方示例官方文档使用安装 npm安装 np ...
vue项目中引入字体包
问题: 项目开发过程中,因UI的显示要求,需要引入一些字体,那如何引入外部字体呢?很简单,只需要以下3步一下载对应的字体包文件,放置到我们的项目中比如我需要PingFangSC的系列字体,我 ...
从0开始在vue项目中使用quill编辑器
快速.便捷的创建在vue cli中使用quill. 参考资料: quill中文文档在线示例: 点我预览 github仓库地址:https://github.com/font-size/vue-qui ...
vue-cli构建的vue项目中引入stylus文件
stylus是css预处理器.还有另外两种css预处理器语言详解:less.sass. 不懂的可以先看一下这篇文章:stylus预处理入门在vue项目引入stylus css预处理器,可以让我们的c ...

VUE项目中引入135编辑器

VUE项目中引入135编辑器相关推荐

最新文章

热门文章