wangEditor - 輕量級web富文本編輯器（可帶圖片上傳）

時間 2019-11-20

標籤 wangeditor 輕量級 web 文本編輯器圖片上傳欄目 HTML 简体版

原文原文鏈接

業務需求：javascript

經過後臺編輯文章和圖片，上傳到前端界面，展現新聞消息模塊。這個時候，須要一款簡潔的編輯器，百度編輯器是最經常使用的一種，可是功能太過於複雜，而wangEditor - 輕量級web富文本編輯器，配置方便，使用簡單。支持 IE10+ 瀏覽器，值得擁有。html

wangEditor —— 輕量級 web 富文本編輯器，配置方便，使用簡單。支持 IE10+ 瀏覽器。前端

官網：www.wangEditor.com
文檔：www.kancloud.cn/wangfupeng/wangeditor3/332599
源碼：github.com/wangfupeng1988/wangEditor

使用示例：java

前端代碼：jquery

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .toolbar {
                border: 1px solid #ccc;
                width: 800px;
            }
            
            .text {
                border: 1px solid #ccc;
                height: 400px;
                width: 800px;
            }
        </style>
    </head>

    <body>
        <div id="div1" class="toolbar"></div>
        <div style="padding: 5px 0; color: #ccc"></div>
        <div id="div2" class="text">
            <p>請在此輸入內容</p>
        </div>
    </body>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="release/wangEditor.min.js"></script>
    <script>
        var E = window.wangEditor
        var editor = new E('#div1', '#div2') // 兩個參數也能夠傳入 elem 對象，class 選擇器
        //開啓debug模式
        editor.customConfig.debug = true;
        // 關閉粘貼內容中的樣式
        editor.customConfig.pasteFilterStyle = false
        // 忽略粘貼內容中的圖片
        editor.customConfig.pasteIgnoreImg = true
        // 使用 base64 保存圖片
        //editor.customConfig.uploadImgShowBase64 = true

        // 上傳圖片到服務器
        editor.customConfig.uploadFileName = 'myFile'; //設置文件上傳的參數名稱
        editor.customConfig.uploadImgServer = 'upload.do'; //設置上傳文件的服務器路徑
        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 將圖片大小限制爲 3M
        //自定義上傳圖片事件
        editor.customConfig.uploadImgHooks = {
            before: function(xhr, editor, files) {

            },
            success: function(xhr, editor, result) {
                console.log("上傳成功");
            },
            fail: function(xhr, editor, result) {
                console.log("上傳失敗,緣由是" + result);
            },
            error: function(xhr, editor) {
                console.log("上傳出錯");
            },
            timeout: function(xhr, editor) {
                console.log("上傳超時");
            }
        }

        editor.create()
    </script>

</html>

服務器代碼git

導入依賴：程序員

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>

pojo：github

import java.util.Arrays;
 
public class WangEditor {
    
    private Integer errno; //錯誤代碼，0 表示沒有錯誤。
    private String[] data; //已上傳的圖片路徑
    
    public WangEditor() {
        super();
    }
    public WangEditor(String[] data) {
        super();
        this.errno = 0;
        this.data = data;
    }
    public Integer getErrno() {
        return errno;
    }
    public void setErrno(Integer errno) {
        this.errno = errno;
    }
    public String[] getData() {
        return data;
    }
    public void setData(String[] data) {
        this.data = data;
    }
    @Override
    public String toString() {
        return "WangEditor [errno=" + errno + ", data=" + Arrays.toString(data)
                + "]";
    }
    
 
}

Controllerweb

//圖片上傳
    @RequestMapping(value = "/upload",method=RequestMethod.POST)
    @ResponseBody
    public WangEditor uploadFile(
            @RequestParam("myFile") MultipartFile multipartFile,
            HttpServletRequest request) {
 
        try {
            // 獲取項目路徑
            String realPath = request.getSession().getServletContext()
                    .getRealPath("");
            InputStream inputStream = multipartFile.getInputStream();
            String contextPath = request.getContextPath();
            // 服務器根目錄的路徑
            String path = realPath.replace(contextPath.substring(1), "");
            // 根目錄下新建文件夾upload，存放上傳圖片
            String uploadPath = path + "upload";
            // 獲取文件名稱
            String filename = MoteUtils.getFileName();
            // 將文件上傳的服務器根目錄下的upload文件夾
            File file = new File(uploadPath, filename);
            FileUtils.copyInputStreamToFile(inputStream, file);
            // 返回圖片訪問路徑
            String url = request.getScheme() + "://" + request.getServerName()
                    + ":" + request.getServerPort() + "/upload/" + filename;
            
            String [] str = {url};
            WangEditor we = new WangEditor(str);
            return we;
        } catch (IOException e) {
            log.error("上傳文件失敗", e);
        }
        return null;
 
    }

效果以下所示：編程

就是這麼的簡單方便，三分鐘便可上手使用，在衆多的富文本編輯器中，尤爲是帶圖片上傳的需求，這款真是當之無愧的存在，簡單輕便soeasy。

注：