wangEditor editor de texto enriquecido carga de imagen/video

wangEditorHay APIextensibilidad rica y suficiente, lo que nos permite personalizar el menú de desarrollo, módulos, complementos, etc. Vue、ReactTambién es muy cómodo de usar en . Por lo tanto, este artículo presenta la carga de imágenes y videos de texto enriquecido en vue.

Después de introducir la instalación, el texto enriquecido tiene un botón para mostrar la imagen cargada. Después de hacer clic en la carga, 没有配置上传地址se informará un error, como se muestra en la siguiente figura:

Por lo tanto, la carga personalizada es la siguiente:

Subir fotos/videos personalizados

Representaciones:

• Dirección del sitio web oficial : https://www.wangeditor.com/v5/menu-config.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%9F%E8%83 % BD

• Cargar código de configuración de ruta de imagen/video

  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: ""
       }
  }
  

• usar

  //先引入
  <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>