缺少@wangeditor/editor包

packages/qjkankan-editor/package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^0.5.4",
+    "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^1.0.2",
     "core-js": "^3.8.2",
     "d3": "^7.8.0",

packages/qjkankan-editor/src/views/hotspot/EditPanel.vue

@@ -6,16 +6,14 @@
     leave-active-class="animated slideOutRight speed"
   >
     <div class="hots-panel" v-show="show">
-
       <div class="ui-between header">
-        <span>{{ editTitle }}{{ $i18n.t('hotspot.hotspot_name') }}</span>
+        <span>{{ editTitle }}{{ $i18n.t("hotspot.hotspot_name") }}</span>
         <i class="iconfont icon_close" @click="cancel"></i>
       </div>
-      
+
       <div class="content" ref="content">
-        
         <div class="type-setting">
-          <div class="remark">{{ $i18n.t('hotspot.hotspot_type') }}</div>
+          <div class="remark">{{ $i18n.t("hotspot.hotspot_type") }}</div>
           <combox
             class="combox"
             :data="hotspotTypeList"
@@ -23,9 +21,9 @@
             @change="onHotSpotTypeChange"
           />
         </div>
-        
+
         <div class="icon-setting">
-          <div class="remark">{{ $i18n.t('hotspot.hotspot_icon') }}</div>
+          <div class="remark">{{ $i18n.t("hotspot.hotspot_icon") }}</div>
           <combox
             class="combox"
             :data="hotspotIconTypeList"
@@ -37,7 +35,10 @@
             :is="iconTypeComponent"
             ref="icon-setting-component"
           />
-          <div class="bars" v-if="hotspot.hotspotIconType !== 'personalized_tag'">
+          <div
+            class="bars"
+            v-if="hotspot.hotspotIconType !== 'personalized_tag'"
+          >
             <RangeItem :value="rang" @input="onRangeChange" />
           </div>
         </div>
@@ -46,19 +47,20 @@
           class="title-setting"
           v-if="hotspot.hotspotIconType !== 'personalized_tag'"
         >
-          <div class="remark-highlight">{{ $i18n.t('hotspot.hotspot_title') }}</div>
+          <div class="remark-highlight">
+            {{ $i18n.t("hotspot.hotspot_title") }}
+          </div>
           <div class="title-input-wrapper">
             <input
               v-model.trim="hotspot.hotspotTitle"
-              type="text" maxlength="15"
+              type="text"
+              maxlength="15"
               :placeholder="$i18n.t('hotspot.title_placeholder')"
             />
             <span class="count">{{ hotspot.hotspotTitle.length }}/15</span>
           </div>
-          <div
-            class="remark"
-          >
-            {{ $i18n.t('hotspot.title_show_mode') }}
+          <div class="remark">
+            {{ $i18n.t("hotspot.title_show_mode") }}
           </div>
           <TabbarSwitcher
             class="display-mode-selector"
@@ -70,10 +72,8 @@
             :activeIdx="currentTitleDispayModeIdx"
             @select="onSelectTitleDisplayMode"
           />
-          <div
-            class="remark"
-          >
-            {{ $i18n.t('hotspot.title_position') }}
+          <div class="remark">
+            {{ $i18n.t("hotspot.title_position") }}
           </div>
           <TabbarSwitcherIcon
             class="display-mode-selector"
@@ -103,53 +103,85 @@
             @select="onSelectTitlePosition"
           />
         </div>
-        
+
         <div class="effect-setting">
           <div class="title-line">
             <div
               class="remark-highlight"
-              v-if="$i18n.t(`hotspot.hotspot_type_specific_settings_title.${hotspot.hotspotType}`)"
+              v-if="
+                $i18n.t(
+                  `hotspot.hotspot_type_specific_settings_title.${hotspot.hotspotType}`
+                )
+              "
             >
-              {{ $i18n.t(`hotspot.hotspot_type_specific_settings_title.${hotspot.hotspotType}`) }}
+              {{
+                $i18n.t(
+                  `hotspot.hotspot_type_specific_settings_title.${hotspot.hotspotType}`
+                )
+              }}
             </div>
             <div class="tip" v-if="currentHotspotTypeConfigData.tip">
-              {{currentHotspotTypeConfigData.tip}}
+              {{ currentHotspotTypeConfigData.tip }}
             </div>
           </div>
           <component
             class="effect-setting-component"
             @sceneSelect="handleSceneSelect"
             :scene="hotspot.secne"
-            @imageChange="data => { hotspot.image = data }"
+            @imageChange="
+              (data) => {
+                hotspot.image = data;
+              }
+            "
             :image="hotspot.image"
-            @linkChange="data => { hotspot.hyperlink = data }"
+            @linkChange="
+              (data) => {
+                hotspot.hyperlink = data;
+              }
+            "
             :link="hotspot.hyperlink"
-            @linkOpenType="data => { hotspot.linkOpenType = data }"
+            @linkOpenType="
+              (data) => {
+                hotspot.linkOpenType = data;
+              }
+            "
             :linkOpenType="hotspot.linkOpenType"
-            @textChange="data => { hotspot.textarea = data }"
+            @textChange="
+              (data) => {
+                hotspot.textarea = data;
+              }
+            "
             :textarea="hotspot.textarea"
-            @audioChange="data => { hotspot.audio = data }"
+            @audioChange="
+              (data) => {
+                hotspot.audio = data;
+              }
+            "
             :audio="hotspot.audio"
-            @videoChange="data => { hotspot.video = data }"
+            @videoChange="
+              (data) => {
+                hotspot.video = data;
+              }
+            "
             :video="hotspot.video"
             :is="effectSettingComponent"
           />
         </div>
       </div>
       <div class="ui-between footer" app-border dir-top>
-        <button 
+        <button
           class="ui-button deepcancel"
           :class="{ disable: false }"
           @click="cancel"
         >
-          {{$i18n.t('hotspot.cancel')}}
+          {{ $i18n.t("hotspot.cancel") }}
         </button>
-        <button 
+        <button
           class="ui-button submit"
           :class="{ disable: !canSubmit }"
           @click="save"
         >
-          {{$i18n.t('hotspot.finish')}}
+          {{ $i18n.t("hotspot.finish") }}
         </button>
       </div>
     </div>
@@ -164,10 +196,10 @@ import Switcher from "@/components/shared/Switcher.vue";
 import TabbarSwitcher from "@/components/shared/TabbarSwitcher.vue";
 import TabbarSwitcherIcon from "@/components/shared/TabbarSwitcherIcon.vue";
 import hotspotTypeList from "./hotspotTypeList.js";
-import { isValidPhoneNumber } from 'libphonenumber-js/max'
+import { isValidPhoneNumber } from "libphonenumber-js/max";
 
 export default {
-  props: ['show', 'data', 'editTitle'],
+  props: ["show", "data", "editTitle"],
   components: {
     RangeItem,
     Combox,
@@ -181,163 +213,178 @@ export default {
       hotspotIconTypeList: [
         {
           name: this.$i18n.t("hotspot.hotspot_icon_type.system_icon"),
-          id: 'system_icon',
+          id: "system_icon",
         },
         {
           name: this.$i18n.t("hotspot.hotspot_icon_type.custom_image"),
-          id: 'custom_image',
+          id: "custom_image",
         },
         {
           name: this.$i18n.t("hotspot.hotspot_icon_type.serial_frame"),
-          id: 'serial_frame',
+          id: "serial_frame",
         },
         {
           name: this.$i18n.t("hotspot.hotspot_icon_type.personalized_tag"),
-          id: 'personalized_tag',
+          id: "personalized_tag",
         },
       ],
       rang: {
-        label: this.$i18n.t('hotspot.icon_size'),
-        unit: this.$i18n.t('hotspot.unit'),
+        label: this.$i18n.t("hotspot.icon_size"),
+        unit: this.$i18n.t("hotspot.unit"),
         gradient: 0.1,
         value: 1,
         min: 0.5,
         max: 2,
       },
-    }
+    };
   },
   watch: {
-    'hotspot.hotspotTitle': function () {
-      this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].html', this.hotspot.hotspotTitle)
+    "hotspot.hotspotTitle": function () {
+      this.$getKrpano().set(
+        "layer[tooltip_" + this.hotspot.name + "].html",
+        this.hotspot.hotspotTitle
+      );
     },
     // 'hotspot.visible': function () {
     //   this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].visible', this.hotspot.visible)
     // },
-    'hotspot.size': {
+    "hotspot.size": {
       immediate: true,
       handler: function (newVal) {
-        let h = 52
-        let scaleH = h * newVal
+        let h = 52;
+        let scaleH = h * newVal;
 
-        let offset = '-130%'
+        let offset = "-130%";
 
-        this.rang = { ...this.rang, value: newVal }
-        this.$getKrpano().set(`hotspot[${this.hotspot.name}].height`, scaleH)
+        this.rang = { ...this.rang, value: newVal };
+        this.$getKrpano().set(`hotspot[${this.hotspot.name}].height`, scaleH);
 
         if (newVal < 1) {
-          offset = '-200%'
+          offset = "-200%";
         }
 
         if (newVal > 1) {
-          offset = '-100%'
+          offset = "-100%";
         }
-        this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].y', `${offset}`)
-      }
+        this.$getKrpano().set(
+          "layer[tooltip_" + this.hotspot.name + "].y",
+          `${offset}`
+        );
+      },
     },
-    'hotspot.fontSize': {
+    "hotspot.fontSize": {
       handler: function (newVal) {
-        this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].css', `text-align:center; color:#FFFFFF;
-          font-family:STXihei;font-size:${newVal}px;`)
-      }
+        this.$getKrpano().set(
+          "layer[tooltip_" + this.hotspot.name + "].css",
+          `text-align:center; color:#FFFFFF;
+          font-family:STXihei;font-size:${newVal}px;`
+        );
+      },
     },
   },
   beforeDestroy() {
-    this.$bus.removeListener('resethotspotTitle', this.listerFnReset)
+    this.$bus.removeListener("resethotspotTitle", this.listerFnReset);
   },
   computed: {
     ...mapGetters({
-      hotspot: 'hotspot',
-      backupHotSpot: 'backupHotSpot',
+      hotspot: "hotspot",
+      backupHotSpot: "backupHotSpot",
     }),
     iconTypeComponent() {
-      let tmp = this.hotspot.hotspotIconType
+      let tmp = this.hotspot.hotspotIconType;
       return () => import(`./hotspotIconType/${tmp}.vue`);
     },
     currentTitleDispayModeIdx() {
       switch (this.hotspot.titleDisplayMode) {
-        case 'hover':
-          return 0
-        case 'always':
-          return 1
-        case 'never':
-          return 2
+        case "hover":
+          return 0;
+        case "always":
+          return 1;
+        case "never":
+          return 2;
         default:
-          return 0
+          return 0;
       }
     },
     currentTitlePositionIdx() {
       switch (this.hotspot.titlePosition) {
-        case 'top':
-          return 0
-        case 'bottom':
-          return 1
-        case 'left':
-          return 2
-        case 'right':
-          return 3
-        case 'custom':
-          return 4
+        case "top":
+          return 0;
+        case "bottom":
+          return 1;
+        case "left":
+          return 2;
+        case "right":
+          return 3;
+        case "custom":
+          return 4;
         default:
-          return 0
+          return 0;
       }
     },
     effectSettingComponent() {
-      let tmp = this.hotspot.hotspotType
+      let tmp = this.hotspot.hotspotType;
       return () => import(`./hotspotType/${tmp}.vue`);
     },
     canSubmit() {
       // 热点类型相关设置项
       switch (this.hotspot.hotspotType) {
-        case 'scene':
+        case "scene":
           if (!this.hotspot.secne) {
-            return false
+            return false;
           }
           break;
-        case 'image':
+        case "image":
           if (!this.hotspot.image || this.hotspot.image.length === 0) {
-            return false
+            return false;
           }
           break;
-        case 'video':
+        case "video":
           if (!this.hotspot.video) {
-            return false
+            return false;
           }
           break;
-        case 'audio':
+        case "audio":
           if (!this.hotspot.audio) {
-            return false
+            return false;
           }
           break;
-        case 'link':
+        case "link":
           if (!this.hotspot.hyperlink) {
-            return false
+            return false;
           }
           break;
-        case 'textarea':
+        case "textarea":
           if (!this.hotspot.textarea) {
-            return false
+            return false;
           }
           break;
-        case 'tag':
+        case "tag":
           break;
-        case 'imageText':
-          if (this.hotspot.imageTextInfo.imageList.length === 0 && !this.hotspot.imageTextInfo.text) {
-            return false
+        case "imageText":
+          if (
+            this.hotspot.imageTextInfo.imageList.length === 0 &&
+            !this.hotspot.imageTextInfo.text
+          ) {
+            return false;
           }
           break;
-        case 'article':
+        case "article":
           if (!this.hotspot.articleInfo.html) {
-            return false
+            return false;
           }
           break;
-        case 'pdf':
+        case "pdf":
           if (!this.hotspot.pdfInfo.name || !this.hotspot.pdfInfo.url) {
-            return false
+            return false;
           }
           break;
-        case 'phone':
-          if (!isValidPhoneNumber(this.hotspot.phoneInfo.phone) && !isValidPhoneNumber('+86' + this.hotspot.phoneInfo.phone)) {
-            return false
+        case "phone":
+          if (
+            !isValidPhoneNumber(this.hotspot.phoneInfo.phone) &&
+            !isValidPhoneNumber("+86" + this.hotspot.phoneInfo.phone)
+          ) {
+            return false;
           }
           break;
         default:
@@ -346,96 +393,106 @@ export default {
 
       // 热点图标类型相关设置项
       switch (this.hotspot.hotspotIconType) {
-        case 'system_icon':
+        case "system_icon":
           break;
-        case 'custom_image':
+        case "custom_image":
           if (!this.hotspot.customIconInfo.img) {
-            return false
+            return false;
           }
           break;
-        case 'serial_frame':
-          if (!this.hotspot.serialFrameInfo.url || this.hotspot.serialFrameInfo.frameNumber <= 0 || this.hotspot.serialFrameInfo <= 0) {
-            return false
+        case "serial_frame":
+          if (
+            !this.hotspot.serialFrameInfo.url ||
+            this.hotspot.serialFrameInfo.frameNumber <= 0 ||
+            this.hotspot.serialFrameInfo <= 0
+          ) {
+            return false;
           }
           break;
-        case 'personalized_tag':
-          if (this.hotspot.personalizedTagInfo.isTextWrap && this.hotspot.personalizedTagInfo.textNumPerLine <= 0) {
-            return false
+        case "personalized_tag":
+          if (
+            this.hotspot.personalizedTagInfo.isTextWrap &&
+            this.hotspot.personalizedTagInfo.textNumPerLine <= 0
+          ) {
+            return false;
           }
           break;
         default:
           break;
       }
-      
+
       // 其他设置项
       if (!this.hotspot.hotspotTitle) {
-        return false
+        return false;
       }
-      
-      return true
+
+      return true;
     },
     currentHotspotTypeConfigData() {
       return hotspotTypeList.find((item) => {
-        return item.id === this.hotspot.hotspotType
-      })
-    }
+        return item.id === this.hotspot.hotspotType;
+      });
+    },
   },
   mounted() {
-    this.$bus.on('resethotspotTitle', this.listerFnReset)
+    this.$bus.on("resethotspotTitle", this.listerFnReset);
 
-    this.$bus.on('delhotspot', () => {
-      this.cancel()
-    })
+    this.$bus.on("delhotspot", () => {
+      this.cancel();
+    });
 
     setTimeout(() => {
-      if (this.editTitle != '编辑' && this.editTitle != this.$i18n.t('hotspot.edit')) {
-        this.rang.value = window.g_hotspotCurrentScale
-        this.onRangeChange({ value: window.g_hotspotCurrentScale })
+      if (
+        this.editTitle != "编辑" &&
+        this.editTitle != this.$i18n.t("hotspot.edit")
+      ) {
+        this.rang.value = window.g_hotspotCurrentScale;
+        this.onRangeChange({ value: window.g_hotspotCurrentScale });
       }
-    }, 300)
+    }, 300);
   },
 
   methods: {
     handleSceneSelect(data) {
       this.hotspot.secne = {
         ...data,
-        someData: {}
-      }
+        someData: {},
+      };
     },
     onHotSpotTypeChange(data) {
-      this.hotspot.hotspotType = data.id
+      this.hotspot.hotspotType = data.id;
     },
     onHotspotIconTypeChange(data) {
-      this.hotspot.hotspotIconType = data.id
+      this.hotspot.hotspotIconType = data.id;
     },
     onRangeChange(data) {
       console.log(data);
-      this.rang = { ...this.rang, value: data.value }
-      this.hotspot.size = data.value
+      this.rang = { ...this.rang, value: data.value };
+      this.hotspot.size = data.value;
       switch (data.value) {
         case 0.5:
         case 0.6:
         case 0.7:
-          this.hotspot.fontSize = 12
+          this.hotspot.fontSize = 12;
           break;
         case 0.8:
         case 0.9:
         case 1.0:
         case 1.1:
         case 1.2:
-          this.hotspot.fontSize = 14
+          this.hotspot.fontSize = 14;
           break;
         case 1.3:
         case 1.4:
         case 1.5:
         case 1.6:
         case 1.7:
-          this.hotspot.fontSize = 17
+          this.hotspot.fontSize = 17;
           break;
         case 1.8:
         case 1.9:
         case 2:
-          this.hotspot.fontSize = 20
+          this.hotspot.fontSize = 20;
           break;
         default:
           break;
@@ -444,13 +501,13 @@ export default {
     onSelectTitleDisplayMode(idx) {
       switch (idx) {
         case 0:
-          this.hotspot.titleDisplayMode = 'hover'
+          this.hotspot.titleDisplayMode = "hover";
           break;
         case 1:
-          this.hotspot.titleDisplayMode = 'always'
+          this.hotspot.titleDisplayMode = "always";
           break;
         case 2:
-          this.hotspot.titleDisplayMode = 'never'
+          this.hotspot.titleDisplayMode = "never";
           break;
         default:
           break;
@@ -459,48 +516,51 @@ export default {
     onSelectTitlePosition(idx) {
       switch (idx) {
         case 0:
-          this.hotspot.titlePosition = 'top'
+          this.hotspot.titlePosition = "top";
           break;
         case 1:
-          this.hotspot.titlePosition = 'bottom'
+          this.hotspot.titlePosition = "bottom";
           break;
         case 2:
-          this.hotspot.titlePosition = 'left'
+          this.hotspot.titlePosition = "left";
           break;
         case 3:
-          this.hotspot.titlePosition = 'right'
+          this.hotspot.titlePosition = "right";
           break;
         case 4:
-          this.hotspot.titlePosition = 'custom'
+          this.hotspot.titlePosition = "custom";
           break;
         default:
           break;
       }
     },
     listerFnReset() {
-      if (this.hotspot.hotspotTitle == '单击确定热点位置'||this.hotspot.hotspotTitle == this.$i18n.t('hotspot.click_to_comfirm')) {
-        this.hotspot.hotspotTitle = ''
+      if (
+        this.hotspot.hotspotTitle == "单击确定热点位置" ||
+        this.hotspot.hotspotTitle == this.$i18n.t("hotspot.click_to_comfirm")
+      ) {
+        this.hotspot.hotspotTitle = "";
       }
     },
 
     cancel() {
       this.$store.commit("SetHotspot", this.backupHotSpot);
       this.$emit("close", {
-        type: this.editTitle == this.$i18n.t('hotspot.edit') ? 'edit' : 'add',
-        data: this.backupHotSpot
+        type: this.editTitle == this.$i18n.t("hotspot.edit") ? "edit" : "add",
+        data: this.backupHotSpot,
       });
     },
     reset(data) {
-      this.$bus.emit('edithotspotTitle', data)
-      this.$bus.emit('edithotspotTitleisShow', data)
-      this.$getKrpano().set(`hotspot[${data.name}].url`, data.img)
+      this.$bus.emit("edithotspotTitle", data);
+      this.$bus.emit("edithotspotTitleisShow", data);
+      this.$getKrpano().set(`hotspot[${data.name}].url`, data.img);
     },
     save() {
       this.$store.commit("SetHotspot", this.hotspot);
       this.$emit("close");
       this.$emit("save", this.hotspot);
     },
-  }
+  },
 };
 </script>
 
@@ -537,7 +597,7 @@ export default {
     .icon-setting {
       .icon-setting-title {
         font-size: 18px;
-        color: #FFFFFF;
+        color: #ffffff;
       }
       .remark {
         margin-top: 16px;
@@ -559,21 +619,21 @@ export default {
       .remark-highlight {
         margin-top: 16px;
         font-size: 18px;
-        color: #FFFFFF;
+        color: #ffffff;
       }
-      >.title-input-wrapper {
+      > .title-input-wrapper {
         position: relative;
         border: 1px solid rgba(151, 151, 151, 0.2);
         padding: 0 16px;
-        background: #1A1B1D;
+        background: #1a1b1d;
         border-radius: 2px;
         height: 36px;
         width: 100%;
         margin-top: 18px;
         &:focus-within {
-          border-color: #0076F6;
+          border-color: #0076f6;
         }
-        >input {
+        > input {
           border: none;
           background: transparent;
           outline: none;
@@ -584,7 +644,7 @@ export default {
           letter-spacing: 1px;
           font-size: 14px;
         }
-        >.count {
+        > .count {
           position: absolute;
           top: 50%;
           transform: translateY(-50%);
@@ -611,11 +671,11 @@ export default {
         align-items: center;
         > .remark-highlight {
           font-size: 18px;
-          color: #FFFFFF;
+          color: #ffffff;
         }
         > .tip {
           font-size: 14px;
-          color: #FFFFFF;
+          color: #ffffff;
           opacity: 0.6;
         }
       }