1. 程式人生 > >百度富文字 總結

百度富文字 總結

百度富文字 使用總結:

java  vue+springboot+mybatis

開始不知道jsp檔案裡面的jar及相關檔案為什麼載入不到,後來直接不用jsp及下面的檔案稍微改變配置檔案的存放地址和參考其他同學載入配置,就解決了問題。

功能確實強大而且頁面也比較不錯,文件清晰簡潔,但是使用上傳圖片功能的時候也是和各位同胞一樣遇到了問題,感覺必須要做個記錄了,也算自己留個文件,具體的配置步驟如下:

第一步:當然是下載百度富文字 外掛:

下載後的

第二步:在自己的專案目錄static下新建資料夾ueditor 將圖片2 中除jsp資料夾外全部複製到專案下新建的ueditor檔案下,將jsp中的配置檔案複製到專案目錄resources資料夾下,在工具包中新建ueditor工具包將以下第三張圖片中的全部檔案複製進去檔案下載地址:連結:https://pan.baidu.com/s/1wsx3ApYoDGtj5cmRX58jRg  提取碼:14hq   

新增如下jar

<dependency>
            <groupId>com.github.qiuxiaoj</groupId>
            <artifactId>ueditor</artifactId>
            <version>1.1.1</version>
        </dependency>
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20170516</version>
        </dependency>

第三步:把所有該應用到的檔案準備完畢後--我們修改上傳圖片的伺服器地址和訪問地址

@RestController
@RequestMapping("/ueditor")
public class UeditorController extends AbstractController {
    @RequestMapping("/exec")
    public String exec(HttpServletRequest request)throws UnsupportedEncodingException {
        request.setCharacterEncoding("utf-8");
        String rootPath = request.getSession().getServletContext().getRealPath("/");
        return new ActionEnter( request, rootPath ).exec();
    }
//上傳圖片地址 及 返回
    @RequestMapping("/uploadimage")
    @ResponseBody
    public Map<String, Object> uploadNewsImg(MultipartFile upfile, HttpServletRequest request) {
        String path = Thread.currentThread().getContextClassLoader().getResource("").getPath() + "//static//upload//";
        File file = new File(path);
        if (!file.exists() && !file.isDirectory()) {
            file.mkdirs();
        }
        String oldName = upfile.getOriginalFilename();
        String hz = oldName.substring(oldName.lastIndexOf("."));
        UUID uuid = UUID.randomUUID();
        file = new File(path, uuid.toString() + hz);

        String fileName = uuid.toString() + hz;
        Map<String, Object> result = new HashMap<String,Object>();
        try {
            upfile.transferTo(file);
        } catch (IllegalStateException e) {
            logger.error("富文字編輯器圖片上傳失敗,引數異常:"+e);
        } catch (IOException e1) {
            logger.error("富文字編輯器圖片上傳失敗io異常:"+e1);
        }
        result.put("state", "SUCCESS");
        result.put("url",  fileName);
        result.put("original", "");
        result.put("type", hz);
        result.put("size", upfile.getSize());
        result.put("title", fileName);
        return result;
    }

}

imagePathFormat上傳的可以看以上程式碼部分 上傳圖片 及返回

imageUrlPrefix 圖片訪問路徑字首 一般為/專案名/upload/

js部分載入

 // /** 富文字 ***/
    window.UEDITOR_CONFIG.initialFrameWidth = 784;
    window.UEDITOR_CONFIG.initialFrameHeight = 300;
    UE.getEditor('editor');
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
        console.log(action);
        if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
            //XXXX專案名
            return 'http://localhost:8089/XXXX/ueditor/uploadimage';
        } else if (action == 'uploadvideo') {
            // return 'http://a.b.com/video.php';
            return null;
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }

到此如果基本一樣的話就可以實現圖片上傳儲存,及回顯的功能了

後期如有問題再補充

如有不足請多指教!