feat: bbs支持富文本

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

@@ -16,13 +16,7 @@
 
   <el-divider />
   <div>
-    <el-input
-      :disabled="!isAddComment"
-      v-model="topContent"
-      placeholder="发表一个友善的评论吧~"
-      :rows="5"
-      type="textarea"
-    ></el-input>
+    <WangEditor v-model="topContent" height="220px" />
     <el-button
       @click="addTopComment"
       type="primary"
@@ -142,6 +136,7 @@ import { useRoute, useRouter } from "vue-router";
 import { getListByDiscussId, add, del } from "@/apis/commentApi.js";
 import AvatarInfo from "./AvatarInfo.vue";
 import { getPermission } from "@/utils/auth";
+import WangEditor from "./WangEditor.vue"
 
 const props = defineProps({
   isComment: {

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

@@ -0,0 +1,55 @@
+<template>
+  <div style="border: 1px solid #ccc">
+    <Toolbar
+        style="border-bottom: 1px solid #ccc"
+        :editor="editorRef"
+        :defaultConfig="toolbarConfig"
+        :mode="mode"
+    />
+    <Editor
+        style="overflow-y: hidden;"
+        :style="{height:props.height}"
+        v-model="model"
+        :defaultConfig="editorConfig"
+        :mode="mode"
+        @onCreated="handleCreated"
+    />
+  </div>
+</template>
+<script setup>
+import '@wangeditor/editor/dist/css/style.css' // 引入 css
+
+import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+
+
+
+
+const props = defineProps(["height"]);
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef()
+
+const  mode= 'default';
+const model = defineModel()
+const toolbarConfig = {
+  excludeKeys:[
+    "uploadVideo","insertVideo","uploadImage","editVideoSize"
+  ]
+}
+const editorConfig = { 
+  placeholder: '发表一个友善的评论吧...',
+  maxLength:2000
+}
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
+
+const handleCreated = (editor) => {
+  editorRef.value = editor // 记录 editor 实例，重要！
+  console.log(editorRef.value.getAllMenuKeys(),"ss")
+}
+</script>