SpringBoot2整合富文字編輯器wangEditor(含檔案上傳)攻略

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

背景

最近要用到一個富文字編輯器，記得遙遠的年代，調過Kingeditor、Ueditor。。。但是那些都很重，，，於是最近經常再留意這件事，直到最近看到一個wangEditor，體驗了一下，又輕又好用，功能也相對豐富夠用。

wangEditor有對應的CDN，本地無需放置，直接引用就可以了。

http://cdn.staticfile.org/wangEditor/10.0.13/fonts/w-e-icon.woff

http://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.css

http://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.js

http://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.min.css

http://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.min.js

http://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.min.js.map

html頁面

最簡單的講，只需要三行js程式碼，可以看下下面具體的demo，直接可以執行的。

var E = window.wangEditor
var editor2 = new E(’#div3’)
editor2.create()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LikeU.Admin</title>
    
<link rel="icon" href="favicon.ico" />

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 4 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Ionicons -->
<link href="https://cdn.staticfile.org/ionicons/4.1.2/css/ionicons.min.css" rel="stylesheet">

<link href="https://cdn.staticfile.org/codemirror/5.38.0/codemirror.min.css" rel="stylesheet">
<!--富文字編輯器wangEditor-->
<link href="https://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.min.css" rel="stylesheet">
<link href="https://cdn.staticfile.org/wangEditor/10.0.13/fonts/w-e-icon.woff" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->


 
<!-- jQuery -->
<script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="https://cdn.staticfile.org/fastclick/1.0.6/fastclick.min.js"></script>
<script src="https://cdn.staticfile.org/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
<script src="https://cdn.staticfile.org/layer/2.3/layer.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.38.0/codemirror.min.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.38.0/addon/display/placeholder.min.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.38.0/mode/clike/clike.min.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.38.0/mode/sql/sql.min.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.38.0/mode/xml/xml.min.js"></script>
<!--富文字編輯器wangEditor-->
<script src="https://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.min.js"></script>


</head>
<body>
    <div class="container">
        <nav class="navbar navbar-dark bg-primary">
            <a class="navbar-brand" href="http://github.com/moshowgame/SpringBootCodeGenerator">SpringBootCodeGenerator</a>
            <ul class="nav navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="http://blog.csdn.net/moshowgame">大狼狗CSDN</a>
                </li>
            </ul>
        </nav>
    </div>


    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
        <div class="container">
            <h1>Spring Boot Code Generator!</h1>
            基於<code>SpringBoot2</code>+<code>Freemarker</code>的程式碼生成器，用<code>DDL SQL</code>語句生成<code>JPA</code>/<code>JdbcTemplate</code>/<code>Mybatis</code>/<code>BeetlSQL</code>相關程式碼，支援<code>mysql</code>/<code>oracle</code>/<code>pgsql</code>三大資料庫。以<code>釋放雙手</code>為目的，各大模板也在陸續補充和優化。歡迎大家多多提交模板和交流想法，如果發現有SQL語句不能識別，請<a href="https://github.com/moshowgame/SpringBootCodeGenerator/issues">留言</a>給我分析，謝謝！
            </p>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">標題名稱</span>
                </div>
                <input type="text" class="form-control" id="articleTitle" name="articleTitle" placeholder="標題">
                <div class="input-group-prepend">
                    <span class="input-group-text">文章型別</span>
                </div>
                <input type="text" class="form-control" id="articleType" name="articleType" placeholder="文章型別：1嘉賓推薦 2戀愛教程 3mbti性格 4vip服務 5成功案例 6likeu科學依據">
            </div>
            <!--<textarea id="ddlSqlArea" placeholder="請輸入文章內容..." class="form-control" style="height: 250px;">

            </textarea>--><br>
            <div id="editor">
                <p>歡迎使用富文字編輯器</p>
            </div>
            <p><button class="btn btn-primary btn-lg" id="btnGenCode" role="button">儲存 »</button></p>
        </div>
    </div>
</body>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#editor')
        // 或者 var editor = new E( document.getElementById('editor') )
        // 配置伺服器端地址
        editor.customConfig.uploadImgServer = 'http://localhost:8888/xxxx/upload/editor'
        //配置指定檔名
        editor.customConfig.uploadFileName = 'file'
        //如果圖片不大，可以用base64儲存
        //editor.customConfig.uploadImgShowBase64 = true
        editor.create()
    </script>
</html>

在這裡插入圖片描述

springboot的controller

核心上傳程式碼其實應該差不多，大家可以根據自己的業務邏輯來生成或者做一些處理。

@RestController
@RequestMapping("/upload")
public class UploadController {
	//這個注入配置檔案，主要是因為本地的路徑和伺服器url路徑需要動態配置，可以自己寫死，也可以動態獲取
    @Autowired
    AppConfig appConfig;
    
    @RequestMapping("/editor")
    @ResponseBody
    public Object editor(@RequestParam("file") MultipartFile file) {
        String fileName ="";
        if(!file.isEmpty()){
            //返回的是位元組長度,1M=1024k=1048576位元組 也就是if(fileSize<5*1048576)
            if(file.getSize()>(1048576*5)){return ApiReturnUtil.error("檔案太大，請上傳小於5MB的");}
            String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
            if(StringUtils.isBlank(suffix)){return ApiReturnUtil.error("上傳檔案沒有後綴，無法識別");}

            fileName = System.currentTimeMillis()+suffix;
            String saveFileName = appConfig.getFilepath()+"/article/"+fileName;
            System.out.println(saveFileName);
            File dest = new File(saveFileName);
            System.out.println(dest.getParentFile().getPath());
            if(!dest.getParentFile().exists()){ //判斷檔案父目錄是否存在
                dest.getParentFile().mkdir();
            }
            try {
                file.transferTo(dest); //儲存檔案
            } catch (Exception e) {
                e.printStackTrace();
                return new WangEditorResponse("1","上傳失敗"+e.getMessage());
                //return ApiReturnUtil.error("上傳失敗"+e.getMessage());
            }
        }else {
            return new WangEditorResponse("1","上傳出錯");
        }
        String imgUrl=appConfig.getUrlpath()+"article/"+fileName;
        return new WangEditorResponse("0",imgUrl );
    }
    @Data
    private class WangEditorResponse{
        String errno;
        List<String> data;
        public WangEditorResponse(String errno,List<String> data){
            this.errno=errno;
            this.data=data;
        }
        public WangEditorResponse(String errno,String data){
            this.errno=errno;
            this.data=new ArrayList<>();
            this.data.add(data);
        }
    }
 }

自動注入動態配置檔案

@Component
@Data
@ConfigurationProperties(prefix = "system") // 接收application.yml中的myProps下面的屬性
public class AppConfig {
    public String filepath;
    public String urlpath;
}

會自動讀取以下application.yml中的變數

system:
  filepath: /vdb1/xxx/vue/resources
  #windows下用這個filepath: D:\temp\upload
  urlpath: http://www.xxxx.cn/resources/

上傳返回格式

其中/http://localhost:8888/xxxx/upload/editor是上傳圖片的伺服器端介面，介面返回的資料格式如下（實際返回資料時，不要加任何註釋！！！）

    {
        // errno 即錯誤程式碼，0 表示沒有錯誤。
        //       如果有錯誤，errno != 0，可通過下文中的監聽函式 fail 拿到該錯誤碼進行自定義處理
        "errno": 0,
    
        // data 是一個數組，返回若干圖片的線上地址
        "data": [
            "圖片1地址",
            "圖片2地址",
            "……"
        ]
    }

限制圖片大小

預設限制圖片大小是 5M

// 將圖片大小限制為 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024

更多詳情可以到官方文件去看https://www.kancloud.cn/wangfupeng/wangeditor3/335782

SpringBoot2整合富文字編輯器wangEditor(含檔案上傳)攻略

背景最近要用到一個富文字編輯器，記得遙遠的年代，調過Kingeditor、Ueditor。。。但是那些都很重，，，於是最近經常再留意這件事，直到最近看到一個wangEditor，體驗了一下，又輕又好用，功能也相對豐富夠用。 wangEditor有對應的CD

富文字編輯器WangEditor,實現圖片上傳OSS雲端儲存

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

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

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

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

summernote富文字編輯器實現圖片新增上傳和刪除圖片

summernote的基本使用 HTML程式碼 //div添加個id就可以 <div id="summernote" ></div> 然後JS操作 //例項化呼叫 var $summernote = $('#summernote').summernote(

ssm+maven專案中加入“百度富文字編輯器”，實現圖片上傳

1.在UEditor官方下載編輯器。2.解壓壓縮檔案到資料夾，因為預設的資料夾名字過長，建議重新命名一下資料夾名，我這裡命名為ueditor資料夾中對應的目錄為3.將整個資料夾copy到專案webapp目錄下，（我這裡用的是IDEA，不知道什麼原因直接往IDEA開啟的專案裡拷

適用於React的富文字編輯器 -- react-umedito 圖片上傳本地伺服器解決方案

react-umeditor，這是liuhong1happy同學將百度富文字編輯器用react封裝的一個元件。安裝：npm install react-umeditor –save 使用：reac

MVC3.0下使用百度富文字編輯器ueditor1.3.6上傳圖片

本文方法有不妥之處，希望有弄明白的大蝦指點指點 1：在Web應用程式中，檔案目錄結構其中ueditor是富文字編輯器資料夾，upload資料夾則用來存放將要上傳的圖片檔案 2：在html頁面引入相應檔案，並初始化富文字編輯器初始化富文字編輯器，可以用<scr

百度富文字編輯器的多圖上傳單獨放在專案

線上搜尋的功能不是很好用，有待改進！需要改ueditor/php/config.json檔案的路徑 "imagePathFormat": "/upload/{filename}",/* 上傳儲存路

django學習——xadmin中整合富文字編輯器ueditor

xadmin為django後臺管理系統admin的升級版，點選進入github 在對後臺進行編輯時，採用百度開源的富文字編輯器ueditor，本文采用djangoueditor，源程式點此進入。由於作者不再對其進行維護，這個版本不再適用於Python3版本，P

Vue + Webpack 完美整合富文字編輯器 TinyMce

<template> <textarea :id="id" :value="value"></textarea> </template> <script> // Import TinyMCE import tinym

HTML富文字編輯器wangEditor的使用

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

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

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

SpringBoot整合富文字編輯器（UEditor）

UEditro是一款比較好用的富文字編輯器，所謂的富文字編輯器就是和伺服器互動的資料不是普通的字串檔案，而是一些內容包含比較廣的字串，一般是指的html頁面，目前比較好用的是百度的UEditor，到官方網站下載： http://ueditor.baidu.co

富文字編輯器 wangEditor 使用

軟體特點支援 npm 直接引用支援響應式，自動縮放沒有官方的例項銷燬方案，專案中使用的是作者在github給出的臨時方案支援一個頁面多個編輯器不支援一個頁面多個編輯器同時使用地圖後端需要進行相應配置安裝 wangEditornpm install wangeditor --save程式碼引入 wangEdit

THINKPHP5.1使用富文字編輯器wangEditor

首先，本文中的程式碼在不使用AJAX的場景中。我們需要知道幾點： 0、wangEditor v3 預設只支援div方式顯示出編輯器。 1、wangEditor 從v3版本開始不支援 textarea ，但是可以通過onchange來實現 textarea 中提交富文字

簡潔富文字編輯器wangEditor

建立方式有兩種,非常簡單第一種:直接建立 html: <div id="editor"> <p>歡迎使用 wangEditor 富文字編輯器</p> </div> js: // 引用 var E = re

Flask學習10：Flask專案整合富文字編輯器CKEditor 上傳圖片

CKEditor下載地址：https://ckeditor.com/ckeditor-4/download/ 訪問CKeditor官方網站，進入下載頁面，選擇Standard Package（一般情況

SSM整合富文字編輯器editormd、常用Api、圖片上傳、回顯

前言：幾天前，集成了百度的ueditor，感覺不符合現代前端的審美邏輯，並且肥胖，pass了，偶然發現editormd，覺得美滋滋，一路踩坑下來，特此記錄 editormd:支援 AMD / CMD 模組化載入（支援 Require.js & Se

Flask專案整合富文字編輯器CKeditor

本文介紹如何在Flask專案中整合富文字編輯器CKeditor，並實現圖片上傳、檔案上傳、視訊上傳等功能。 CKeditor是目前最優秀的可見即可得網頁編輯器之一，它採用JavaScript編寫。具備功能強大、配置容易、跨瀏覽器、支援多種程式語言、開源等特點。它非常流行，網

SpringBoot2整合富文字編輯器wangEditor(含檔案上傳)攻略

背景

html頁面

springboot的controller

上傳返回格式

限制圖片大小

相關推薦