feats

src/components/rich-editor/index.jsx

@@ -1,4 +1,5 @@
 import React, { forwardRef, useRef, useEffect, useMemo, useImperativeHandle } from 'react'
+import { uploadImage } from '@/services/image'
 
 export default forwardRef((props, ref) => {
   const editorRef = useRef()
@@ -8,6 +9,11 @@ export default forwardRef((props, ref) => {
     window.tinymce.init({
       selector: `#${id}`,
       menubar: false,
+      language: 'zh_CN',
+      plugins: 'image',
+      image_description: false,   // 禁用图片描述
+      image_dimensions: false,  // 禁用图片宽高设置
+      toolbar: 'blocks fontfamily fontsize bold italic backcolor alignleft aligncenter alignright alignjustify image outdent indent undo redo removeformat',
       setup: (editor) => {
         editor.on('change', () => {
           props.onChange(editor.getContent());
@@ -16,6 +22,13 @@ export default forwardRef((props, ref) => {
       },
       init_instance_callback: (editor) => {
         editorRef.current = editor;
+      },
+      images_upload_handler: (blobInfo, progress) => {
+        return new Promise((resolve, reject) => {
+          const formData = new FormData();
+          formData.append('file', blobInfo.blob(), blobInfo.filename());
+          uploadImage(formData).then(resolve)
+        })
       }
     });
   // eslint-disable-next-line react-hooks/exhaustive-deps

src/services/image.js

@@ -0,0 +1,5 @@
+import request from '@/utils/request';
+
+export function uploadImage(formdata) {
+  return request('/image', { method: 'post', data: formdata })  
+}