feat: 表情包功能

Yi.Bbs.Vue3/package-lock.json

@@ -26,6 +26,7 @@
         "vue": "^3.2.47",
         "vue-cropper": "1.0.3",
         "vue-router": "^4.1.6",
+        "vue3-emoji-picker": "^1.1.8",
         "yarm": "^0.4.0",
         "yarn": "^1.22.21"
       },
@@ -2410,6 +2411,11 @@
         "node": ">=0.4"
       }
     },
+    "node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmmirror.com/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmmirror.com/ignore/-/ignore-5.2.4.tgz",
@@ -3842,6 +3848,19 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue3-emoji-picker": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmmirror.com/vue3-emoji-picker/-/vue3-emoji-picker-1.1.8.tgz",
+      "integrity": "sha512-k9tVHeQEBVLzVCLYAkFaI1nib3FJFQwdPhWD5khJkhks3ktg3g12z5wPGOSDpIuSLNtelRGvq1qdmZuJu5khfA==",
+      "dependencies": {
+        "@popperjs/core": "^2.11.0",
+        "idb": "^7.1.0",
+        "vue": "^3.2.23"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
@@ -5898,6 +5917,11 @@
       "resolved": "https://registry.npmmirror.com/i/-/i-0.3.7.tgz",
       "integrity": "sha512-FYz4wlXgkQwIPqhzC5TdNMLSE5+GS1IIDJZY/1ZiEPCT2S3COUVZeT5OW4BmW4r5LHLQuOosSwsvnroG9GR59Q=="
     },
+    "idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmmirror.com/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
+    },
     "ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmmirror.com/ignore/-/ignore-5.2.4.tgz",
@@ -7008,6 +7032,16 @@
         "@vue/devtools-api": "^6.4.5"
       }
     },
+    "vue3-emoji-picker": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmmirror.com/vue3-emoji-picker/-/vue3-emoji-picker-1.1.8.tgz",
+      "integrity": "sha512-k9tVHeQEBVLzVCLYAkFaI1nib3FJFQwdPhWD5khJkhks3ktg3g12z5wPGOSDpIuSLNtelRGvq1qdmZuJu5khfA==",
+      "requires": {
+        "@popperjs/core": "^2.11.0",
+        "idb": "^7.1.0",
+        "vue": "^3.2.23"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",

Yi.Bbs.Vue3/package.json

@@ -27,6 +27,7 @@
     "vue": "^3.2.47",
     "vue-cropper": "1.0.3",
     "vue-router": "^4.1.6",
+    "vue3-emoji-picker": "^1.1.8",
     "yarm": "^0.4.0",
     "yarn": "^1.22.21"
   },

Yi.Bbs.Vue3/src/components/EmojiPanel.vue

@@ -0,0 +1,23 @@
+<template>
+  <EmojiPicker :native="true" @select="onSelectEmoji" />
+</template>
+
+<script setup>
+import EmojiPicker from "vue3-emoji-picker";
+import "vue3-emoji-picker/css";
+const emits=defineEmits(['onSelect'])
+const onSelectEmoji = (emoji) => {
+    emits('onSelect',emoji)
+
+  /*
+    // result
+    { 
+        i: "😚", 
+        n: ["kissing face"], 
+        r: "1f61a", // with skin tone
+        t: "neutral", // skin tone
+        u: "1f61a" // without tone
+    }
+    */
+};
+</script>

Yi.Bbs.Vue3/src/components/MavonEdit.vue

@@ -1,6 +1,6 @@
 <template>
   <mavon-editor ref='md' v-model="text" :subfield="true" :codeStyle="props.codeStyle" :ishljs="true"
-    :style="{ minHeight: props.height, maxHeight: '100%' }" class="edit" @imgAdd="imgAdd">
+    :style="{ minHeight: props.height, maxHeight: '100%' }" class="edit" @imgAdd="imgAdd" @change="change">
  
     <!-- 引用视频链接的自定义按钮 -->
     <template v-slot:left-toolbar-after>
@@ -13,34 +13,17 @@
 
 
       <el-dropdown :hide-on-click='false'>
-        <el-button aria-hidden="true" class="op-icon fa" title="表情包">
+
+        
+     <el-button aria-hidden="true" class="op-icon fa" title="表情包">
           😊
         </el-button>
         <template #dropdown>
-          <el-dropdown-menu >
-            <el-dropdown-item>
-              <table border="1">
-                <tr>
-                  <td @click="text+='😊'">😊</td>
-                  <td>😊</td>
-                  <td>😊</td>
-                </tr>
-                <tr>
-                  <td>😊</td>
-                  <td>😊</td>
-                  <td>😊</td>
-                </tr>
-                <tr>
-                  <td>😊</td>
-                  <td>😊</td>
-                  <td>😊</td>
-                </tr>
-              </table>
 
-            </el-dropdown-item>
+           
-
+              <EmojiPanel @onSelect="onSelectEmoji"/>
-          </el-dropdown-menu>
+        
-        </template>
+        </template> 
       </el-dropdown>
 
 
@@ -94,6 +77,7 @@ import { mavonEditor } from 'mavon-editor'
 import 'mavon-editor/dist/css/index.css'
 import { ref, computed, watch, onMounted } from 'vue';
 import { upload } from '@/apis/fileApi'
+import EmojiPanel from '@/components/EmojiPanel.vue'
 
 const md = ref(null);
 const props = defineProps(['height', 'modelValue', "codeStyle"])
@@ -138,6 +122,19 @@ const imgAdd = async (pos, $file) => {
   md.value.$img2Url(pos, url);
 
 }
+
+//选择表情包
+const onSelectEmoji=(emoji)=>{
+  console.log(emoji.i,"emoji");
+  text.value+=emoji.i
+}
+
+const change=(value,render)=>{
+
+
+}
+
+
 </script>
 
 

Yi.Bbs.Vue3/yarn.lock

@@ -361,7 +361,7 @@
     "unimport" "^2.2.4"
     "untyped" "^1.2.2"
 
-"@popperjs/core@npm:@sxzz/popperjs-es@^2.11.7":
+"@popperjs/core@^2.11.0", "@popperjs/core@npm:@sxzz/popperjs-es@^2.11.7":
   "integrity" "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
   "resolved" "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz"
   "version" "2.11.7"
@@ -1330,6 +1330,11 @@
   "resolved" "https://registry.npmmirror.com/i/-/i-0.3.7.tgz"
   "version" "0.3.7"
 
+"idb@^7.1.0":
+  "integrity" "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
+  "resolved" "https://registry.npmmirror.com/idb/-/idb-7.1.1.tgz"
+  "version" "7.1.1"
+
 "ignore@^5.2.0", "ignore@^5.2.4":
   "integrity" "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ=="
   "resolved" "https://registry.npmmirror.com/ignore/-/ignore-5.2.4.tgz"
@@ -2241,7 +2246,7 @@
   dependencies:
     "@vue/devtools-api" "^6.4.5"
 
-"vue@^2.6.14 || ^3.2.0", "vue@^3.0.0-0 || ^2.6.0", "vue@^3.2.0", "vue@^3.2.25", "vue@^3.2.47", "vue@2 || 3", "vue@3.2.47":
+"vue@^2.6.14 || ^3.2.0", "vue@^3.0.0-0 || ^2.6.0", "vue@^3.2.0", "vue@^3.2.23", "vue@^3.2.25", "vue@^3.2.47", "vue@2 || 3", "vue@3.2.47":
   "integrity" "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ=="
   "resolved" "https://registry.npmmirror.com/vue/-/vue-3.2.47.tgz"
   "version" "3.2.47"
@@ -2252,6 +2257,15 @@
     "@vue/server-renderer" "3.2.47"
     "@vue/shared" "3.2.47"
 
+"vue3-emoji-picker@^1.1.8":
+  "integrity" "sha512-k9tVHeQEBVLzVCLYAkFaI1nib3FJFQwdPhWD5khJkhks3ktg3g12z5wPGOSDpIuSLNtelRGvq1qdmZuJu5khfA=="
+  "resolved" "https://registry.npmmirror.com/vue3-emoji-picker/-/vue3-emoji-picker-1.1.8.tgz"
+  "version" "1.1.8"
+  dependencies:
+    "@popperjs/core" "^2.11.0"
+    "idb" "^7.1.0"
+    "vue" "^3.2.23"
+
 "watchpack@^2.4.0":
   "integrity" "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg=="
   "resolved" "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz"