增加自动化富文本组件

web/src/components/richtext/edit.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="border border-solid border-gray-100 h-80">
+      <Toolbar
+          :editor="editorRef"
+          :defaultConfig="toolbarConfig"
+          mode="default"
+      />
+      <Editor
+          class="overflow-y-hidden mt-0.5"
+          style="height: 18rem;"
+          v-model="valueHtml"
+          :defaultConfig="editorConfig"
+          mode="default"
+          @onCreated="handleCreated"
+          @onChange="change"
+      />
+    </div>
+</template>
+
+<script setup>
+
+import '@wangeditor/editor/dist/css/style.css' // 引入 css
+
+const basePath = import.meta.env.VITE_BASE_API
+
+import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+
+import {useUserStore} from "@/pinia/modules/user";
+import {ElMessage} from "element-plus";
+import {getUrl} from "@/utils/image";
+
+const userStore = useUserStore()
+
+const emits = defineEmits(['change','update:modelValue'])
+
+const change = (editor) =>{
+  emits('change',editor)
+  emits('update:modelValue',valueHtml.value)
+}
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  }
+})
+
+const editorRef = shallowRef()
+const valueHtml = ref('')
+
+const toolbarConfig = {}
+const editorConfig = {
+  placeholder: '请输入内容...',
+  MENU_CONF:{}
+}
+editorConfig.MENU_CONF['uploadImage'] = {
+  fieldName: 'file',
+  headers: {
+    "x-token": userStore.token,
+  },
+  server:  basePath + '/fileUploadAndDownload/upload?noSave=1',
+  customInsert(res, insertFn){
+    if(res.code === 0){
+      const urlPath = getUrl(res.data.file.url)
+      insertFn(urlPath,res.data.file.name)
+      return
+    }
+    ElMessage.error(res.msg)
+  }
+}
+
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
+
+const handleCreated = (editor) => {
+  editorRef.value = editor
+  valueHtml.value =props.modelValue
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

web/src/components/richtext/view.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="border border-solid border-gray-100 h-80">
+    <Editor
+        class="overflow-y-hidden mt-0.5"
+        v-model="valueHtml"
+        :defaultConfig="editorConfig"
+        mode="default"
+        @onCreated="handleCreated"
+        @onChange="change"
+    />
+  </div>
+</template>
+<script setup>
+
+import '@wangeditor/editor/dist/css/style.css' // 引入 css
+
+
+import {onBeforeUnmount, ref, shallowRef, watch} from 'vue'
+import {Editor} from '@wangeditor/editor-for-vue'
+
+import {useUserStore} from "@/pinia/modules/user";
+
+const userStore = useUserStore()
+
+const emits = defineEmits(['change', 'update:modelValue'])
+const editorConfig = ref({
+  readOnly : true
+})
+const change = (editor) => {
+  emits('change', editor)
+  emits('update:modelValue', valueHtml.value)
+}
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  }
+})
+
+const editorRef = shallowRef()
+const valueHtml = ref('')
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
+
+const handleCreated = (editor) => {
+  editorRef.value = editor
+  valueHtml.value = props.modelValue
+}
+
+watch(() => props.modelValue, (val) => {
+  valueHtml.value = val
+})
+</script>
+
+<style scoped lang="scss">
+
+</style>