Halaman utama Jelajahi Bantuan
Daftar Masuk
yin_yu820
/
HS_MZAP
1
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

完成了富文本编辑器功能

LuChongMei 2 tahun lalu
induk
39da2095f3
melakukan
cc6b79180a
7 mengubah file dengan 79 tambahan dan 100 penghapusan
Tampilan Split Tampilkan Statistik Diff
  1. 12 7
      public/index.html
  2. 13 21
      src/components/editor/WangEditor.vue
  3. 3 3
      src/utils/config.js
  4. 10 3
      src/views/activityMan/placeactivity/placeActivityView.vue
  5. 1 1
      src/views/activityMan/selfMeetingReport/selfMeetingInfo.vue
  6. 23 48
      src/views/activityMan/selfMeetingReport/selfMeetingView.vue
  7. 17 17
      vue.config.js

+ 12 - 7
public/index.html
Tampilan Berkas 

@@ -1,20 +1,25 @@
 
 <!DOCTYPE html>
 
 <html lang="">
 
-  <head>
 
+
 
+<head>
 
     <meta charset="utf-8">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
-    <title><%= htmlWebpackPlugin.options.title %></title>
 
+    <title>
 
+        <%= htmlWebpackPlugin.options.title %>
 
+    </title>
 
 
     <!--小程序SDK 只有在小程序容器中才能加载到 -->
 
-	  <!-- <script src="shinemosdk://20000/index.js"></script> -->
 
-  </head>
 
-  <body>
 
+    <script src="shinemosdk://20000/index.js"></script>
 
+</head>
 
+
 
+<body>
 
     <noscript>
 
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 
     </noscript>
 
     <div id="app"></div>
 
     <!-- built files will be auto injected -->
 
-  </body>
 
-</html>
 
+</body>
 
+
 
+</html>

+ 13 - 21
src/components/editor/WangEditor.vue
Tampilan Berkas 

@@ -1,11 +1,6 @@
 
 <template>
 
-   <div class="editor" style="min-width:100px; padding-right:10px">
 
-    <div ref="toolbar" class="toolbar">
 
-    </div>
 
-    <div ref="editor" class="wtext">
 
-    </div>
 
-  </div>
 
-  </template>
 
+  <div id="editor" style="min-width: 100px; padding-right: 10px"></div>
 
+</template>
 
   
   <script>
 
 import E from "wangeditor";
 
@@ -18,8 +13,8 @@ export default {
 
     };
 
   },
 
   model: {
 
-    prop: "value",
 
-    event: "change",
 
+    prop: "modelValue",
 
+    event: "update:modelValue",
 
   },
 
   props: {
 
     isClear: {
 
@@ -45,8 +40,10 @@ export default {
 
       this.editor.txt.html(val);
 
     },
 
     seteditor() {
 
-      this.editor = new E(this.$refs.toolbar, this.$refs.editor);
 
-      this.editor.customConfig.placeholder = "请输入内容";
 
+      this.editor = new E("#editor");
 
+      this.editor.customConfig.placeholder = "请输入内容....";
 
+      this.editor.customConfig.zIndex = 500;
 
+      this.editor.customConfig.height = 150;
 
       this.editor.customConfig.uploadImgShowBase64 = true; // base 64 存储图片
 
       this.editor.customConfig.uploadImgServer = ""; // 配置服务器端地址
 
       this.editor.customConfig.uploadImgHeaders = {}; // 自定义 header
 
@@ -77,7 +74,7 @@ export default {
 
       };
 
       this.editor.customConfig.onchange = (html) => {
 
         this.info_ = html; // 绑定当前逐渐地值
 
-        this.$emit("change", this.info_); // 将内容同步到父组件中
 
+        this.$emit("update:modelValue", this.info_); // 将内容同步到父组件中
 
       };
 
       // 创建富文本编辑器
 
       this.editor.create();
 
@@ -90,15 +87,10 @@ export default {
 
 </script>
 
   
 <style lang="css">
 
-.editor {
 
-  width: 98%;
 
+#editor {
 
+  width: 100%;
 
+  height: 150px;
 
   margin: 0 auto;
 
 }
 
-.toolbar {
 
-  border: 1px solid #ccc;
 
-}
 
-.wtext {
 
-  border: 1px solid #ccc;
 
-  height: 100px;
 
-}
 
+
 
 </style>

+ 3 - 3
src/utils/config.js
Tampilan Berkas 

@@ -1,9 +1,9 @@
 
 let APP_SERVER_URL = ""
 
 
-if(process.env.NODE_ENV === 'development'){
 
+if (process.env.NODE_ENV === 'development') {
 
     // 开发环境
 
-    APP_SERVER_URL = 'http://localhost:8084'
 
-}else{
 
+    APP_SERVER_URL = 'http://192.168.139.86:8084'
 
+} else {
 
     // 生产环境
 
     APP_SERVER_URL = 'http://123.57.226.179:8010/hs'
 
 }

+ 10 - 3
src/views/activityMan/placeactivity/placeActivityView.vue
Tampilan Berkas 

@@ -105,7 +105,6 @@
 
           label="报告人:"
 
           placeholder="请选择报告人"
 
           input-align="right"
 
-          right-icon="arrow-down"
 
         />
 
       </van-cell-group>
 
       <van-cell-group>
 
@@ -221,7 +220,7 @@
 
 </template>
 
 
 <script>
 
-import { ref, onMounted } from "vue";
 
+import { ref, onMounted, computed } from "vue";
 
 import personList from "../personList.vue";
 
 import placeActivityServer from "@/api/placeActivity/placeActivityServer";
 
 import tools from "@/api/sys/tools";
 
@@ -229,6 +228,7 @@ import UserManage from "@/api/user/UserManage";
 
 import { useRoute } from "vue-router";
 
 // 富文本编辑器
 
 import WangEditor from "@/components/editor/WangEditor";
 
+import { useStore } from "vuex";
 
 export default {
 
   components: { personList, WangEditor },
 
   setup() {
 
@@ -270,13 +270,18 @@ export default {
 
       state: "0",
 
       assessment: "0",
 
     });
 
+    // 富文本编辑器
 
     const subjectContentEditor = ref(null);
 
+    // 获取当前登录用户
 
+    const store = useStore();
 
+    const user = computed(() => store.state.user);
 
     // 根据路由初始化
 
     let route = useRoute();
 
     onMounted(() => {
 
       if (route.query.id) {
 
         new placeActivityServer().queryById(route.query.id).then((data) => {
 
           placeActivity.value = data;
 
+          placeActivity.value.reporter = user;
 
           let ids = data.knownList.id.split(",");
 
           placeActivity.value.knownList.name = "";
 
           ids.forEach((item) => {
 
@@ -288,7 +293,8 @@ export default {
 
           isLoading.value = false;
 
         });
 
       } else {
 
-        subjectContentEditor.value.init("");
 
+        subjectContentEditor.value.init(placeActivity.value.subjectContent);
 
+        placeActivity.value.reporter = user;
 
         isLoading.value = false;
 
       }
 
     });
 
@@ -377,6 +383,7 @@ export default {
 
       new tools()
 
         .uploadFile(file, `reporting/reportingActivities`)
 
         .then(({ data }) => {
 
+          fileList.value = [];
 
           fileList.value.push(data);
 
           placeActivity.value.safetyPlan = data.url;
 
         });

+ 1 - 1
src/views/activityMan/selfMeetingReport/selfMeetingInfo.vue
Tampilan Berkas 

@@ -37,7 +37,7 @@ export default {
 
     };
 
     // 加载
 
     let isLoading = ref(true);
 
-    // 异常人员信息
 
+    // 私设聚会点信息
 
     let inputForm = ref({
 
       id: "",
 
       place: "320900",

+ 23 - 48
src/views/activityMan/selfMeetingReport/selfMeetingView.vue
Tampilan Berkas 

@@ -101,19 +101,15 @@
 
         </van-dialog>
 
       </van-cell-group>
 
       <van-cell-group>
 
-        <div class="rowTextArea">
 
-          <van-field
 
-            v-model="inputForm.into"
 
-            center
 
-            label="内容:"
 
-            label-align="top"
 
-          />
 
-          <div name="editor" id="editor" ref="editor"></div>
 
-        </div>
 
+        <van-field label="内容:" label-align="top">
 
+          <template #input>
 
+            <wang-editor ref="contentEditor" v-model="inputForm.content" />
 
+          </template>
 
+        </van-field>
 
       </van-cell-group>
 
     </div>
 
     <div class="subbtn">
 
-      <van-button type="primary">提交</van-button>
 
+      <van-button type="primary" @click="submit">提交</van-button>
 
       <van-button type="default" hairline>取消</van-button>
 
     </div>
 
   </div>
 
@@ -127,9 +123,9 @@ import PrivatePartyPointService from "@/api/privateparty/PrivatePartyPointServic
 
 import UserManage from "@/api/user/UserManage";
 
 import { useRoute } from "vue-router";
 
 // 富文本编辑器
 
-import EWangEditor from "wangeditor";
 
+import WangEditor from "@/components/editor/WangEditor";
 
 export default {
 
-  components: { personList },
 
+  components: { personList, WangEditor },
 
   setup() {
 
     // 加载
 
     let isLoading = ref(true);
 
@@ -157,7 +153,7 @@ export default {
 
       state: "0",
 
       assessment: "0",
 
     });
 
-
 
+    const contentEditor = ref(null);
 
     let route = useRoute();
 
     onMounted(() => {
 
       // 根据路由初始化
 
@@ -173,37 +169,13 @@ export default {
 
                 inputForm.value.relatedPersons.name += data.name + ",";
 
               });
 
             });
 
+            contentEditor.value.init(inputForm.value.content);
 
             isLoading.value = false;
 
           });
 
       } else {
 
+        contentEditor.value.init(inputForm.value.content);
 
         isLoading.value = false;
 
       }
 
-      // 富文本编辑器
 
-      let editor = new EWangEditor("#editor");
 
-      editor.config.uploadImgShowBase64 = true;
 
-      editor.config.onchangeTimeout = 400;
 
-
 
-      editor.config.customAlert = (err) => {
 
-        console.log(err);
 
-      };
 
-
 
-      editor.customConfig = editor.customConfig
 
-        ? editor.customConfig
 
-        : editor.config;
 
-
 
-      editor.customConfig.onchange = (html) => {
 
-        data.editorContent = html;
 
-        console.log(html);
 
-      };
 
-      //以下为新增
 
-      const menuItem = [
 
-        //工具栏里有哪些工具
 
-        "image",
 
-      ];
 
-      editor.config.menus = [...menuItem]; /* 应用设置好的工具栏 */
 
-      editor.config.height = 100; //你可能发现这个编辑器是没法用样式调高度的?
 
-      //新增至此
 
-      editor.create();
 
     });
 
     // 获取活动时间
 
     let showAct = ref(false);
 
@@ -258,6 +230,13 @@ export default {
 
         .map((option) => option.name)
 
         .join("/");
 
     };
 
+    // // 富文本传值
 
+    // const change = (val)=>{
 
+    //   console.log("富文本数据",val);
 
+    // };
 
+    const submit = () => {
 
+      console.log("富文本数据", inputForm.value.content);
 
+    };
 
     return {
 
       isLoading,
 
       inputForm,
 
@@ -279,6 +258,9 @@ export default {
 
       options,
 
       onFinish,
 
       cascaderValue,
 
+      contentEditor,
 
+      // change,
 
+      submit,
 
     };
 
   },
 
 };
 
@@ -321,19 +303,12 @@ export default {
 
 .van-cell__value .van-field__right-icon .van-icon-location {
 
   color: #36a7f3 !important;
 
 }
 
-.rowTextArea {
 
-  width: 98%;
 
-}
 
-.rowTextArea::v-deep .van-cell {
 
-  display: flow-root;
 
-}
 
 #editor {
 
   position: relative;
 
-  top: -40px;
 
-  height: 100px;
 
+  height: 200px;
 
 }
 
 .w-e-text-container {
 
-  height: 100px !important;
 
+  height: 150px !important;
 
 }
 
 .subbtn {
 
   margin: 20px;

+ 17 - 17
vue.config.js
Tampilan Berkas 

@@ -1,22 +1,22 @@
 
 const { defineConfig } = require('@vue/cli-service')
 
 module.exports = defineConfig({
 
-  transpileDependencies: true,
 
-  publicPath:'./',
 
-  
-  // 代理服务，处理接口跨域请求
 
-  devServer:{
 
-    port:'8080',
 
-    proxy:{
 
-      '/api':{
 
-        //target:'http://124.70.137.152:8095',// http://124.70.137.152:8095
 
-        target:'http://localhost:8084',// 
-        changeOrigin:true,
 
-        pathRewrite:{
 
-          '^/api':'/'
 
+    transpileDependencies: true,
 
+    publicPath: './',
 
+
 
+    // 代理服务，处理接口跨域请求
 
+    devServer: {
 
+        port: '8080',
 
+        proxy: {
 
+            '/api': {
 
+                //target:'http://124.70.137.152:8095',// http://124.70.137.152:8095
 
+                target: 'http://0.0.0.0:8084', // 
+                changeOrigin: true,
 
+                pathRewrite: {
 
+                    '^/api': '/'
 
+                }
 
+            }
 
         }
 
-      }
 
-    }
 
-  },
 
+    },
 
 
 
-})
 
+})