若依修改，如何安装wangEditor，图片上传接口编写。建议暴露专门写一个图片存储的接口

npm install @wangeditor/editor --save

<template>
    <div class="container" style="margin: -8px 0 0 0">
    <el-form
        :model="ruleForm"
        status-icon
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm" >
  <el-form-item  form-item prop="content">
      <div style="border: 1px solid #ccc">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
      <Editor style="height: 500px; overflow-y: hidden;" v-model="ruleForm.code" :defaultConfig="editorConfig" :mode="mode"
      @onCreated="handleCreated" />
      </div>
  </el-form-item>
 
  <div class="main">
    <el-form-item label="标题" prop="title">
        <el-input
         type="text"
         v-model="ruleForm.title"
         ></el-input>
    </el-form-item>
    <el-form-item label="介绍" prop="introduce">
        <el-input
          type="text"
          v-model="ruleForm.introduce"
          ></el-input>
    </el-form-item>
    <el-form-item label="分类" prop="category">
        <el-input
          type="text"
          v-model="ruleForm.category"
          ></el-input>
    </el-form-item>
  </div>
  </el-form>
  <!-- <div style="border: 1px solid #ccc">
  <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
  <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
    @onCreated="handleCreated" />
  </div> -->  
  <div class="mb-4 foot" style="margin: 40px 0 0 940px;">
      <el-button round >保存</el-button>
      <el-button type="primary" round @click="submitForm()">提交</el-button>
  </div>
    </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 editorRef = shallowRef()
  
  // 内容 HTML
  const valueHtml = ref('<p>hello</p>')
  
  // 模拟 ajax 异步获取内容
  onMounted(() => {
   setTimeout(() => {
     valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
   }, 1500)
  })
  
  const toolbarConfig = {}
  const editorConfig = { placeholder: '请输入内容...',
  MENU_CONF: {}
  }
  
  // 组件销毁时，也及时销毁编辑器
  onBeforeUnmount(() => {
   const editor = editorRef.value
   if (editor == null) return
   editor.destroy()
  })
  
  const handleCreated = (editor) => {
   editorRef.value = editor // 记录 editor 实例，重要！
  }
  editorConfig.MENU_CONF["uploadImage"] = {
      fieldName: "image",
      server: "http://localhost:9090/fullText/file/upload",
      base64Limitsize: 5 * 1024
    }
  </script>
  <script>
  import axios from "axios";
  export default {
  data() {
  return {
    ruleForm: {},
    url: "http://localhost:9090/code",
    users: []
  };
  },
  methods: {
  submitForm(){
      // console.log(this.ruleForm)
      let that = this
      if(!this.ruleForm.id){
        
      axios.post(this.url + "/add",this.ruleForm)
      .then(function (res) {
        if (res.data.success) {
          that.$message({
            type: "success",
            message: res.data.data,
          });
          // that.getList(that.pageNum);
          // // 跳转成功，弹框失效
          // that.ruleForm = {}
          // that.dialogVisible = false
        } else {
          that.$message({
            type: "error",
            message: res.data.message,
          });
        }
      })
      .catch(function (error) {
        alert("error!");
        console.log(error);
      });
      } else {
          axios.post(this.url+'/modify',this.ruleForm).then(function (res) {
                      if(res.data.success){
                          that.$message({
                              type: 'success',
                              message: res.data.data
                          })                              
                      }else{
                          that.$message({
                              type: 'error',
                              message: res.data.message
                          })
                      }
                  }).catch(function (error) {
                      alert('error！')
                      console.log(error)
                  })
      }
  },
  handleTableFileUpload(row,file,fileList){
        console.log(row,file,fileList)
        row.avatar = file.response.data;
        // this.$set(row,'avatar',file.response.data)
        console.log(row)
        axios.put('/user/update',row).then(res => {
          if (res.data.code === '200'){
            this.$message.success('上传成功')
          } else {
            this.$message.error(res.data.msg)
          }
        })
      },
      preview(url){
        window.open(url)
      },
      handleMultipleFileUpload(response,file,fileList){
        console.log(response,file,fileList)
        this.urls = fileList.map(v => v.response?.data)
      },
      handleFileUpload(response,file,fileList){
        this.fileList = fileList
      }
  }
  }
  </script>
  <style scoped>
    html{
      margin: 0;
      padding: 0;
    }
    .container{
      background-color: #f5f6f7 !important;
      height: 100vh; 
    }
    .main {
      margin: 0 200px 0 100px;
      padding: 20px 0;
      background-color: #fff;
    }
  </style>

  {
    path: '/write',
    component: () => import('@/views/project/article/write')
  },

 
<dependency>
     <groupId>commons-io</groupId>
     <artifactId>commons-io</artifactId>
     <version>2.11.0</version>
</dependency>

package com.ruoyi.web.controller.part;
 
import org.apache.commons.io.FileUtils;
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Paths;
import java.util.HashMap;
import java.util.UUID;
 
@RequestMapping("/fullText")
@RestController
public class FullTextController {
    private static final String STORE_DIR = "D:\\project\\零一电科\\技术资料\\lingyidianke\\zeroBackEnd\\ZerosBackEnd\\src\\main\\resources\\pict\\";
    private static final String DOMAIN = "http://localhost:9090/fullText/file/download/";
    static class Success {
        public final int errno;
        public final Object data;
        public Success(String url) {
            this.errno = 0;
            HashMap<String, String> map = new HashMap<>();
            map.put("url", url);
            this.data = map;
        }
    }
    @RequestMapping("/file/upload")
    public Object uploadPict(@RequestParam("image") MultipartFile file) throws IOException {
        // 获取文件流
        // 获取文件真实名字
        String fileName = UUID.randomUUID().toString().substring(0, 10) + file.getOriginalFilename();
        // 在服务器中存储文件
        FileUtils.copyInputStreamToFile(file.getInputStream(), new File(STORE_DIR + fileName));
        // 返回图片url
        String url = DOMAIN + fileName;
        return new Success(url);
    }
    @GetMapping("/file/download/{fileName}")
    public void download(@PathVariable("fileName") String fileName, HttpServletRequest request, HttpServletResponse response) {
        // 获取真实的文件路径
        String filePath = STORE_DIR + fileName;
        System.out.println("++++完整路径为："+filePath);
        try {
            // 下载文件
            // 设置响应头
            response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);
            response.setHeader(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=" + fileName);
            // 读取文件内容并写入输出流
            Files.copy(Paths.get(filePath), response.getOutputStream());
            response.getOutputStream().flush();
        } catch (IOException e) {
            response.setStatus(404);
        }
    }
}