wangEditor リッチ テキスト エディターの画像/ビデオのアップロード

wangEditor豊富な拡張性がありAPI、開発メニューやモジュール、プラグインなどのカスタマイズが可能です。Vue、Reactでの使用にも非常に便利です。そこで、この記事ではvueで画像や動画をアップロードするリッチテキストを紹介します。

インストールが導入されると、リッチ テキストにアップロード画像を表示するボタンが追加され、アップロードをクリックすると、次の図に示すように没有配置上传地址エラーが報告されます。

写真/ビデオをカスタムアップロードする

レンダリング:

• 公式サイトアドレス：https://www.wangeditor.com/v5/menu-config.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%9F%E8%83 %BD

• 画像/ビデオパス構成コードをアップロードする

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

• 使用

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