富文本使用之wangEditor3

Posted 2020-11-04 娜娜娜娜小姐姐

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了富文本使用之wangEditor3相关的知识，希望对你有一定的参考价值。

一、介绍：

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

二、使用方式：

直接下载：https://github.com/wangfupeng1988/wangEditor/releases
使用npm下载：npm install wangeditor （注意 wangeditor 全部是小写字母）
使用bower下载：bower install wangEditor （前提保证电脑已安装了bower）
使用CDN：//unpkg.com/wangeditor/release/wangEditor.min.js

三、使用：

重点是图片的上传和富文本内容的获取。

1.图片上传：

①存放在一个临时的文件夹里。

②将图片地址返给前台，富文本显示图片。

2.内容获取：

①获取富文本的内容，截取内容里的图片标签。

②将图片存入到一个新的文件夹里，替换图片的地址。

③将新的富文本的内容存储到数据库里。（这里我未作处理）

前台代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>富文本的使用</title>
    <style type="text/css">
        body {
            width: 800px;
            margin: 0 auto 0 auto;
        }
    </style>
</head>
<body>

<!--wangEditor 使用 B-->
<div id="div1">
</div>
<!--wangEditor 使用 E-->
<button id="addBtn" onclick="addNews()">增加</button>

</body>
<script type="text/javascript" src="../release/wangEditor.js"></script>
<script src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
    var httpurl = "http://localhost:8081";

    //富文本使用
    var E = window.wangEditor;
    var editor = new E(\'#div1\');
    //重新设置富文本的内容
    editor.customConfig.menus = [
        \'head\',  // 标题
        \'bold\',  // 粗体
        \'fontSize\',  // 字号
        \'italic\',  // 斜体
        \'underline\',  // 下划线
        \'foreColor\',  // 文字颜色
        \'link\',  // 插入链接
        \'justify\',  // 对齐方式
        \'image\',  // 插入图片
        \'undo\',  // 撤销
        \'redo\'  // 重复
    ];
    // 隐藏“网络图片”tab
    editor.customConfig.showLinkImg = false;
    // 将图片大小限制为 3M
    editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
    // 限制一次最多上传 1 张图片
    editor.customConfig.uploadImgMaxLength = 1;
    //开启wangEditor的错误提示
    editor.customConfig.debug=true;
    // 关闭粘贴样式的过滤
    editor.customConfig.pasteFilterStyle = false;
    // 忽略粘贴内容中的图片
    editor.customConfig.pasteIgnoreImg = true;


    //上传图片 将图片以文件的形式传给后台进行操作返回图片 url
    editor.customConfig.customUploadImg = function (files, insert) {
        var date = new FormData();
        date.append("file", files[0]);
        $.ajax({
            type: "POST",
            url: httpurl + "/test/upload",
            data: date,
            dataType: \'json\',
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (result) {
                insert(result.data);// insert 是获取图片 url 后，插入到编辑器的方法
            }
        })
    };
    editor.create();//创建富文本

    /**
     * 添加企业新闻
     */
    function addNews() {
        var formData = new FormData();
        formData.append("news",editor.txt.html());
        $.ajax({
            type: "POST",
            url: httpurl + "/test/addNews",
            data: formData,
            dataType: \'json\',
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (result) {
                console.log(result);
            }
        })
    }
</script>
</html>

后台代码：

/**
 * 图片上传
 * @param request
 * @param file
 * @return
 */
public JSONObject upload(HttpServletRequest request,MultipartFile file) {
    JSONObject imgPathObject = new JSONObject();
    Map map = new HashMap();
    boolean isMultipart = ServletFileUpload.isMultipartContent(request);
    List<FileItem> list = null  ;
    if(isMultipart){
        FileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(factory);
        upload.setHeaderEncoding("UTF-8");

        try {

            //获取文件名（带后缀名）
            String fileName = file.getOriginalFilename();
            String suffixName = fileName.substring(fileName.lastIndexOf("."));
            //企业新闻id
            String entNewsImgId = UUIDUtil.getOneUUID();
            fileName = entNewsImgId + suffixName;


            //获取文件输入流
            InputStream input = file.getInputStream();

            // 获取当前时间
            String format = DateUtil.DEF_DATE_FORMAT_STR;
            String strDate = DateUtil.dateToString(new Date(),format);
            String StrDateTime = strDate.substring(0, 10);

            //获取工程路径
            String serverAddress = request.getServletContext().getRealPath("/");
            String entNewsImgPath = serverAddress +"tempRes/busiPic/" + StrDateTime +"/" + fileName;
            int result = writeToLocal(entNewsImgPath, input);
            String imgPath = "http://localhost:8081/tempRes/busiPic/" + StrDateTime +"/" + fileName;
            if(result == 1) {
                map.put("data", imgPath);
                String  entNewsStr = JSONObject.toJSONString(map);
                imgPathObject = JSONObject.parseObject(entNewsStr);

            }
        } catch (Exception e) {
            // TODO: handle exception
        }
    }

    return imgPathObject;
}

/**
 * 将InputStream写入本地文件
 * @param filePath 写入本地目录
 * @param input 输入流
 * @throws IOException
 */
private static int writeToLocal(String filePath, InputStream input)  {
    //定义每次读取的长度
    int index = -1;
    //定义每次读取字节的大小与保存字节的数据
    byte[] bytes = new byte[1024];
    FileOutputStream downloadFile;
    try {
        //保证创建一个新文件
        File file = new File(filePath);
        if (!file.getParentFile().exists()) { // 如果父目录不存在，创建父目录
            file.getParentFile().mkdirs();
        }
        file.createNewFile();

        downloadFile = new FileOutputStream(filePath);
        while ((index = input.read(bytes)) != -1) {
            downloadFile.write(bytes, 0, index);
            downloadFile.flush();
        }
        downloadFile.close();
        input.close();

    } catch (FileNotFoundException e) {
        e.printStackTrace();
        return 0;
    } catch (IOException e) {
        e.printStackTrace();
        return 0;
    }
    return 1;
}

/**
 * 获取富文本内容
 * @param request
 * @param file
 * @return
 */
public JSONObject addNews(HttpServletRequest request, MultipartFile file) {
    Map map = new HashMap();
    //新闻的UUID
    String entNewsId = UUIDUtil.getOneUUID();
    String newsCon = "";//新的新闻内容
    String newsImgPath = "";//新闻图片路径
    String newsContent = request.getParameter("news");//获取新闻内容
    System.out.println(newsContent);
    //截取图片路径
    String tempSrc= "<img src=\\"";
    String[] imgStr = newsContent.split(tempSrc);
    String[] imgPathStr = new String[imgStr.length];//图片路径数组
    System.out.println(imgStr.length);
    if(imgStr.length > 1) {
        String[] imgLengthStr = imgStr[1].split("\\"");
        int imgLength = imgLengthStr[0].length();

        for (int i=1; i< imgStr.length; i++) {
            newsImgPath = imgStr[i].substring(0,imgLength);
            System.out.println(newsImgPath);
            //改变图片路径
            String tempPort = "8081/";
            String tempImgPath = request.getServletContext().getRealPath("/") + newsImgPath.split(tempPort)[1];
            String tempImgUUID = newsImgPath.substring(newsImgPath.lastIndexOf("/")+1);
            System.out.println(tempImgPath);
            String imgPathNewAbove = request.getServletContext().getRealPath("/");
            String imgPathNewBehind ="busiPic/entNewsPic/"+ entNewsId +"/pic_" + tempImgUUID;
            String imgPathNew = imgPathNewAbove + imgPathNewBehind;
            File oldFile = new File(tempImgPath);
            File newFile = new File(imgPathNew);
            Boolean bln = copyFile(oldFile,newFile);
            if(bln)
                imgPathStr[i-1] = newsImgPath.split(tempPort)[0] + tempPort + imgPathNewBehind;
        }
        
        newsCon = imgStr[0];
        for (int i=1; i< imgStr.length; i++) {
            newsCon += tempSrc + imgPathStr[i-1] + imgStr[i].substring(imgLength);
        }
        System.out.print(newsCon);
        map.put("newsContent",newsCon);

    }else {
        map.put("newsContent",newsContent);
    }
    String  newContentStr = JSONObject.toJSONString(map);
    JSONObject result = JSONObject.parseObject(newContentStr);
    return result;
}

/**
 * 复制文件
 * @param source
 * @param dest
 * @throws IOException
 */
public static boolean copyFile(File source, File dest){

    //保证创建一个新文件
    if (!dest.getParentFile().exists()) { // 如果父目录不存在，创建父目录
        dest.getParentFile().mkdirs();
    }
    if (dest.exists()) { // 如果已存在,删除旧文件
        dest.delete();
    }
    InputStream input = null;
    OutputStream output = null;
    try {
        dest.createNewFile();//创建文件
        input = new FileInputStream(source);
        output = new FileOutputStream(dest);
        byte[] buf = new byte[1024];
        int bytesRead;
        while ((bytesRead = input.read(buf))>-1) {
            output.write(buf, 0, bytesRead);
        }
        output.close();
        input.close();
    }catch (IOException e) {
        e.printStackTrace();
    }catch(Exception e){
        e.printStackTrace();
        return false;
    }
    return true;
}

样式如图：

以上是关于富文本使用之wangEditor3的主要内容，如果未能解决你的问题，请参考以下文章

php 使用 wangeditor3 图片上传

wangEditor富文本编辑器结合vue使用

wangeditor3 怎么用文本域初始化

wangEditor 3 富文本编辑使用-

wangEditor上传图片

wangeditor多图上传不会变成数组