| | |
| | | |
| | | #VITE_API_URL_OUT = 'http://192.168.0.52:8011/safeplatform-out' |
| | | #本地外包预发接口地址 |
| | | VITE_API_URL_OUT = 'http://192.168.0.52:7021/safeplatform-out' |
| | | |
| | | |
| | | #VITE_API_URL = 'http://192.168.0.52:7021/safeplatform' |
| | | #本地测试接口地址 |
对比新文件 |
| | |
| | | Index: .env.development |
| | | IDEA additional info: |
| | | Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP |
| | | <+># 本地环境\r\nENV = 'development'\r\n\r\nVITE_API_URL = 'http://192.168.0.35:8008'\r\n#李宇飞接口地址\r\n\r\n#VITE_API_URL = 'http://192.168.0.50:8008'\r\n#张凤接口地址\r\n\r\n#VITE_API_URL = 'http://192.168.0.29:8008'\r\n#黄振接口地址\r\n\r\n#VITE_API_URL = 'http://192.168.0.179:8008'\r\n#施正红接口地址\r\n\r\n#VITE_API_URL = 'http://192.168.0.69:8008'\r\n#戚会山接口地址\r\n\r\n#VITE_API_URL = 'http://121.239.169.27:16006/safeplatform'\r\n#线上正式环境接口地址\r\n\r\n#VITE_API_URL_OUT = 'http://121.239.169.27:16006/safeplatform-out'\r\n#线上正式环境外包接口地址\r\n\r\n#VITE_API_URL = 'http://192.168.0.52:8011/safeplatform'\r\n#本地预发接口地址\r\n\r\n#VITE_API_URL_OUT = 'http://192.168.0.52:8011/safeplatform-out'\r\n#本地外包预发接口地址\r\n\r\n#VITE_API_URL = 'http://192.168.0.52:7021/safeplatform'\r\n#本地测试接口地址\r\n\r\n#VITE_API_URL_SOCKET = 'http://192.168.0.52:7021/safeplatform'\r\n#本地测试websocket接口地址\r\n\r\n#VITE_API_URL = 'http://192.168.0.29:7008'\r\n#黄振接口test地址\r\n\r\n#VITE_API_URL_SOCKET = 'http://192.168.0.29:16107'\r\n#黄振websocket test接口地址\r\n\r\n#VITE_API_URL_SOCKET = 'http://192.168.0.29:8018'\r\n#黄振websocket接口地址\r\n |
| | | Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP |
| | | <+>UTF-8 |
| | | =================================================================== |
| | | diff --git a/.env.development b/.env.development |
| | | --- a/.env.development (revision 0203ef4d930ba7a56996debad9d14c9528390fba) |
| | | +++ b/.env.development (date 1661395377427) |
| | | @@ -27,6 +27,8 @@ |
| | | |
| | | #VITE_API_URL_OUT = 'http://192.168.0.52:8011/safeplatform-out' |
| | | #本地外包预发接口地址 |
| | | +VITE_API_URL_OUT = 'http://192.168.0.52:7021/safeplatform-out' |
| | | + |
| | | |
| | | #VITE_API_URL = 'http://192.168.0.52:7021/safeplatform' |
| | | #本地测试接口地址 |
| | | Index: src/views/accidentManagementSystem/accidentCases/component/wangEditor/index.vue |
| | | IDEA additional info: |
| | | Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP |
| | | <+><template>\r\n <div class=\"editor\">\r\n <div ref=\"toolbar\" class=\"toolbar\" :class=\"showTop\"></div>\r\n <div ref=\"editor\" class=\"text\"></div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport E from 'wangeditor';\r\n// import {uploadNew,downloadNew} from '@/api/upload';\r\n// import defaultUrl from \"@/api/defaultUrl\";\r\nexport default {\r\n name: 'editoritem',\r\n data() {\r\n return {\r\n // uploadPath,\r\n editor: null,\r\n info_: null,\r\n // defaultUrl:defaultUrl,\r\n defaultUrl: ''\r\n };\r\n },\r\n model: {\r\n prop: 'value',\r\n event: 'change'\r\n },\r\n props: {\r\n value: {\r\n type: String,\r\n default: ''\r\n },\r\n isClear: {\r\n type: Boolean,\r\n default: false\r\n },\r\n showTop: {\r\n type: String,\r\n default: ''\r\n }\r\n },\r\n watch: {\r\n isClear(val) {\r\n // 触发清除文本域内容\r\n if (val) {\r\n this.editor.txt.clear();\r\n this.info_ = null;\r\n }\r\n },\r\n value: function (value) {\r\n if (value !== this.editor.txt.html()) {\r\n this.editor.txt.html(this.value);\r\n }\r\n }\r\n //value为编辑框输入的内容,这里我监听了一下值,当父组件调用得时候,如果给value赋值了,子组件将会显示父组件赋给的值\r\n },\r\n mounted() {\r\n var that = this;\r\n that.setEditor();\r\n that.editor.txt.html(that.value);\r\n },\r\n methods: {\r\n setEditor() {\r\n var that = this;\r\n this.editor = new E(this.$refs.toolbar, this.$refs.editor);\r\n // 配置菜单\r\n this.editor.config.menus = [\r\n 'head', // 标题\r\n 'bold', // 粗体\r\n 'fontSize', // 字号\r\n 'fontName', // 字体\r\n 'italic', // 斜体\r\n 'underline', // 下划线\r\n 'strikeThrough', // 删除线\r\n 'foreColor', // 文字颜色\r\n 'backColor', // 背景颜色\r\n 'link', // 插入链接\r\n 'list', // 列表\r\n 'justify', // 对齐方式\r\n 'quote', // 引用\r\n 'emoticon', // 表情\r\n // 'image', // 插入图片\r\n 'table', // 表格\r\n // 'video', // 插入视频\r\n 'code', // 插入代码\r\n 'undo', // 撤销\r\n 'redo' // 重复\r\n ];\r\n\r\n //配置上传图片\r\n this.editor.config.uploadImgShowBase64 = false; // base 64 存储图片\r\n this.editor.config.uploadImgServer = 'http://otp.cdinfotech.top/file/upload_images'; // 配置服务器端地址\r\n this.editor.config.uploadImgHeaders = {}; // 自定义 header\r\n this.editor.config.uploadFileName = 'file'; // 后端接受上传文件的参数名\r\n this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M\r\n this.editor.config.uploadImgMaxLength = 1; // 限制一次最多上传 3 张图片\r\n this.editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间\r\n this.editor.config.uploadImgHooks = {\r\n fail: (xhr, editor, result) => {\r\n // 插入图片失败回调\r\n },\r\n success: (xhr, editor, result) => {\r\n // 图片上传成功回调\r\n },\r\n timeout: (xhr, editor) => {\r\n // 网络超时的回调\r\n },\r\n error: (xhr, editor) => {\r\n // 图片上传错误的回调\r\n },\r\n customInsert: (insertImg, result, editor) => {\r\n // 图片上传成功,插入图片的回调\r\n //result为上传图片成功的时候返回的数据,这里我打印了一下发现后台返回的是data:[{url:\"路径的形式\"},...]\r\n // console.log(result.data[0].url)\r\n //insertImg()为插入图片的函数\r\n //循环插入图片\r\n // for (let i = 0; i < 1; i++) {\r\n // console.log(result)\r\n let url = 'http://otp.cdinfotech.top' + result.url;\r\n insertImg(url);\r\n // }\r\n }\r\n };\r\n this.editor.config.customUploadImg = function (files, insert) {\r\n let form = new FormData();\r\n form.append('file', files[0]);\r\n form.append('dir', 'temp1');\r\n // uploadNew(form).then(res=>{\r\n // if(res.result){\r\n // let url = that.defaultUrl+`/upload/downloadNew?path=`+encodeURI(res.data.fileUrl)\r\n // insert(url)\r\n // that.$message(\"上传成功\", 'success');\r\n // }else {\r\n // that.$message.error(\"上传失败\");\r\n // }\r\n //\r\n // })\r\n };\r\n\r\n this.editor.config.onchange = (html) => {\r\n this.info_ = html; // 绑定当前逐渐地值\r\n this.$emit('change', this.info_); // 将内容同步到父组件中\r\n };\r\n // 创建富文本编辑器\r\n this.editor.create();\r\n //是否可编辑\r\n if (this.showTop == 'hiddenClass') {\r\n this.editor.disable();\r\n }\r\n }\r\n }\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n.editor {\r\n /*margin: 0 auto;*/\r\n position: relative;\r\n z-index: 100;\r\n}\r\n.toolbar {\r\n width: 100%;\r\n border: 1px solid #ccc;\r\n}\r\n.text {\r\n border: 1px solid #ccc;\r\n min-height: 250px;\r\n}\r\n.hiddenClass {\r\n display: none;\r\n}\r\n</style>\r\n |
| | | Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP |
| | | <+>UTF-8 |
| | | =================================================================== |
| | | diff --git a/src/views/accidentManagementSystem/accidentCases/component/wangEditor/index.vue b/src/views/accidentManagementSystem/accidentCases/component/wangEditor/index.vue |
| | | --- a/src/views/accidentManagementSystem/accidentCases/component/wangEditor/index.vue (revision 0203ef4d930ba7a56996debad9d14c9528390fba) |
| | | +++ b/src/views/accidentManagementSystem/accidentCases/component/wangEditor/index.vue (date 1661395034096) |
| | | @@ -1,171 +1,174 @@ |
| | | <template> |
| | | - <div class="editor"> |
| | | - <div ref="toolbar" class="toolbar" :class="showTop"></div> |
| | | - <div ref="editor" class="text"></div> |
| | | + <div class="editor"> |
| | | + <div ref="toolbar" class="toolbar" :class="showTop"> |
| | | + </div> |
| | | + <div ref="editor" class="text"> |
| | | </div> |
| | | + </div> |
| | | </template> |
| | | |
| | | <script> |
| | | -import E from 'wangeditor'; |
| | | -// import {uploadNew,downloadNew} from '@/api/upload'; |
| | | -// import defaultUrl from "@/api/defaultUrl"; |
| | | -export default { |
| | | + import E from 'wangeditor' |
| | | + // import {uploadNew,downloadNew} from '@/api/upload'; |
| | | + // import defaultUrl from "@/api/defaultUrl"; |
| | | + export default { |
| | | name: 'editoritem', |
| | | data() { |
| | | - return { |
| | | - // uploadPath, |
| | | - editor: null, |
| | | - info_: null, |
| | | - // defaultUrl:defaultUrl, |
| | | - defaultUrl: '' |
| | | - }; |
| | | + return { |
| | | + // uploadPath, |
| | | + editor: null, |
| | | + info_: null, |
| | | + // defaultUrl:defaultUrl, |
| | | + defaultUrl:'', |
| | | + } |
| | | }, |
| | | model: { |
| | | - prop: 'value', |
| | | - event: 'change' |
| | | + prop: 'value', |
| | | + event: 'change' |
| | | }, |
| | | props: { |
| | | - value: { |
| | | - type: String, |
| | | - default: '' |
| | | - }, |
| | | - isClear: { |
| | | - type: Boolean, |
| | | - default: false |
| | | - }, |
| | | - showTop: { |
| | | - type: String, |
| | | - default: '' |
| | | - } |
| | | + value: { |
| | | + type: String, |
| | | + default: '' |
| | | + }, |
| | | + isClear: { |
| | | + type: Boolean, |
| | | + default: false |
| | | + }, |
| | | + showTop: { |
| | | + type: String, |
| | | + default: '' |
| | | + }, |
| | | }, |
| | | watch: { |
| | | - isClear(val) { |
| | | - // 触发清除文本域内容 |
| | | - if (val) { |
| | | - this.editor.txt.clear(); |
| | | - this.info_ = null; |
| | | - } |
| | | - }, |
| | | - value: function (value) { |
| | | - if (value !== this.editor.txt.html()) { |
| | | - this.editor.txt.html(this.value); |
| | | - } |
| | | - } |
| | | - //value为编辑框输入的内容,这里我监听了一下值,当父组件调用得时候,如果给value赋值了,子组件将会显示父组件赋给的值 |
| | | + isClear(val) { |
| | | + // 触发清除文本域内容 |
| | | + if (val) { |
| | | + this.editor.txt.clear() |
| | | + this.info_ = null |
| | | + } |
| | | + }, |
| | | + value: function(value) { |
| | | + if (value !== this.editor.txt.html()) { |
| | | + this.editor.txt.html(this.value) |
| | | + } |
| | | + } |
| | | + //value为编辑框输入的内容,这里我监听了一下值,当父组件调用得时候,如果给value赋值了,子组件将会显示父组件赋给的值 |
| | | }, |
| | | mounted() { |
| | | - var that = this; |
| | | - that.setEditor(); |
| | | - that.editor.txt.html(that.value); |
| | | + var that =this |
| | | + that.setEditor() |
| | | + that.editor.txt.html(that.value) |
| | | }, |
| | | methods: { |
| | | - setEditor() { |
| | | - var that = this; |
| | | - this.editor = new E(this.$refs.toolbar, this.$refs.editor); |
| | | - // 配置菜单 |
| | | - this.editor.config.menus = [ |
| | | - 'head', // 标题 |
| | | - 'bold', // 粗体 |
| | | - 'fontSize', // 字号 |
| | | - 'fontName', // 字体 |
| | | - 'italic', // 斜体 |
| | | - 'underline', // 下划线 |
| | | - 'strikeThrough', // 删除线 |
| | | - 'foreColor', // 文字颜色 |
| | | - 'backColor', // 背景颜色 |
| | | - 'link', // 插入链接 |
| | | - 'list', // 列表 |
| | | - 'justify', // 对齐方式 |
| | | - 'quote', // 引用 |
| | | - 'emoticon', // 表情 |
| | | - // 'image', // 插入图片 |
| | | - 'table', // 表格 |
| | | - // 'video', // 插入视频 |
| | | - 'code', // 插入代码 |
| | | - 'undo', // 撤销 |
| | | - 'redo' // 重复 |
| | | - ]; |
| | | + setEditor() { |
| | | + var that =this |
| | | + this.editor = new E(this.$refs.toolbar, this.$refs.editor) |
| | | + // 配置菜单 |
| | | + this.editor.config.menus = [ |
| | | + 'head', // 标题 |
| | | + 'bold', // 粗体 |
| | | + 'fontSize', // 字号 |
| | | + 'fontName', // 字体 |
| | | + 'italic', // 斜体 |
| | | + 'underline', // 下划线 |
| | | + 'strikeThrough', // 删除线 |
| | | + 'foreColor', // 文字颜色 |
| | | + 'backColor', // 背景颜色 |
| | | + 'link', // 插入链接 |
| | | + 'list', // 列表 |
| | | + 'justify', // 对齐方式 |
| | | + 'quote', // 引用 |
| | | + 'emoticon', // 表情 |
| | | + // 'image', // 插入图片 |
| | | + 'table', // 表格 |
| | | + // 'video', // 插入视频 |
| | | + 'code', // 插入代码 |
| | | + 'undo', // 撤销 |
| | | + 'redo' // 重复 |
| | | + ] |
| | | |
| | | - //配置上传图片 |
| | | - this.editor.config.uploadImgShowBase64 = false; // base 64 存储图片 |
| | | - this.editor.config.uploadImgServer = 'http://otp.cdinfotech.top/file/upload_images'; // 配置服务器端地址 |
| | | - this.editor.config.uploadImgHeaders = {}; // 自定义 header |
| | | - this.editor.config.uploadFileName = 'file'; // 后端接受上传文件的参数名 |
| | | - this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M |
| | | - this.editor.config.uploadImgMaxLength = 1; // 限制一次最多上传 3 张图片 |
| | | - this.editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间 |
| | | - this.editor.config.uploadImgHooks = { |
| | | - fail: (xhr, editor, result) => { |
| | | - // 插入图片失败回调 |
| | | - }, |
| | | - success: (xhr, editor, result) => { |
| | | - // 图片上传成功回调 |
| | | - }, |
| | | - timeout: (xhr, editor) => { |
| | | - // 网络超时的回调 |
| | | - }, |
| | | - error: (xhr, editor) => { |
| | | - // 图片上传错误的回调 |
| | | - }, |
| | | - customInsert: (insertImg, result, editor) => { |
| | | - // 图片上传成功,插入图片的回调 |
| | | - //result为上传图片成功的时候返回的数据,这里我打印了一下发现后台返回的是data:[{url:"路径的形式"},...] |
| | | - // console.log(result.data[0].url) |
| | | - //insertImg()为插入图片的函数 |
| | | - //循环插入图片 |
| | | - // for (let i = 0; i < 1; i++) { |
| | | - // console.log(result) |
| | | - let url = 'http://otp.cdinfotech.top' + result.url; |
| | | - insertImg(url); |
| | | - // } |
| | | - } |
| | | - }; |
| | | - this.editor.config.customUploadImg = function (files, insert) { |
| | | - let form = new FormData(); |
| | | - form.append('file', files[0]); |
| | | - form.append('dir', 'temp1'); |
| | | - // uploadNew(form).then(res=>{ |
| | | - // if(res.result){ |
| | | - // let url = that.defaultUrl+`/upload/downloadNew?path=`+encodeURI(res.data.fileUrl) |
| | | - // insert(url) |
| | | - // that.$message("上传成功", 'success'); |
| | | - // }else { |
| | | - // that.$message.error("上传失败"); |
| | | - // } |
| | | - // |
| | | - // }) |
| | | - }; |
| | | + //配置上传图片 |
| | | + this.editor.config.uploadImgShowBase64 = false // base 64 存储图片 |
| | | + this.editor.config.uploadImgServer = 'http://otp.cdinfotech.top/file/upload_images'// 配置服务器端地址 |
| | | + this.editor.config.uploadImgHeaders = { }// 自定义 header |
| | | + this.editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名 |
| | | + this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M |
| | | + this.editor.config.uploadImgMaxLength = 1 // 限制一次最多上传 3 张图片 |
| | | + this.editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间 |
| | | + this.editor.config.uploadImgHooks = { |
| | | + fail: (xhr, editor, result) => { |
| | | + // 插入图片失败回调 |
| | | + }, |
| | | + success: (xhr, editor, result) => { |
| | | + // 图片上传成功回调 |
| | | + }, |
| | | + timeout: (xhr, editor) => { |
| | | + // 网络超时的回调 |
| | | + }, |
| | | + error: (xhr, editor) => { |
| | | + // 图片上传错误的回调 |
| | | + }, |
| | | + customInsert: (insertImg, result, editor) => { |
| | | + // 图片上传成功,插入图片的回调 |
| | | + //result为上传图片成功的时候返回的数据,这里我打印了一下发现后台返回的是data:[{url:"路径的形式"},...] |
| | | + // console.log(result.data[0].url) |
| | | + //insertImg()为插入图片的函数 |
| | | + //循环插入图片 |
| | | + // for (let i = 0; i < 1; i++) { |
| | | + // console.log(result) |
| | | + let url = "http://otp.cdinfotech.top"+result.url |
| | | + insertImg(url) |
| | | + // } |
| | | + } |
| | | + } |
| | | + this.editor.config.customUploadImg = function (files, insert) { |
| | | + let form = new FormData(); |
| | | + form.append('file', files[0]); |
| | | + form.append('dir', 'temp1') |
| | | + // uploadNew(form).then(res=>{ |
| | | + // if(res.result){ |
| | | + // let url = that.defaultUrl+`/upload/downloadNew?path=`+encodeURI(res.data.fileUrl) |
| | | + // insert(url) |
| | | + // that.$message("上传成功", 'success'); |
| | | + // }else { |
| | | + // that.$message.error("上传失败"); |
| | | + // } |
| | | + // |
| | | + // }) |
| | | + } |
| | | |
| | | - this.editor.config.onchange = (html) => { |
| | | - this.info_ = html; // 绑定当前逐渐地值 |
| | | - this.$emit('change', this.info_); // 将内容同步到父组件中 |
| | | - }; |
| | | - // 创建富文本编辑器 |
| | | - this.editor.create(); |
| | | - //是否可编辑 |
| | | - if (this.showTop == 'hiddenClass') { |
| | | - this.editor.disable(); |
| | | - } |
| | | - } |
| | | + this.editor.config.onchange = (html) => { |
| | | + this.info_ = html // 绑定当前逐渐地值 |
| | | + this.$emit('change', this.info_) // 将内容同步到父组件中 |
| | | + } |
| | | + // 创建富文本编辑器 |
| | | + this.editor.create() |
| | | + //是否可编辑 |
| | | + if (this.showTop=='hiddenClass'){ |
| | | + this.editor.disable() |
| | | + } |
| | | + } |
| | | } |
| | | -}; |
| | | + } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | -.editor { |
| | | + .editor { |
| | | /*margin: 0 auto;*/ |
| | | position: relative; |
| | | z-index: 100; |
| | | -} |
| | | -.toolbar { |
| | | + } |
| | | + .toolbar { |
| | | width: 100%; |
| | | border: 1px solid #ccc; |
| | | -} |
| | | -.text { |
| | | + } |
| | | + .text { |
| | | border: 1px solid #ccc; |
| | | min-height: 250px; |
| | | -} |
| | | -.hiddenClass { |
| | | + } |
| | | + .hiddenClass{ |
| | | display: none; |
| | | -} |
| | | + |
| | | + } |
| | | </style> |
对比新文件 |
| | |
| | | <changelist name="Uncommitted_changes_before_Update_at_2022_8_25_10_44_[Default_Changelist]" date="1661395456701" recycled="true" deleted="true"> |
| | | <option name="PATH" value="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Update_at_2022_8_25_10_44_[Default_Changelist]/shelved.patch" /> |
| | | <option name="DESCRIPTION" value="Uncommitted changes before Update at 2022/8/25 10:44 [Default Changelist]" /> |
| | | </changelist> |
| | |
| | | <template> |
| | | <div class="editor"> |
| | | <div ref="toolbar" class="toolbar" :class="showTop"></div> |
| | | <div ref="editor" class="text"></div> |
| | | <div class="editor"> |
| | | <div ref="toolbar" class="toolbar" :class="showTop"> |
| | | </div> |
| | | <div ref="editor" class="text"> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import E from 'wangeditor'; |
| | | // import {uploadNew,downloadNew} from '@/api/upload'; |
| | | // import defaultUrl from "@/api/defaultUrl"; |
| | | export default { |
| | | import E from 'wangeditor' |
| | | // import {uploadNew,downloadNew} from '@/api/upload'; |
| | | // import defaultUrl from "@/api/defaultUrl"; |
| | | export default { |
| | | name: 'editoritem', |
| | | data() { |
| | | return { |
| | | // uploadPath, |
| | | editor: null, |
| | | info_: null, |
| | | // defaultUrl:defaultUrl, |
| | | defaultUrl: '' |
| | | }; |
| | | return { |
| | | // uploadPath, |
| | | editor: null, |
| | | info_: null, |
| | | // defaultUrl:defaultUrl, |
| | | defaultUrl:'', |
| | | } |
| | | }, |
| | | model: { |
| | | prop: 'value', |
| | | event: 'change' |
| | | prop: 'value', |
| | | event: 'change' |
| | | }, |
| | | props: { |
| | | value: { |
| | | type: String, |
| | | default: '' |
| | | }, |
| | | isClear: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | showTop: { |
| | | type: String, |
| | | default: '' |
| | | } |
| | | value: { |
| | | type: String, |
| | | default: '' |
| | | }, |
| | | isClear: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | showTop: { |
| | | type: String, |
| | | default: '' |
| | | }, |
| | | }, |
| | | watch: { |
| | | isClear(val) { |
| | | // 触发清除文本域内容 |
| | | if (val) { |
| | | this.editor.txt.clear(); |
| | | this.info_ = null; |
| | | } |
| | | }, |
| | | value: function (value) { |
| | | if (value !== this.editor.txt.html()) { |
| | | this.editor.txt.html(this.value); |
| | | } |
| | | isClear(val) { |
| | | // 触发清除文本域内容 |
| | | if (val) { |
| | | this.editor.txt.clear() |
| | | this.info_ = null |
| | | } |
| | | //value为编辑框输入的内容,这里我监听了一下值,当父组件调用得时候,如果给value赋值了,子组件将会显示父组件赋给的值 |
| | | }, |
| | | value: function(value) { |
| | | if (value !== this.editor.txt.html()) { |
| | | this.editor.txt.html(this.value) |
| | | } |
| | | } |
| | | //value为编辑框输入的内容,这里我监听了一下值,当父组件调用得时候,如果给value赋值了,子组件将会显示父组件赋给的值 |
| | | }, |
| | | mounted() { |
| | | var that = this; |
| | | that.setEditor(); |
| | | that.editor.txt.html(that.value); |
| | | var that =this |
| | | that.setEditor() |
| | | that.editor.txt.html(that.value) |
| | | }, |
| | | methods: { |
| | | setEditor() { |
| | | var that = this; |
| | | this.editor = new E(this.$refs.toolbar, this.$refs.editor); |
| | | // 配置菜单 |
| | | this.editor.config.menus = [ |
| | | 'head', // 标题 |
| | | 'bold', // 粗体 |
| | | 'fontSize', // 字号 |
| | | 'fontName', // 字体 |
| | | 'italic', // 斜体 |
| | | 'underline', // 下划线 |
| | | 'strikeThrough', // 删除线 |
| | | 'foreColor', // 文字颜色 |
| | | 'backColor', // 背景颜色 |
| | | 'link', // 插入链接 |
| | | 'list', // 列表 |
| | | 'justify', // 对齐方式 |
| | | 'quote', // 引用 |
| | | 'emoticon', // 表情 |
| | | // 'image', // 插入图片 |
| | | 'table', // 表格 |
| | | // 'video', // 插入视频 |
| | | 'code', // 插入代码 |
| | | 'undo', // 撤销 |
| | | 'redo' // 重复 |
| | | ]; |
| | | setEditor() { |
| | | var that =this |
| | | this.editor = new E(this.$refs.toolbar, this.$refs.editor) |
| | | // 配置菜单 |
| | | this.editor.config.menus = [ |
| | | 'head', // 标题 |
| | | 'bold', // 粗体 |
| | | 'fontSize', // 字号 |
| | | 'fontName', // 字体 |
| | | 'italic', // 斜体 |
| | | 'underline', // 下划线 |
| | | 'strikeThrough', // 删除线 |
| | | 'foreColor', // 文字颜色 |
| | | 'backColor', // 背景颜色 |
| | | 'link', // 插入链接 |
| | | 'list', // 列表 |
| | | 'justify', // 对齐方式 |
| | | 'quote', // 引用 |
| | | 'emoticon', // 表情 |
| | | // 'image', // 插入图片 |
| | | 'table', // 表格 |
| | | // 'video', // 插入视频 |
| | | 'code', // 插入代码 |
| | | 'undo', // 撤销 |
| | | 'redo' // 重复 |
| | | ] |
| | | |
| | | //配置上传图片 |
| | | this.editor.config.uploadImgShowBase64 = false; // base 64 存储图片 |
| | | this.editor.config.uploadImgServer = 'http://otp.cdinfotech.top/file/upload_images'; // 配置服务器端地址 |
| | | this.editor.config.uploadImgHeaders = {}; // 自定义 header |
| | | this.editor.config.uploadFileName = 'file'; // 后端接受上传文件的参数名 |
| | | this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M |
| | | this.editor.config.uploadImgMaxLength = 1; // 限制一次最多上传 3 张图片 |
| | | this.editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间 |
| | | this.editor.config.uploadImgHooks = { |
| | | fail: (xhr, editor, result) => { |
| | | // 插入图片失败回调 |
| | | }, |
| | | success: (xhr, editor, result) => { |
| | | // 图片上传成功回调 |
| | | }, |
| | | timeout: (xhr, editor) => { |
| | | // 网络超时的回调 |
| | | }, |
| | | error: (xhr, editor) => { |
| | | // 图片上传错误的回调 |
| | | }, |
| | | customInsert: (insertImg, result, editor) => { |
| | | // 图片上传成功,插入图片的回调 |
| | | //result为上传图片成功的时候返回的数据,这里我打印了一下发现后台返回的是data:[{url:"路径的形式"},...] |
| | | // console.log(result.data[0].url) |
| | | //insertImg()为插入图片的函数 |
| | | //循环插入图片 |
| | | // for (let i = 0; i < 1; i++) { |
| | | // console.log(result) |
| | | let url = 'http://otp.cdinfotech.top' + result.url; |
| | | insertImg(url); |
| | | // } |
| | | } |
| | | }; |
| | | this.editor.config.customUploadImg = function (files, insert) { |
| | | let form = new FormData(); |
| | | form.append('file', files[0]); |
| | | form.append('dir', 'temp1'); |
| | | // uploadNew(form).then(res=>{ |
| | | // if(res.result){ |
| | | // let url = that.defaultUrl+`/upload/downloadNew?path=`+encodeURI(res.data.fileUrl) |
| | | // insert(url) |
| | | // that.$message("上传成功", 'success'); |
| | | // }else { |
| | | // that.$message.error("上传失败"); |
| | | // } |
| | | // |
| | | // }) |
| | | }; |
| | | |
| | | this.editor.config.onchange = (html) => { |
| | | this.info_ = html; // 绑定当前逐渐地值 |
| | | this.$emit('change', this.info_); // 将内容同步到父组件中 |
| | | }; |
| | | // 创建富文本编辑器 |
| | | this.editor.create(); |
| | | //是否可编辑 |
| | | if (this.showTop == 'hiddenClass') { |
| | | this.editor.disable(); |
| | | } |
| | | //配置上传图片 |
| | | this.editor.config.uploadImgShowBase64 = false // base 64 存储图片 |
| | | this.editor.config.uploadImgServer = 'http://otp.cdinfotech.top/file/upload_images'// 配置服务器端地址 |
| | | this.editor.config.uploadImgHeaders = { }// 自定义 header |
| | | this.editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名 |
| | | this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M |
| | | this.editor.config.uploadImgMaxLength = 1 // 限制一次最多上传 3 张图片 |
| | | this.editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间 |
| | | this.editor.config.uploadImgHooks = { |
| | | fail: (xhr, editor, result) => { |
| | | // 插入图片失败回调 |
| | | }, |
| | | success: (xhr, editor, result) => { |
| | | // 图片上传成功回调 |
| | | }, |
| | | timeout: (xhr, editor) => { |
| | | // 网络超时的回调 |
| | | }, |
| | | error: (xhr, editor) => { |
| | | // 图片上传错误的回调 |
| | | }, |
| | | customInsert: (insertImg, result, editor) => { |
| | | // 图片上传成功,插入图片的回调 |
| | | //result为上传图片成功的时候返回的数据,这里我打印了一下发现后台返回的是data:[{url:"路径的形式"},...] |
| | | // console.log(result.data[0].url) |
| | | //insertImg()为插入图片的函数 |
| | | //循环插入图片 |
| | | // for (let i = 0; i < 1; i++) { |
| | | // console.log(result) |
| | | let url = "http://otp.cdinfotech.top"+result.url |
| | | insertImg(url) |
| | | // } |
| | | } |
| | | } |
| | | this.editor.config.customUploadImg = function (files, insert) { |
| | | let form = new FormData(); |
| | | form.append('file', files[0]); |
| | | form.append('dir', 'temp1') |
| | | // uploadNew(form).then(res=>{ |
| | | // if(res.result){ |
| | | // let url = that.defaultUrl+`/upload/downloadNew?path=`+encodeURI(res.data.fileUrl) |
| | | // insert(url) |
| | | // that.$message("上传成功", 'success'); |
| | | // }else { |
| | | // that.$message.error("上传失败"); |
| | | // } |
| | | // |
| | | // }) |
| | | } |
| | | |
| | | this.editor.config.onchange = (html) => { |
| | | this.info_ = html // 绑定当前逐渐地值 |
| | | this.$emit('change', this.info_) // 将内容同步到父组件中 |
| | | } |
| | | // 创建富文本编辑器 |
| | | this.editor.create() |
| | | //是否可编辑 |
| | | if (this.showTop=='hiddenClass'){ |
| | | this.editor.disable() |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .editor { |
| | | .editor { |
| | | /*margin: 0 auto;*/ |
| | | position: relative; |
| | | z-index: 100; |
| | | } |
| | | .toolbar { |
| | | } |
| | | .toolbar { |
| | | width: 100%; |
| | | border: 1px solid #ccc; |
| | | } |
| | | .text { |
| | | } |
| | | .text { |
| | | border: 1px solid #ccc; |
| | | min-height: 250px; |
| | | } |
| | | .hiddenClass { |
| | | } |
| | | .hiddenClass{ |
| | | display: none; |
| | | } |
| | | |
| | | } |
| | | </style> |