From 4ce9492c80733d8deafaf8b401c4bb1a698ec399 Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期四, 01 十二月 2022 14:06:42 +0800
Subject: [PATCH] Default Changelist
---
src/views/accidentManagementSystem/accidentCases/component/wangEditor/index.vue | 279 ++++++++++++++++++++++++++++---------------------------
1 files changed, 141 insertions(+), 138 deletions(-)
diff --git a/src/views/accidentManagementSystem/accidentCases/component/wangEditor/index.vue b/src/views/accidentManagementSystem/accidentCases/component/wangEditor/index.vue
index 9fd7c9e..3953efc 100644
--- a/src/views/accidentManagementSystem/accidentCases/component/wangEditor/index.vue
+++ b/src/views/accidentManagementSystem/accidentCases/component/wangEditor/index.vue
@@ -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);
- }
+ 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>
--
Gitblit v1.9.2