zoukankan html css js c++ java

富文本使用之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;
}

样式如图：

查看全文

相关阅读:
ubuntu 安装 redis desktop manager
ubuntu 升级内核
 Ubuntu 内核升级，导致无法正常启动
 spring mvc 上传文件，但是接收到文件后发现文件变大，且文件打不开（multipartfile）
angular5 open modal
POJ 1426 Find the Multiple(二维DP)
POJ 3093 Margritas
POJ 3260 The Fewest Coins
POJ 1837 Balance(二维DP)
POJ 1337 A Lazy Worker

原文地址：https://www.cnblogs.com/nananana/p/9025605.html