diff --git a/.gitignore b/.gitignore
index a35571b2..4031f8b1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,6 @@ pnpm-debug.log*
*.sw?
.history
+
+# 默认的上传文件夹
+userUpload
diff --git a/nginx/nginx.conf b/nginx/nginx.conf
index 34854cdf..30e5d7fc 100644
--- a/nginx/nginx.conf
+++ b/nginx/nginx.conf
@@ -51,6 +51,12 @@ http {
location /api {
proxy_pass http://127.0.0.1:3000;
}
+
+ # 静态文件的默认存储文件夹
+ # 文件夹的配置在 server/src/modules/file/config/index.ts SERVER_LOCAL_CONFIG.FILE_KEY_PREFIX
+ location /userUpload {
+ proxy_pass http://127.0.0.1:3000;
+ }
error_page 500 502 503 504 /500.html;
client_max_body_size 20M;
diff --git a/web/src/common/Editor/RichEditor.vue b/web/src/common/Editor/RichEditor.vue
index d15b810a..c0357453 100644
--- a/web/src/common/Editor/RichEditor.vue
+++ b/web/src/common/Editor/RichEditor.vue
@@ -1,24 +1,9 @@
-
-
+
+
@@ -26,28 +11,62 @@
import '@wangeditor/editor/dist/css/style.css'
import './styles/reset-wangeditor.scss'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
-import { ref, shallowRef, onBeforeMount, watch } from 'vue'
+import { ref, shallowRef, onBeforeMount, watch, computed } from 'vue'
+import { useStore } from 'vuex'
+import { get as _get } from 'lodash-es'
const emit = defineEmits(['input', 'onFocus', 'change', 'blur', 'created'])
const model = defineModel()
-const props = defineProps(['staticToolBar'])
+const props = defineProps({
+ staticToolBar: { default: false, required: false },
+ needUploadImage: { default: false, required: false }
+})
const curValue = ref('')
const editorRef = shallowRef()
-const showToolbar = ref(props.staticToolBar || false)
+const showToolbar = ref(props.staticToolBar)
const mode = 'simple'
-const toolbarConfig = {
- toolbarKeys: [
- 'color', // 字体色
- 'bgColor', // 背景色
- 'bold',
- 'insertLink' // 链接
- ]
+const toolbarConfig = computed(() => {
+ const config = {
+ toolbarKeys: [
+ 'color', // 字体色
+ 'bgColor', // 背景色
+ 'bold',
+ 'insertLink', // 链接
+ ]
+ }
+ if (props.needUploadImage) {
+ config.toolbarKeys.push('uploadImage')
+ }
+
+ return config
+})
+
+const editorConfig = {
+ MENU_CONF: {}
}
-const editorConfig = {}
+const store = useStore()
+const token = _get(store, 'state.user.userInfo.token')
+
+editorConfig.MENU_CONF['uploadImage'] = {
+ allowedFileTypes: ['image/jpeg', 'image/png'],
+ server: '/api/file/upload',
+ fieldName: 'file',
+ meta: {
+ //! 此处的channel需要跟上传接口内配置的channel一致
+ channel: 'upload'
+ },
+ headers: {
+ Authorization: `Bearer ${token}`
+ },
+ customInsert(res, insertFn) {
+ const url = res.data.url
+ insertFn(url, '', '')
+ },
+}
const setHtml = (newHtml) => {
const editor = editorRef.value
@@ -114,6 +133,7 @@ onBeforeMount(() => {
.static-toolbar {
border-bottom: 1px solid #dedede;
}
+
.dynamic-toolbar {
position: absolute;
left: 0;
diff --git a/web/src/common/xss.js b/web/src/common/xss.js
index e12e20ff..d4d71e8b 100644
--- a/web/src/common/xss.js
+++ b/web/src/common/xss.js
@@ -27,6 +27,16 @@ const isVideo = (html) => {
return html.indexOf('