使用wangEditor輕量級的富文字編輯器,來批量上傳圖片

阿新 • • 發佈：2019-01-15

1.wangEditor編輯器

wangEditor官網
相對其他幾個編輯器來說, wangEditor還是比較功能齊全的, 而且用起來上手也快.

這裡寫圖片描述

缺點就是表情不多, 就內建了幾個新浪表情和emoji, 不過可以自己拓展 , 然後選單的圖示也不太好看

2. 初始化

使用CDN：//unpkg.com/wangeditor/release/wangEditor.min.js
使用bower下載：bower install wangEditor （前提保證電腦已安裝了bower）

<!DOCTYPE html>
<html>
<head>
    <meta 
 charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>
    <div id="editor">
        <p>歡迎使用 <b>wangEditor</b> 富文字編輯器</p>
    </div>

    <!-- 注意， 只需要引用 JS，無需引用任何 CSS ！！！-->
    <script type="text/javascript" src="/wangEditor.min.js" 
></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#editor')
        // 或者 var editor = new E( document.getElementById('editor') )
        editor.create()
    </script>
</body>
</html>

如果想要自定義選單寬度和輸入框的大小的話 , 可以選擇選單欄和輸入框分開

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor 選單和編輯器區域分離</title>
    <style type="text/css">
        .toolbar {
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="div1" class="toolbar">
    </div>
    <div style="padding: 5px 0; color: #ccc">中間隔離帶</div>
    <div id="div2" class="text"> <!--可使用 min-height 實現編輯區域自動增加高度-->
        <p>請輸入內容</p>
    </div>

    <script type="text/javascript" src="/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor1 = new E('#div1', '#div2')  // 兩個引數也可以傳入 elem 物件，class 選擇器
        editor1.create()
    </script>
</body>
</html>

這裡寫圖片描述

3. 上傳圖片

3.1 官方文件的方式

初始化富文字編輯器和html的程式碼就根據上面的自己調整就好了 , 這裡直接說重點, js程式碼:

$(function(){
    /*富文字編輯器初始化*/
    var E = window.wangEditor;
    var editor = new E('#div1', '#div2');
    var remarks = $('#remarks');

    /* 處理上傳圖片的controller路徑 */
   editor.customConfig.uploadImgServer = basePath + 'uploadFile/wangEditUploadImag';
    /* 定義上傳圖片的預設名字 */
    editor.customConfig.uploadFileName ='file';
    // 限制一次最多上傳 10 張圖片
    editor.customConfig.uploadImgMaxLength = 10;
     // 配置伺服器端地址
    editor.customConfig.uploadImgServer = '/upload';
    editor.customConfig.uploadImgHooks = {
        fail:function (xhr, editor, result) {
             // 圖片上傳並返回結果，但圖片插入錯誤時觸發
             alert(result.msg);
        }
     }
     editor.create()

})

這裡介面返回的資料格式如下: 不要註釋

{
    // errno 即錯誤程式碼，0 表示沒有錯誤。
    //       如果有錯誤，errno != 0，可通過下文中的監聽函式 fail 拿到該錯誤碼進行自定義處理
    "errno": 0,

    // data 是一個數組，返回若干圖片的線上地址
    "data": [
        "圖片1地址",
        "圖片2地址",
        "……"
    ]
}

java

@RequestMapping(value = "/wangEditUploadImag", method = RequestMethod.POST)
    @ResponseBody
    public String wangEditUploadImag(@RequestParam MultipartFile file, HttpServletRequest request,
                                 HttpServletResponse response) {

        ConcurrentMap<String, Object> object = new ConcurrentHashMap<>();

        try {
            /*
            * servcie儲存file
            * 這裡根據自己的上傳伺服器方法來實現
            */
            String url = fileService.saveImg(file);

            //成功的話
            object.put("errno","0");
            object.put("data", new String[]{url});
            return GsonUtil.toJson(object);
        } catch (Exception e) {
            logger.error("UploadController>>>wangEditUploadImag: "+Exceptions.getStackTraceAsString(e));
            //這裡errno隨便設定多少,只要不是0
            object.put("errno","200");
            object.put("msg","伺服器異常");
            return GsonUtil.toJson(object);
        }
    }

但是我發現這種方式,只能上傳一張圖片(可能是我哪裡沒配置好)

3.1 批量上傳圖片

js:

$(function(){
    /*富文字編輯器初始化*/
    var E = window.wangEditor;
    var editor = new E('#div1', '#div2');
    var remarks = $('#remarks');

    //自己定義上傳的方法
     editor.customConfig.customUploadImg = function (files, insert) {
            var daw = new FormData();
            for(var i=0;i<files.length;i++){
                daw.append("files",files[i]);
            }
            index = layer.load(1, {
                shade: [0.1,'#fff'] //0.1透明度的白色背景
            });

            $.ajax({
                url:basePath + 'uploadFile/wangEditUploadImag',
                type: "POST",
                data: daw,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success:function(da){
                    layer.close(index);
                    if(da.errno == 0){
                        for(var j=0;j<da.data.length;j++){
                            insert(da.data[j]);
                        }
                    }else{
                        alert(da.msg);
                        return;
                    }
                }
            });
        }   

     editor.create()

})

java

    @RequestMapping(value = "/wangEditUploadImag", method = RequestMethod.POST)
    @ResponseBody
    public Object wangEditUploadImag(@RequestParam(value = "files", required = false) List<MultipartFile> files, HttpServletRequest request) {

        ConcurrentMap<String, Object> object = new ConcurrentHashMap<>();
        String imgUrls[] = new String[files.size()];
        try {
            if(files != null&&files.size()>0) {
                    for (int i = 0; i < files.size(); i++) {
                        MultipartFile file = files.get(i);
                        /*
                        * servcie儲存file
                        * 這裡根據自己的上傳伺服器方法來實現
                        */
                        String url = fileService.saveImg(file);
                        imgUrls[i] = url ;

                    }
                }
        //成功的話
        object.put("errno","0");
        object.put("data", imgUrls);
        return GsonUtil.toJson(object);
        } catch (Exception e) {
            logger.error("UploadController>>>wangEditUploadImag: "+Exceptions.getStackTraceAsString(e));
            //這裡errno隨便設定多少,只要不是0
            object.put("errno","200");
            object.put("msg","伺服器異常");
            return GsonUtil.toJson(object);
        }
    }

使用wangEditor輕量級的富文字編輯器,來批量上傳圖片

1.wangEditor編輯器 wangEditor官網相對其他幾個編輯器來說, wangEditor還是比較功能齊全的, 而且用起來上手也快. 缺點就是表情不多, 就內建了幾個新浪表情和emoji, 不過可以自己拓展 , 然後選單的圖示也不太好看

ueditor富文字編輯器跨域上傳圖片解決辦法

在使用百度富文字編輯器的過程中,如果是有一臺單獨的圖片伺服器就需要將上傳的圖片內容放到圖片伺服器,也就是比如在a.com的編輯器上傳圖片,圖片要儲存到img.com的跨域上傳圖片功能,而在ueditor官方文件中說不支援單圖上傳的跨域, 網上查了一下各種花裡胡哨,一頓操作猛如虎,比如加document.dom

富文字編輯器ckeditor的上傳圖片配置

以前在工作中用過富文字編輯器，因為以前沒有用過這種東西，所以在使用的時候遇到了一些問題，就是儲存的時候，文字可以正常儲存，但是圖片無法儲存。後來經過配置解決了這個問題，對於新手來說，這個配置可能有點複雜，所以將它記錄下來。首先新建一個ashx檔案，程式碼如下public cl

超好用的富文字編輯器froalaEditor（方便傳圖片和視訊等）

最近專案有個文章管理功能，我對比了很多富文字編輯器，有的是上傳圖片不方便，有的是複製貼上不方便，有的是但編輯器裡面不能改變圖片大小，最後，我找到了froalaEditor,可以說是集各種功能為一身，不但介面清爽，功能也十分全面，插入圖片和視訊都很方便，自己可以到

layui富文字編輯器layedit增加上傳視訊與音訊功能

改動效果： layui2.4.3並沒有視訊、音訊等上傳功能，不過還好，目前有一個基於layui2.4.3的layedit擴充套件,增加了視訊上傳、字型顏色等等。首先去下載一個layedit擴充套件檔案：中轉站根據說明替換layedit.js，直接呼叫就會出現上面的效果，注意，編

輕量級富文字編輯器wangEditor原始碼結構介紹

1. 引言　　wangEditor——一款輕量級html富文字編輯器（開源軟體）　　從我釋出wangEditor到現在，大概有七八個月了，隨著近期增加的插入視訊，表情，地圖這三個功能，目前為止基本的功能已經大體完善了。這期間也修改了幾個bug，都是各位網友反映的。至

wangEditor+SringBoot富文字編輯器使用（圖片上傳）

最近專案中使用到了wangEditor外掛，在此記錄使用過程。思路：點選外掛中上傳圖片，圖片上傳至伺服器臨時圖片資料夾下，當最後點選確認儲存按鈕時，再把臨時資料夾下的圖片複製到正式的資料夾下面。在HTML中引入wangEditor.js： <!--引入

React中使用富文字編輯器Quill，支援貼上圖片

最近專案中需要用到富文字編輯器，並且客戶明確提出需要實現可以直接截圖貼上到文字框中。由於我們的前端是用react寫的，於是就去參考了知乎的實現，發現知乎的富文字框是可以直接貼圖進去的，但由於看不到原始碼，只能瀏覽器除錯看了一下，發現他就是一個可編輯的div，

【ASP.NET】9.解決百度富文字編輯器UEditor往後臺傳資料寫入資料庫時，出現錯誤：檢測到有潛在危險的Request

解決方法：把傳資料的方式換一下，在函式上面新增[ValidateInput(false)]，如果是winform頁面，在aspx頁面裡新增ValidateRequest="false"%@ Page V

Django中富文字編輯器KindEditor的使用和圖片上傳

Blog中有文章Model，文章內容會包括各種格式的資料，比如：圖片、超連結、段落等。為了達到這個目的，我們可以使用富文字編輯器。我們有多重選擇來使用富文字編輯器，比如kindeditor、django-ckeditor、自定義ModelAdmin的媒體檔案。這樣就將kindeditor加上了富文字編輯器。4

ueditor富文本編輯器跨域上傳圖片解決辦法

etop cee 訪問第一步支持 fun 初始化處理顯示在使用百度富文本編輯器的過程中,如果是有一臺單獨的圖片服務器就需要將上傳的圖片內容放到圖片服務器,也就是比如在a.com的編輯器上傳圖片,圖片要保存到img.com的跨域上傳圖片功能,而在ueditor官方文

教你如何呼叫百度編輯器ueditor的上傳圖片、上傳檔案等模組

出於興趣愛好，前段時間自己嘗試寫了一個叫simple的cms，裡面使用了百度ueditor編輯器，發現它的多圖片上傳模組很不錯，用起來很方便，又可以選擇已經上傳好的圖片。正好我又是個懶人，發現有現成的自己就不想新開發了。於是我就想，是不是可以呼叫這個上傳模板為自己所用呢？

wangEditor富文字編輯器使用及圖片上傳

vue中引入wangEditor富文字編輯器

1.wangEditor —— 輕量級 web 富文字編輯器，配置方便，使用簡單。支援 IE10+ 瀏覽器。下載wangEditor：npm install wangeditor（英文小寫）官網：www.wangEditor.com 文件：www.kancloud.cn/wa

vue中同時使用element元件的upload上傳圖片和wangEditor富文字編輯器

使用wangEditor富文字編輯器遇到的問題總結

怎麼使用和安裝我就不詳細說了，文件寫得很清楚，https://www.kancloud.cn/wangfupeng/wangeditor3/332599 1、當螢幕縮時，富文字編輯器的選項會被隱藏，如下圖官網的demo：當螢幕變小時，選單選項就超出了富文字編輯器的區域，撤回和恢復已經隱藏不見

vue2.0專案使用wangEditor富文字編輯器

首先 npm install wangeditor 然後，直接寫就行，也無需引入css樣式 <template> <div class="detailPage"> <div id="editor">

wangEditor富文字編輯器的簡單使用

第二步：專案中引入js 第三步：jsp頁面中使用 <%@ page language="java" contentType="text/html; charset=UTF-8"

【vue】使用wangeditor富文字編輯器

前言：本專案需要一個輕量級的，能夠顯示原始碼的富文字編輯器。經查詢對比後，選擇wangeditor，但是發現wangeditor3（最新版）中沒有展示原始碼的功能，故選擇wangeditor2。使用方法： 1.下載：選擇npm安裝：因為目前預設版本為3.

HTML富文字編輯器wangEditor的使用

HTML富文字編輯器wangEditor的使用官網 http://www.wangeditor.com/ 用法官方文件已經講得很清楚了，我這裡只貼出程式碼，方便以後自己貼上複製用用到的CSS wangEditor-fullscreen-plugin.css

使用wangEditor輕量級的富文字編輯器,來批量上傳圖片

1.wangEditor編輯器

2. 初始化

3. 上傳圖片

3.1 官方文件的方式

3.1 批量上傳圖片

相關推薦