背景
最近はリッチテキストエディタを使って、遠い年代を覚えていて、Kingeditor、Ueditorを調整しました.のしかし、それらはすべてとても重くて、、そこで最近よくこの事に注意して、最近1つのwangEditorを見て、体験して、軽くて使いやすくて、機能も相対的に豊富で十分です.
公式サイトhttp://www.wangeditor.com/
マニュアルhttps://www.kancloud.cn/wangfupeng/wangeditor3/332599
wangEditorには対応するCDNがあり、ローカルに置く必要はなく、直接参照すればいいです.

http://cdn.staticfile.org/wangEditor/10.0.13/fonts/w-e-icon.woff

http://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.css

http://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.js

http://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.min.css

http://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.min.js

http://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.min.js.map

htmlページ
最も簡単に言えば、3行のjsコードだけで、次の具体的なdemoを見て、直接実行することができます.
var E = window.wangEditor var editor2 = new E(’#div3’) editor2.create()

    
    
    























 



















    

        
    


    
    

        

            
Spring Boot Code Generator!
              SpringBoot2+Freemarker      ， DDL SQL    JPA/JdbcTemplate/Mybatis/BeetlSQL    ，  mysql/oracle/pgsql     。        ，             。               ，     SQL      ，       ，  ！
            
            

                

                        
                
                
                

                        
                
                
            
            

            

                
          
            
            
   »
        
    

    
        var E = window.wangEditor
        var editor = new E('#editor')
        //    var editor = new E( document.getElementById('editor') )
        //         
        editor.customConfig.uploadImgServer = 'http://localhost:8888/xxxx/upload/editor'
        //       
        editor.customConfig.uploadFileName = 'file'
        //      ，   base64  
        //editor.customConfig.uploadImgShowBase64 = true
        editor.create()
    

义齿
コアアップロードコードは実際にはそれほど悪くないはずですが、自分のビジネスロジックに基づいて生成したり、処理したりすることができます.

@RestController
@RequestMapping("/upload")
public class UploadController {
	//        ，              url        ，      ，       
    @Autowired
    AppConfig appConfig;
    
    @RequestMapping("/editor")
    @ResponseBody
    public Object editor(@RequestParam("file") MultipartFile file) {
        String fileName ="";
        if(!file.isEmpty()){
            //        ,1M=1024k=1048576      if(fileSize<5*1048576)
            if(file.getSize()>(1048576*5)){return ApiReturnUtil.error("    ，     5MB ");}
            String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
            if(StringUtils.isBlank(suffix)){return ApiReturnUtil.error("        ，    ");}

            fileName = System.currentTimeMillis()+suffix;
            String saveFileName = appConfig.getFilepath()+"/article/"+fileName;
            System.out.println(saveFileName);
            File dest = new File(saveFileName);
            System.out.println(dest.getParentFile().getPath());
            if(!dest.getParentFile().exists()){ //           
                dest.getParentFile().mkdir();
            }
            try {
                file.transferTo(dest); //    
            } catch (Exception e) {
                e.printStackTrace();
                return new WangEditorResponse("1","    "+e.getMessage());
                //return ApiReturnUtil.error("    "+e.getMessage());
            }
        }else {
            return new WangEditorResponse("1","    ");
        }
        String imgUrl=appConfig.getUrlpath()+"article/"+fileName;
        return new WangEditorResponse("0",imgUrl );
    }
    @Data
    private class WangEditorResponse{
        String errno;
        List data;
        public WangEditorResponse(String errno,List data){
            this.errno=errno;
            this.data=data;
        }
        public WangEditorResponse(String errno,String data){
            this.errno=errno;
            this.data=new ArrayList<>();
            this.data.add(data);
        }
    }
 }

ダイナミックプロファイルの自動注入

@Component
@Data
@ConfigurationProperties(prefix = "system") //   application.yml  myProps     
public class AppConfig {
    public String filepath;
    public String urlpath;
}

以下のアプリケーションが自動的に読み込む.ymlの変数

system:
  filepath: /vdb1/xxx/vue/resources
  #windows    filepath: D:\temp\upload
  urlpath: http://www.xxxx.cn/resources/

戻りフォーマットのアップロード
このうち/http://localhost:8888/xxxx/upload/editorは画像をアップロードするサーバ側インタフェースであり、インタフェースが返すデータフォーマットは以下の通りである(実際にデータを返す場合は、コメントを付けない!!)

    {
        // errno      ，0       。
        //            ，errno != 0，            fail              
        "errno": 0,
    
        // data      ，           
        "data": [
            "  1  ",
            "  2  ",
            "……"
        ]
    }

画像サイズの制限
デフォルトの制限画像サイズは5 Mです

//          3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024

詳細は公式ドキュメントでご覧いただけますhttps://www.kancloud.cn/wangfupeng/wangeditor3/335782