首先，下載WangEditor外掛，下載地址：https://github.com/wangfupeng1988/wangEditor/releases，下載最新的就好了，使用文件地址：

第二步，解壓檔案，我們需要的只是release中的檔案，將它放到我們專案中的靜態檔案中，然後頁面中引入wangEditor.js檔案。

第三步，使用。先簡單介紹一下該js檔案。

建立富文字:

 var E = window.wangEditor;
    var editor = new E('#editor');
    //    editor.customConfig.uploadImgShowBase64 = true;   // 使用 base64 儲存圖片
    editor.customConfig.uploadImgServer = '/wangEditor/saveImg';  //上傳圖片到伺服器
    editor.customConfig.uploadFileName = 'myFileName';
    editor.customConfig.uploadImgMaxSize = 20 * 1024 * 1024;//設定圖片大小為20M
    editor.customConfig.uploadImgTimeout = 1000000; //圖片上傳超時限制10s
    editor.customConfig.menus = [
        'head',  // 標題
        'bold',  // 粗體
        'italic',  // 斜體
        'underline',  // 下劃線
        'strikeThrough',  // 刪除線
        'foreColor',  // 文字顏色
        'backColor',  // 背景顏色
        'list',  // 列表
        'justify',  // 對齊方式
        'image',  // 插入圖片
        'code',  // 插入程式碼
        'undo',  // 撤銷
        'redo'  // 重複
    ];
    editor.create();
 

其中id為editor是我們要放入富文字的父元素。

預設富文字的選單選項是所有選單

 menus: ['head', 'bold', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'link', 'list', 'justify', 'quote', 'emoticon', 'image', 'table', 'video', 'code', 'undo', 'redo']

我們也可以選擇，自定義選單選項(選擇選項，傳入我們需要的值)

editor.customConfig.menus = [];

其他自定義屬性，請檢視wangEditor.js中config的屬性或者檢視文件

注意：所有屬性值定義一定要在建立之前定義。

第四步，圖片上傳

 editor.customConfig.uploadImgServer = '/wangEditor/saveImg';  //上傳圖片到伺服器
 editor.customConfig.uploadFileName = 'myFileName';

定義上面兩條屬性，其中uploadImgServer為後臺接收地址,uploadFileName為後臺接受檔名字

第五步，後臺接收圖片並上傳至OSS雲端儲存

匯入OSS包

 <dependency>
                <groupId>com.aliyun.oss</groupId>
                <artifactId>aliyun-sdk-oss</artifactId>
                <version>2.2.3</version>
            </dependency>
 

建立OSS例項,接收圖片資料，並上傳至OSS

 @RequestMapping(value = "saveImg", method = RequestMethod.POST)
    @ResponseBody
    public JSONObject uploadImgToOSS(HttpServletRequest request, HttpServletResponse response) {
        JSONObject jsonObject=new JSONObject();
        try {
            request.setCharacterEncoding("UTF-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        Part part = null;
        try {
            part = request.getPart("myFileName");// myFileName是檔案域的name屬性值
        } catch (IOException e) {
            e.printStackTrace();
        } catch (ServletException e) {
            e.printStackTrace();
        }
        // 包含原始檔名的字串
        String fi = part.getHeader("content-disposition");
        // 提取檔案拓展名
        String fileNameExtension = fi.substring(fi.indexOf("."), fi.length() - 1);
        // 生成實際儲存的真實檔名
        String realName = UUID.randomUUID().toString() + fileNameExtension;
       // 圖片存放的真實路徑
        String realPath = "http://windyeel.oss-cn-shanghai.aliyuncs.com/wangEditor/" + realName;
        // 將檔案寫入指定路徑下
        OSSClient client = new OSSClient(endpoint, accessId, accessKey);
        String dir = "wangEditor/";
        String ossUrl = "";
        try {
            InputStream inputStream = part.getInputStream();
            ossUrl = dir + realName;
            client.putObject("windyeel", ossUrl, inputStream);
        } catch (Exception e) {
            e.printStackTrace();
        }
        client.shutdown();
        // 返回圖片的URL地址
        JSONArray jsonArray=new JSONArray();
        jsonArray.add(realPath);
        jsonObject.put("errno",0);
        jsonObject.put("data",jsonArray);
        return jsonObject;
    }

注意點：1、myFileName是剛剛設定的uploadFileName

2、endpoint是OSS地址: oss-cn-shanghai.aliyuncs.com，accessId是使用者名稱，accessKey是密碼；

3、realPath:圖片真實儲存路徑,需要返回給前臺

4、返回圖片地址,json的鍵必須為data

第六步，前臺接收到圖片真實地址，這時候你就可以將地址儲存到資料庫中，而不用將整個圖片裝換成位元組碼存到資料庫中，避免了資料庫讀取耗費的時間

注意：大圖片上傳可能會失敗，需要設定上傳檔案大小，請檢視博主其他文章。

如果覺得OK，請點個贊吧！