Springboot 集成 wangEditor

最新推荐文章于 2024-05-08 14:36:21 发布
置顶 最新推荐文章于 2024-05-08 14:36:21 发布
阅读量643 收藏 3
点赞数
分类专栏： springboot java 文章标签： java springboot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45834006/article/details/108351811
版权

wangEdito 下载

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="wangEditor/release/wangEditor.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <title>wangEditor 编辑器</title>
    <style type="text/css">
        .toolbar {
            border: 1px solid #ccc;
        }

        .text {
            border: 1px solid #ccc;
            height: 400px;
        }
    </style>
</head>
<body>

<div style="margin: 0 auto; width: 90%">
    <div id="div1" style="margin-top: 15px;padding: 8px 20px;" class="toolbar">
    </div>
    <div style="padding: 5px 0; color: #ccc">中间隔离带</div>
    <div id="div2" class="text" style="min-height: 600px"> <!--可使用 min-height 实现编辑区域自动增加高度-->

    </div>

   <div style="text-align: center"> <button type="button" id="submit" class="layui-btn layui-btn-normal">提交</button>
       <button type="button" id="restart" class="layui-btn">清空</button></div>
</div>











<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="wangEditor/release/wangEditor.js"></script>

<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1', '#div2')  // 两个参数也可以传入 elem 对象，class 选择器

    var httpurl = "http://localhost:8080";

    editor.customConfig.uploadImgServer = httpurl + "/editor/upload";
    editor.customConfig.uploadFileName = 'file';
    editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024;
    editor.customConfig.pasteFilterStyle = false;
    editor.customConfig.withCredentials = true;
    editor.customConfig.colors = [
        '#000000',
        '#7b5ba1',
        '#FF3399',
        '#f9963b',
        '#ffffff',
        '#FF0000',
        '#0000FF',
        '#00FF00',
        '#FF00FF',
        '#C0C0C0',
        '#FFFF00',
        '#728CFF',
        '#00FFFF',
    ];

    editor.customConfig.uploadImgHooks = {
        success: function (xhr, editor, result) {
            layer.msg("图片上传成功", {icon: 6});
        },
        fail: function (xhr, editor, result) {
            layer.msg("返回数据有误", {icon: 5});
        },


    };


    editor.customConfig.linkImgCallback = function (url) {
        console.log(url) // url 即插入图片的地址
    }


    editor.create();

    layui.use(['layer', 'jquery'], function () {
        var $ = layui.jquery,
            layer = layui.layer;


        document.getElementById('submit').addEventListener('click', function () {
            // 读取 html
            var html = editor.txt.html();
            $.post(httpurl + "/editor/save", {'value': html}, function (res) {
                if (res != null) {
                    layer.msg("提交成功", {icon: 6}, function () {

                        layer.open({
                            type: 1
                            ,
                            title: false //不显示标题栏
                            ,
                            closeBtn: false
                            ,
                            area: '300px;'
                            ,
                            shade: 0.8
                            ,
                            id: 'LAY_layuipro' //设定一个id，防止重复弹出
                            ,
                            btn: ['火速围观', '残忍拒绝']
                            ,
                            btnAlign: 'c'
                            ,
                            moveType: 1 //拖拽模式，0或者1
                            ,
                            content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">新文章：' + res.toString() + '</div>'
                            ,
                            success: function (layero) {
                                var btn = layero.find('.layui-layer-btn');
                                btn.find('.layui-layer-btn0').attr({
                                    href: httpurl + '/editor/fileshow?myfile=' + res.toString()
                                    , target: '_blank'
                                });
                            }
                        });
                    });
                } else {
                    layer.msg("提交失败", {icon: 5});
                }
            });
        }, false);

        document.getElementById('restart').addEventListener('click', function () {
            editor.txt.clear();
        }, false);

    });


</script>


</body>
</html>

自定义： ArticleController

package com.file.controller;


import com.alibaba.fastjson.JSON;
import com.file.utlis.WangEditorImg;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.imageio.stream.FileImageInputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.*;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

/**
 * @author 19417
 */
@RestController
@RequestMapping("/editor")
public class ArticleController {

    private String filepathDir = "src/main/resources/static/article/";


    /**
     * 上传文件图片
     *
     * @param file
     * @param response
     * @param request
     * @throws IOException
     */


    @RequestMapping("/upload")
    public void uploadFile(@RequestParam("file") MultipartFile file, HttpServletResponse response, HttpServletRequest request) throws IOException {

        File paht = new File(filepathDir);

        WangEditorImg<String> editorImg = new WangEditorImg();

        List<String> list = new ArrayList<>();
        if (!paht.exists()) {
            paht.mkdirs();
        }


        //旧的文件名称
        String oldfilename = file.getOriginalFilename();
        //获取文件扩展名
        String extname = oldfilename.substring(file.getOriginalFilename().lastIndexOf("."));

        //防止重名
        String newfliename = UUID.randomUUID().toString() + extname;
        //返回是整个文件的大小

        String filepath = filepathDir + "/images/" + newfliename;

        FileCopyUtils.copy(file.getInputStream(), new FileOutputStream(new File(filepath)));

        StringBuffer requestURL = request.getRequestURL();
        String substring = requestURL.substring(0, requestURL.lastIndexOf("/"));
        String imgpath = substring + "/imageshow?myimage=" + newfliename;
        list.add(imgpath);

        editorImg.setErrno(0);
        editorImg.setData(list);
        //必须有
        PrintWriter out = response.getWriter();
        out.println(JSON.toJSONString(editorImg));
        out.flush();
        out.close();

    }


    /**
     * 图片回显
     *
     * @param request
     * @param response
     * @throws IOException
     */
    @GetMapping("/imageshow")
    public void imageShow(HttpServletRequest request, HttpServletResponse response, HttpSession session) throws IOException {
        response.setContentType("image/jpeg");
        OutputStream out = response.getOutputStream();
        String imgFileName = request.getParameter("myimage");
        String imgFileNameWithPath = filepathDir + "/images/" + imgFileName;
        try (FileImageInputStream input = new FileImageInputStream(new File(imgFileNameWithPath));
             ByteArrayOutputStream output = new ByteArrayOutputStream();) {
            byte[] buf = new byte[1024];
            int len = -1;
            while ((len = input.read(buf)) != -1) {
                output.write(buf, 0, len);
            }
            byte[] data = output.toByteArray();
            out.write(data);
            out.flush();
        } catch (FileNotFoundException ex) {
            ex.printStackTrace();
        }
    }

    @PostMapping("save")
    public String saveArticle(@RequestParam("value") String value) {
        String filename = svaeFile(value);
        return filename;
    }


    public String svaeFile(String value) {

        StringBuilder sb = new StringBuilder();

        sb.append("<!DOCTYPE html>");
        sb.append("<html>");
        sb.append("<head>");
        sb.append("<meta charset=\"utf-8\">");
        sb.append("<title>文章详情</title>");
        sb.append("<meta name=\"renderer\" content=\"webkit\">");
        sb.append("<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">");
        sb.append("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1\">");
        sb.append("<link rel=\"stylesheet\" href=\"lib/layui-v2.5.5/css/layui.css\" media=\"all\">");
        sb.append("<link rel=\"stylesheet\" href=\"lib/css/public.css\" media=\"all\">");
        sb.append("</head>");
        sb.append("<body>");
        sb.append("<div style=\"margin: 10px auto;  width: 1200px;\">");
        sb.append(value);
        sb.append("</div>");
        sb.append("<script src=\"lib/layui-v2.5.5/layui.js\" charset=\"utf-8\"></script>");
        sb.append("</body>");
        sb.append("</html>");

        try {
            String uuid = UUID.randomUUID().toString().substring(0,5);
            String savePath = filepathDir + uuid + ".html";
            File file = new File(savePath);
            if (!file.exists()) {
                file.createNewFile();
            }
            FileOutputStream outputStream = new FileOutputStream(savePath);
            BufferedWriter bufferedWriter = new BufferedWriter(new OutputStreamWriter(outputStream, "UTF-8"));
            bufferedWriter.write(sb.toString());
            bufferedWriter.newLine();// 换行
            bufferedWriter.flush();
            bufferedWriter.close();

            return uuid + ".html";
        } catch (IOException e) {

            return null;

        }

    }

    /**
     * 显示文件
     *
     * @param request
     * @param response
     * @throws IOException
     */
    @GetMapping("/fileshow")
    public void fileShow(HttpServletRequest request, HttpServletResponse response, HttpSession session) throws IOException {
        OutputStream out = response.getOutputStream();
        String imgFileName = request.getParameter("myfile");
        String imgFileNameWithPath = filepathDir + imgFileName;
        try (FileImageInputStream input = new FileImageInputStream(new File(imgFileNameWithPath));
             ByteArrayOutputStream output = new ByteArrayOutputStream();) {
            byte[] buf = new byte[1024];
            int len = -1;
            while ((len = input.read(buf)) != -1) {
                output.write(buf, 0, len);
            }
            byte[] data = output.toByteArray();
            out.write(data);
            out.flush();
        } catch (FileNotFoundException ex) {
            ex.printStackTrace();
        }
    }


}

效果图：

在这里插入图片描述

文章详情页：

在这里插入图片描述

缘不易
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
springboot整合wangEditor富文本编辑器
02-26 1119
1. 官网下载 版本3http://www.wangeditor.com/ 2. 开发文档https://www.kancloud.cn/wangfupeng/wangeditor3/430149 3.了解以及提前准备事项 3.1 将图片转换为Base64编码，可以在...
springboot集成富文本编辑器
06-20
springboot集成富文本编辑器，maven项目，themyleaf模板
springboot集成wangEditor
乱梦
08-29 3139
springboot+wangEditorwangEditorHTML页面第一步 引入js和css第二步 初始化编辑器后端配置配置文件上传路径本地资源映射文件上传controller wangEditor wangEditor是一个轻量级的web富文本编辑器 介绍：基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费 官网:http://www.wangedi...
wangEditor富文本编辑器与layui图片上传
最新发布
weixin_43652106的博客
05-08 652
记录：js 显示默认的wangEditor富文本编辑器内容和图片
SpringBoot使用WangEditor富文本编辑器
silentkunden的博客
01-14 1959
wangEditor是基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费。 若需要使用可以在wangEidtor官网上查看开发文档，或者去直接下载依赖包。 直接上前端代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://w...
Springboot 使用wangEditor3.0上传图片
weixin_30307267的博客
04-26 181
wangEditor是一个很好用的富文本编辑器,可以上传图片到服务器上,存放位置为Tomcat目录下 Springboot启动时自带Tomcat,重新启动时以前上传的图片便会丢失 研究了一下,给出一种可行性方法,思路就是每次上传图片至Tomcat时复制同名图片到指定文件夹中,下次启动时从指定文件夹复制图片到Tomcat中 如果大家有更好的方法不吝赐教 开发工具STS,Springboot2...
springboot集成datax的demo
08-26
springboot集成datax的demo，下载及能运行
Springboot集成activity过程图解
08-19
Springboot集成Activity过程图解 Springboot集成Activity过程图解是指将Activiti Workflow引擎集成到Springboot应用程序中，以便于在应用程序中使用工作流引擎来管理和自动化业务流程。下面是Springboot集成...
SpringBoot集成各种功能合集
04-07
这个"SpringBoot集成各种功能合集"很可能是一个包含上述各种功能的示例项目，通过`springboot-inter-function-master`这个文件夹，开发者可以学习如何在SpringBoot项目中实际应用这些功能，加深对SpringBoot的理解和...
基于springboot集成hbase过程解析
08-25
"基于SpringBoot集成HBase过程解析" SpringBoot集成HBase是当前大数据处理和存储解决方案中的一种常见组合。HBase是基于Hadoop的分布式、可扩展的NoSQL数据库，能够存储大量的结构化和非结构化数据。SpringBoot则...
Springboot集成restTemplate过程详解
08-19
主要介绍了Springboot集成restTemplate过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
springboot文件上传整合富文本编辑器（不完整）
04-27
springboot文件上传整合富文本编辑器
SpringBoot整合UEditor富文本编辑器
05-07
springboot整合ueditor，由于项目是springcloud分布式项目,注册中心和其他服务未上传,下载的同学看代码路径和配置即可.资料参考地址: https://blog.csdn.net/a1053765496/article/details/105965560
轻量级，简单易用的富文本编辑器，wangEditor，帮助你更好的丰富你的网站功能
10-27
前端框架，轻量级的富文本编辑器，不占用空间，不影响网页的加载速度，相应快速、功能强大、简单易用，可以快速帮助你丰富网站的功能。
springboot+vue小白升级之路17-集成wangeditor富文本编辑器实现发贴、发博客功能
虾米大王的学习历程
11-22 162
我们还是接着之前的内容，把新增的代码贴出来。此功能包含在了之前的图书功能中，代码有变化，各位自己对照一下。 package.json bookview.vue fileController.java 测试 编辑图书
基于SpringBoot从零构建博客网站 - 集成editor.md开发发布文章功能
weixin_30289831的博客
08-05 290
发布文章功能里面最重要的就是需要集成富文本编辑器，目前富文本编辑器有很多，例如ueditor，CKEditor、editor.md等。这里守望博客里面是集成的editor.md，因为editor.md是markdown格式，目前markdown由于简洁好用，在各种云笔记、github等中得到了广泛使用。 1、集成editor.md editor.md是在github上开源，开源地址为：h...
SpringBoot2整合富文本编辑器wangEditor(含文件上传)攻略
★【World Of Moshow 郑锴】★
10-17 5916
背景 最近要用到一个富文本编辑器，记得遥远的年代，调过Kingeditor、Ueditor。。。但是那些都很重，，，于是最近经常再留意这件事，直到最近看到一个wangEditor，体验了一下，又轻又好用，功能也相对丰富够用。 官网地址 http://www.wangeditor.com/ 使用手册 https://www.kancloud.cn/wangfupeng/wangeditor3/332...
springboot+wangEditor图片上传
无
07-29 1909
异常：图片能上传但不能回显到前端编辑器中！！！ 解决：利用ssm(spring) 实现图片上传，可以轻松回显到前端，但springboot默认是内置tomcat，该将图片上传到哪里呢？           将ssm中图片上传的代码用到springboot项目中依然不行，网上的都不可行！           后来才知道在springboot中不是将项目上传到webroot下面，也不是上传到缓存...
springboot + wangEditor富文本整合成功
qq_41784817的博客
10-13 1249
最近在做新闻系统，对处理新闻内容需要用到富文本来完成，之前用传统的ssm框架，记得配置百度ueditor比较简单，现在习惯用springboot,目录结构跟以前的结构不一样，找不到config.json文件，百度上很多处理这个问题的方法，改源码或者新建一个类来寻找配置文件，一看要配置很多地方，果断放弃使用ueditor,后面找了一些好用的富文本，后面选择了wangEditor富文本，...
springboot整合wangeditor
08-23
- *2* [Springboot集成MyBatisplus并且实现自动生成代码模板](https://download.csdn.net/download/qq_33417321/88237864)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

缘不易

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值