wangEditor rich text editor picture/video upload

wangEditorThere are rich APIand sufficient extensibility, allowing us to customize the development menu, modules, plug-ins, etc. Vue、ReactIt is also very convenient to use in . Therefore, this article introduces the rich text uploading pictures and videos in vue.

After the installation is introduced, the rich text has a button to display the upload image. After clicking the upload, 没有配置上传地址an error will be reported, as shown in the figure below:

So the custom upload is as follows:

Custom upload pictures/videos

Renderings:

• Official website address : https://www.wangeditor.com/v5/menu-config.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%9F%E8%83% BD

• Upload image/video path configuration code

  data(){
        
        
  	 // 自定义插入图片/视频
      const handleUpload = async (file, insertFn) => {
        
        
        let form = new FormData();
        form.append("file", file);
        form.append("dealType", this.$store.state.uploadData.dealType);
        let res = await uploadFile(form);  //此方法返回上传后的id
        // 最后插入图片 insertFn方法参数(url, alt, href)，路径根据自己的项目需求配置
        insertFn(`${
          
          http://localhost:8183/}file/preview/${
          
          res}`, '', `${
          
          http://localhost:8183/}file/preview/${
          
          res}`)
      }
      
      //上传图片/视频方法
      const uploadFile = async (form) => {
        
        
        let res = await this.$http.file.upload(form);   //此处换为自己的上传接口地址
        return res.data
      }
      
      //上传的配置
      const editorConfig = {
        
        
        placeholder: "请输入内容...",
        MENU_CONF: {
        
        
          uploadImage: {
        
           //上传图片配置
            customUpload: handleUpload
          },
          uploadVideo: {
        
          //上传视频配置
            customUpload: handleUpload
          }
        }
      };
      return{
        
        
  		editor: null,
        	toolbarConfig: {
        
        },
        	content: "",
        	editorConfig: editorConfig,
        	mode: "default",
        	content: ""
       }
  }
  

• use

  //先引入
  <script>
  	import {
          
           Editor, Toolbar } from "@wangeditor/editor-for-vue";
  </script>
  
  <div style="border: 1px solid #ccc">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
      <Editor style="min-height: 500px" v-model="content" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
  </div>