文档管理详情

package.json

@@ -36,6 +36,7 @@
     "vue-router": "^3.0.2",
     "vue-super-flow": "^1.3.2",
     "vuex": "^3.1.0",
+    "wangeditor": "^4.0.5",
     "xterm": "^4.7.0",
     "xterm-addon-fit": "^0.4.0",
     "yaml2json": "^1.0.2"

src/components/wangE.vue

+<template>
+  <section class="wangeditor_class">
+    <div ref="toolbar" class="toolbar"></div>
+  </section>
+</template>
+<script>
+import E from "wangeditor";
+export default {
+  name: "editoritem",
+  data() {
+    return {
+      // uploadPath,
+      editor: null,
+      info_: null
+    };
+  },
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+    isClear: {
+      type: Boolean,
+      default: false
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  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);
+      }
+    },
+    isDisabled(value){
+      console.log(value)
+      this.editor.$textElem.attr("contenteditable", !value);
+    },
+    info_(val){
+      console.log(val);
+      this.$emit("change", val)
+    },
+    
+    //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
+  },
+  mounted() {
+    this.seteditor();
+    this.editor.txt.html(this.value);
+  },
+  methods: {
+    seteditor() {
+      // http://192.168.2.125:8080/admin/storage/create
+      this.editor = new E(this.$refs.toolbar);
+      this.editor.config.uploadImgShowBase64 = false; // base 64 存储图片
+      this.editor.config.uploadImgServer =
+        "/tp-jiwei-pcsvc/display/cigApi/common/uploadFile"; // 配置服务器端地址
+      this.editor.config.uploadImgHeaders = {}; // 自定义 header
+      this.editor.config.uploadFileName = "file"; // 后端接受上传文件的参数名
+      //   this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M
+      this.editor.config.uploadImgMaxLength = 6; // 限制一次最多上传 3 张图片
+      this.editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
+      this.editor.config.uploadImgParams = { category: "图片" };
+
+      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 imgUrl = "/tp-jiwei-pcsvc/display" + result.data.visitPath;
+          console.log(imgUrl);
+          insertImg(imgUrl);
+          // }
+        }
+      };
+      this.editor.config.onchange = html => {
+        this.info_ = html; // 绑定当前逐渐地值
+        this.$emit("change", this.info_); // 将内容同步到父组件中
+      };
+      // 创建富文本编辑器
+      this.editor.create();
+    }
+  }
+};
+</script>
+<style>
+.wangeditor_class{
+  width: 100%;
+}
+.editor {
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+  z-index: 0;
+}
+.toolbar{
+  height: 100%;
+}
+.toolbar .w-e-toolbar {
+  border: none!important;
+  border-bottom: 1px solid #e3e5ef!important;
+  padding: 0;
+}
+.toolbar .w-e-toolbar .w-e-menu{
+  width: 48px;
+  height: 78px;
+  font-size: 16px;
+}
+.toolbar .w-e-text-container {
+  border: none!important;
+  height: calc(100% - 80px)!important;
+}
+.text {
+  width: 100%;
+  border: 1px solid #ccc;
+  overflow-y: auto;
+}
+</style>

src/pages/workbench/fwgl/serviceDetail.vue

@@ -253,6 +253,13 @@
         </div>
       </div>
     </div>
+    <div class="editpage">
+      <wang-e v-model="editstr"></wang-e>
+      <div class="apaas_button" style="overflow:hidden;padding-top:30px;border-top:1px solid #e3e5ef;box-sizing:border-box;">
+        <el-button style="float:right;margin:0 30px;" type="primary" >保存</el-button>
+        <el-button style="float:right" >取消</el-button>
+      </div>
+    </div>
     <dialog-action ref="myConfirm"></dialog-action>
   </div>
 </template>
@@ -267,6 +274,7 @@ import Topology from "@/components/topology.vue";
 import serviceHeader from "@/components/service-header";
 import ListPagination from "@/components/comments-pagination";
 import dialogAction from "@/components/dialog-action";
+import wangE from '@/components/wangE'
 import { getRole, formatDateTime_date } from "@/utils/common";
 import { mapGetters, mapState } from "vuex";
 export default {
@@ -280,6 +288,7 @@ export default {
     serviceHeader,
     dialogAction,
     ListPagination,
+    wangE
   },
   data() {
     return {
@@ -287,6 +296,7 @@ export default {
       process_in_up:true,//是否是服务注册产生的
       perception_in:false,//是否是感知服务
       buy_style: [1],
+      editstr:'<h1>1221312</h1>wuqwyequ827812731731',
       listTotal: 0,
       currentPage: 1,
       pageSize: 10,
@@ -963,7 +973,7 @@ export default {
       if (n == 2) {
         this.getData();
       }
-    },
+    }
   },
   created() {
     if (this.userInfo) {
@@ -1314,6 +1324,19 @@ export default {
   padding: 0 20px;
   height: calc(100% - 55px);
 }
+.editpage{
+  background-color: #fff;
+  height: calc(100% - 20px);
+  margin-bottom: 20px;
+  box-shadow: 0px 3px 6px 0px 
+		#f4f7fc;
+	border-radius: 12px;
+}
+.editpage .wangeditor_class{
+  height: calc(100% - 100px);
+  padding: 0 20px;
+  box-sizing: border-box;
+}
 .info_contain {
   padding: 25px 20px;
   background-color: #fff;