文档ç®问答中心详情

src/components/wangE.vue

@@ -30,6 +30,10 @@ export default {
     isDisabled: {
       type: Boolean,
       default: false
+    },
+    menu:{
+      type: Array,
+      default: []
     }
   },
   watch: {
@@ -101,6 +105,9 @@ export default {
           // }
         }
       };
+      if(this.menu.length){
+        this.editor.config.menus = this.menu
+      }
       this.editor.config.onchange = html => {
         this.info_ = html; // 绑定当前逐渐地值
         this.$emit("change", this.info_); // 将内容同步到父组件中
@@ -138,9 +145,4 @@ export default {
   border: none!important;
   height: calc(100% - 80px)!important;
 }
-.text {
-  width: 100%;
-  border: 1px solid #ccc;
-  overflow-y: auto;
-}
 </style>

src/components/wangEBd.vue

+<template>
+  <section class="wangeditor_class">
+    <div ref="toolbar" class="toolbar1"></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
+    },
+    full: {
+      type: Boolean,
+      default: true
+    },
+    menu:{
+      type: Array,
+      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);
+      }
+    },
+    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);
+          // }
+        }
+      };
+      if(this.menu.length){
+        this.editor.config.menus = this.menu
+      }
+      this.editor.config.showFullScreen = this.full
+      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;
+}
+.toolbar1{
+  height: 100%;
+}
+.toolbar1 .w-e-toolbar {
+  border-radius: 6px 6px 0 0;
+  border: solid 1px #edeef4!important;
+  padding: 0;
+}
+.toolbar1 .w-e-toolbar .w-e-menu{
+  width: 48px;
+  height: 48px;
+  font-size: 16px;
+}
+.toolbar1 .w-e-text-container {
+  border: solid 1px #edeef4!important;
+  background-color: #fbfbfc!important;
+  border-top:0!important;
+  height: calc(100% - 80px)!important;
+  border-radius: 0 0 6px 6px;
+}
+</style>