wangEditor - 轻量级web富文本编辑器(可带图片上传)

业务需求:

通过后台编辑文章和图片,上传到前端界面,展示新闻消息模块。这个时候,需要一款简洁的编辑器,百度编辑器是最常用的一种,但是功能太过于复杂,而wangEditor - 轻量级web富文本编辑器,配置方便,使用简单。支持 IE10+ 浏览器,值得拥有。

图片.png

wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单。支持 IE10+ 浏览器。

使用示例:

前端代码:

<!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>

服务器代码

导入依赖:

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

pojo:

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)
                + "]";
    }
    
 
}

Controller

//图片上传
    @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;
 
    }
效果如下所示:

图片.png

就是这么的简单方便,三分钟即可上手使用,在众多的富文本编辑器中,尤其是带图片上传的需求,这款真是当之无愧的存在,简单轻便soeasy。

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,私信回复1,拉你进前端技术交流群

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

新手指南:DVWA-1.9全级别教程(完结篇,附实例)之XSS

* 本文原创作者:lonehand,转载请注明来自FreeBuf.COM 目前,最新的DVWA已经更新到1.9版本(http://www.dvwa.co.uk...

1.5K50
来自专栏编程坑太多

react-native组建wechat

15930
来自专栏乐沙弥的世界

基于Linux (RHEL 5.5) 安装Oracle 10g RAC

    本文所描述的是在Red Hat 5.5下使用vmware server 来安装Oracle 10g RAC(OCFS + ASM),本文假定你的RHEL...

17130
来自专栏运维技术迷

解决Sublime在LinuxMint下无法输入中文的问题

环境说明: 操作系统: Linux Mint 18 MATE 输入法管理:fcitx 一、创建sublime_imfix.c文件 进入sublime安装目录...

46770
来自专栏大闲人柴毛毛

手把手0基础项目实战(三)——教你开发一套电商平台的安全框架

写在最前 本文是《手把手项目实战系列》的第三篇文章,预告一下,整个系列会介绍如下内容: 《手把手0基础项目实战(一)——教你搭建一套可自动化构建的微服务框架(S...

48360
来自专栏aoho求索

微服务架构中整合网关、权限服务

前言:之前的文章有讲过微服务的权限系列和网关实现,都是孤立存在,本文将整合后端服务与网关、权限系统。安全权限部分的实现还讲解了基于前置验证的方式实现,但是由于与...

66190
来自专栏Gaussic

使用IntelliJ IDEA开发SpringMVC网站(四)用户管理 顶

访问GitHub下载最新源码:https://github.com/gaussic/SpringMVCDemo

23120
来自专栏Java帮帮-微信公众号-技术文章全总结

02.WebService_使用三要素

02.WebService_使用三要素 一、Java中WebService规范 JAVA 中共有三种WebService 规范,分别是JAX-WS、J...

38260
来自专栏玄魂工作室

Hacker基础之Linux篇:基础Linux命令十六

今天我们来学习几个小知识,不一定是Linux的命令,都是用于查看Linux的系统信息的

17530
来自专栏IT笔记

SpringBoot开发案例之微信小程序文件上传

最近在做一个口语测评的小程序服务端,小程序涉及到了音频文件的上传,按理说应该统一封装一个第三方上传接口服务提供给前段调用,但是开发没有那么多道理,暂且为了省事就...

76970

扫码关注云+社区

领取腾讯云代金券