wangEditor富文本編輯器集成七牛雲做圖片上傳 — 實現單頁面初始化多個編輯器

適用場景

博客、新聞等需要特殊排版的效果展示界面

准備

• jQuery文件：https://jquery.com/download/
• 七牛雲js文件：https://developer.qiniu.com/kodo/sdk/1283/javascript
• plupload文件：https://www.plupload.com/download/
• wangEditor文件包：http://www.wangeditor.com/
• 七牛雲個人服務器地址

效果原型

代碼示例

前端代碼

引用庫文件：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/qiniu.min.js"></script>
<script type="text/javascript" src="plupload/plupload.full.min.js"></script>
<script type="text/javascript" src="wangEditor/release/wangEditor.min.js"></script>

創建DIV作為初始化編輯器的容器：

<div id="firstEditor"></div>
<br />
<div id="secondEditor"></div>

頁面加載初始化編輯器：

$(function(){
    initEditor('firstEditor','firstBtn','這是一個標題','min');
    initEditor('secondEditor','secondBtn','這是一個內容','max');
})

初始化富文本編輯器：

/*
* 初始化富文本編輯器
* editId DIV容器id
* testsubmitBtn 獲取編輯器內容按鈕id
* data 初始化編輯器內容
* height 自定義編輯器高度
*/
function initEditor(editId,testsubmitBtn,data,height){
    var E = window.wangEditor
    var editor = new E('#'+editId)
    // 自定義菜單配置
    editor.customConfig.menus = [
        'head',  // 標題
        'bold',  // 粗體
        'fontSize',  // 字號
        'fontName',  // 字體
        'italic',  // 斜體
        'underline',  // 下划線
        'strikeThrough',  // 刪除線
        'foreColor',  // 文字顏色
        'backColor',  // 背景顏色
        'list',  // 列表
        'justify',  // 對齊方式
        'image',  // 插入圖片
        'table',  // 表格
        'undo',  // 撤銷
        'redo'  // 重復
    ]
    editor.customConfig.qiniu = true
    editor.create()
    // 定義編輯器高度
    if(height == 'max'){
        $('#'+editId).children('.w-e-text-container').attr('style','border:1px solid #ccc; border-top:none; height:500px; z-index:10000;');
    }else if(height == 'min'){
        $('#'+editId).children('.w-e-text-container').attr('style','border:1px solid #ccc; border-top:none; height:200px; z-index:10000;');
    }
    $('#'+editId).attr('style','height:auto;');
    // 定義編輯器初始內容
    if (data != undefined && data != null && data != ""){
        editor.txt.html(data)
    }else{
        editor.txt.clear()
    }
    // 初始化七牛上傳
    uploadInit(editor)
    // 獲取編輯器內容
    document.getElementById(testsubmitBtn).addEventListener('click', function () {
        if(editor.txt.html()!=new String('<p><br></p>')){
            alert(editId + "內容：" + editor.txt.html());
        }
    }, false)
}

初始化七牛雲上傳：

/*
* 初始化七牛上傳的方法
* editors 編輯器對象
*/
function uploadInit(editors) {
    // 獲取相關 DOM 節點的 ID
    var btnId = editors.imgMenuId;
    var containerId = editors.toolbarElemId;
    var textElemId = editors.textElemId;
    
    // 創建上傳對象
    var uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4',    //上傳模式,依次退化
        browse_button: btnId,       //上傳選擇的點選按鈕，**必需**
        uptoken_url: 'http://localhost:8080/api/open/qiNiu/getUpToken.do', //Ajax請求upToken的Url，**強烈建議設置**（服務端提供）
        unique_names: true, // 默認 false，key為文件名。若開啟該選項，SDK會為每個文件自動生成key（文件名）
        domain: 'http://invoice.mayn.com.cn/', //bucket 域名，下載資源時用到，**必需**
        container: containerId,           //上傳區域DOM ID，默認是browser_button的父元素，
        max_file_size: '100mb',           //最大文件體積限制
        flash_swf_url: 'plupload/Moxie.swf',  //引入flash,相對路徑
        filters: {
            mime_types: [
                //只允許上傳圖片文件 （注意，extensions中，逗號后面不要加空格）
                { title: "圖片文件", extensions: "jpg,gif,png,bmp" }
            ]
        },
        max_retries: 3,                   //上傳失敗最大重試次數
        dragdrop: true,                   //開啟可拖曳上傳
        drop_element: textElemId,        //拖曳上傳區域元素的ID，拖曳文件或文件夾后可觸發上傳
        chunk_size: '4mb',                //分塊上傳時，每片的體積
        auto_start: true,                 //選擇文件后自動上傳，若關閉需要自己綁定事件觸發上傳
        init: {
            'FilesAdded': function(up, files) {
                plupload.each(files, function(file) {
                    // 文件添加進隊列后,處理相關的事情
                    printLog('on FilesAdded');
                });
            },
            'BeforeUpload': function(up, file) {
                // 每個文件上傳前,處理相關的事情
                printLog('on BeforeUpload');
            },
            'UploadProgress': function(up, file) {
                // 顯示進度
                printLog('進度 ' + file.percent)
            },
            'FileUploaded': function(up, file, info) {
                // 每個文件上傳成功后,處理相關的事情
                printLog(info);
                var domain = up.getOption('domain');
                var res = $.parseJSON(info);
                var sourceLink = domain + res.key; //獲取上傳成功后的文件的Url
                printLog(sourceLink);
                // 插入圖片到editor
                editors.cmd.do('insertHtml', '<img src="' + sourceLink + '" style="max-width:100%;"/>')
            },
            'Error': function(up, err, errTip) {
                //上傳出錯時,處理相關的事情
                printLog('on Error');
            },
            'UploadComplete': function() {
                //隊列文件處理完畢后,處理相關的事情
                printLog('on UploadComplete');
            }
        }
    });
}

function printLog(title, info) {
    window.console && console.log(title, info);
}

字段說明：

• uptoken_url：編碼調用七牛雲接口獲取請求token
• domain：個人七牛雲服務器地址

后端代碼

Java調用七牛雲接口獲取請求token：

導入包（https://developer.qiniu.com/kodo/sdk/1239/java）

<dependency>
    <groupId>com.qiniu</groupId>
    <artifactId>qiniu-java-sdk</artifactId>
    <version>[7.0.0, 7.0.99]</version>
</dependency>

java實現：

package org.tempuri;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;
import com.qiniu.util.Auth;

@Controller
@RequestMapping("api/open/qiNiu")
public class test {
    
    // 訪問密鑰
    private static final String ACCESS_KEY = "sFCRR9Ti*********************JfL26kD";
    // 應用編碼
    private static final String SECRET_KEY = "lJuSuv3G*********************oPdIVfwB";
    // 訪問空間
    private static final String BUCKET_NAME = "mayninvoice";
    
    @RequestMapping("/getUpToken")
    public void getUpToken(HttpServletRequest request, HttpServletResponse response) {
        Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);
        String token = auth.uploadToken(BUCKET_NAME);
        //組裝令牌返回前台
        String Uptoken = "{\"uptoken\":\"" + token + "\"}";
        try {
            response.setContentType("application/json;charset=utf-8");
            request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();
            PrintWriter out = response.getWriter();
            out.print(Uptoken);
            out.flush();
            out.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}

代碼下載

代碼下載