wangEditor的完整使用（一）

最新推荐文章于 2024-06-26 17:14:46 发布

墨末..

最新推荐文章于 2024-06-26 17:14:46 发布

阅读量2.4k

点赞数 1

分类专栏： wangEditor的完整使用例子文章标签： java 前端

本文链接：https://blog.csdn.net/qq_43694194/article/details/126506113

版权

wangEditor的完整使用例子专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在做一个类似博客之类的页面，所以就打算借助wangEditor这一富文本编辑器来实现项目的需求。主要使用SpringBoot+JSP+LayUi来完成。

一.导入wangEditor.js

我自己使用的是wangEditor.min.js,通过手工导入的方式放在项目的静态文件下来引用。

下载地址：wangEditor.min.js
也可以自己去官网下载，直接搜wangEditor就可以

二.新建一个jsp页面

我这个项目使用的是jsp，见笑了，这都老掉牙的东西了。不过对后端程序员来说有时候是真的好用，还有一个thymeleaf可以替代jsp的使用，功能也更加的强大。

新建页面article_publish.jsp
主要代码如下：

<html>
<head>
    <meta charset="UTF-8">
    <title>文章编辑-blog</title>
</head>
<body>
<form class="layui-form layui-col-space5">
<%--    <input type="hidden" name="blogId" value="">--%>
    <div class="layui-inline layui-show-xs-block">
        <input type="text" name="title" placeholder="*输入文章标题(必填)" autocomplete="off"
               class="layui-input" lay-verify="required">
    </div>
    <div class="layui-inline layui-show-xs-block">
        <button class="layui-btn" lay-submit="" lay-filter="submit">
            提交
        </button>
    </div>
    <div class="layui-inline layui-show-xs-block">
        <button  type="button" class="layui-btn layui-btn-normal" id="preview">
            预览
        </button>
    </div>
    <div class="layui-inline layui-show-xs-block">
        <button  type="button" class="layui-btn layui-btn-danger" id="clear">
            清除
        </button>
    </div>
    <!-- 添加一个div用来显示富文本编辑器 -->
    <div id="editor" class="layui-inline layui-show-xs-block" ></div>
    <div class="layui-inline layui-show-xs-block">
        <textarea name="content" id="text1" style="display: none"></textarea>
    </div>
</form>

<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script src="${pageContext.request.contextPath}/resources/js/jquery-1.9.1.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/wangEditor.js"></script>
<script type="text/javascript">
    var E = window.wangEditor	/* 创建一个对象 */
    var editor = new E('#editor')
    // 上传图片到服务器,后面加上图片地址
    editor.config.uploadImgServer = '${pageContext.request.contextPath}/gen/article/upload.do'
  
    editor.config.withCredentials = true
    editor.config.uploadImgShowBase64 = true;   // 使用 base64 保存图片
    // 3M
    editor.config.uploadImgMaxSize = 3 * 1024 * 1024;
    // 限制一次最多上传 5 张图片
    editor.config.uploadImgMaxLength = 5;
    //自定义文件名
    editor.config.uploadFileName = 'myFileName'

    // 将 timeout 时间改为 5s
    editor.config.uploadImgTimeout = 50000;
    var $text1 = $("#text1");
    /* 添加onchange事件实现textarea提交 */
    editor.config.onchange = function (html) {
        // 监控变化，同步更新到 textarea
        $text1.val(html)
    }

    // 隐藏"网络图片"tab
    editor.config.showLinkImg = false;

    editor.config.uploadImgHooks = {
        before: function (xhr, editor, files) {
            // 图片上传之前触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

            // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
            // return {
            //     prevent: true,
            //     msg: '放弃上传'
            // }
            // alert("前奏");
        },
        success: function (xhr, editor, result) {
           // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            var url = result.data;
            alert(JSON.stringify(url));
            editor.txt.append(url);
            alert("成功");
        },
        fail: function (xhr, editor, result) {
            // 图片上传并返回结果，但图片插入错误时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            alert("图片插入失败");
        },
        error: function (xhr, editor) {
            // 图片上传出错时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            alert("图片上传错误");
        },
        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert: function (insertImg, result, editor) {
            var url =result.data;//获取后台返回的url
            console.log(result.data)
            insertImg(url);
        }
    }

    //上传视频
    editor.config.uploadVideoServer = 'uploadVideo'

    editor.config.uploadVideoHooks = {
        customInsert: function (insertImg, result, editor) {
            var url =result.data;//获取后台返回的url
            console.log("video url = " + url)
            insertImg(url);
        }
    };
    editor.create()
    $(".w-e-text-container").css("height", "700px")

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

        $('#clear').on('click',function () {
            editor.txt.clear()
        })

        //预览
        $('#preview').on('click',function () {
             var w = ($(window).width() * 0.8);
             var h = ($(window).height() - 20);

            layer.open({
                resize: true,
                title: '文章预览',
                shadeClose: true,
                area: [w + 'px', h + 'px'],
                type: 2,
                content: '${pageContext.request.contextPath}/gen/article/preview.do',
                success: function (layero, index) {
                    var body = layer.getChildFrame('body', index);
                    body.find('#content').append(editor.txt.html());
                }
            });
        });

        //提交
        form.on("submit(submit)", function (data) {
            var datas = data.field;
            console.log(datas);
            // 提交信息
            $.post("${pageContext.request.contextPath}/gen/article/save.do", datas, function (res) {
                if (res.success) {
                    layer.msg("数据保存成功。", {time: 3000});
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                }else{
                    if(res.loseSession=='loseSession'){
                        loseSession(res.msg,res.url)
                    }else{
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            },'json');
            return false;
        });


    });
</script>
</body>
</html>

三.后端接口实现

这里富文本编辑器的图片先上传到本地，下一篇会讲上传到七牛云上。

上传到本地的接口

/**
     * 图片上传到本地
     * @param file
     * @param request
     * @return
     */
    @RequestMapping("/upload")
    @ResponseBody
    public Map<String, String> upload(@RequestParam(value="myFileName") MultipartFile file, HttpServletRequest request) {
        String separator = System.getProperty("file.separator");
        separator=separator.replaceAll("\\\\","/");
        //获取项目路径+端口号 比如：http://localhost:8080/
        String basePath = request.getScheme() + "://" + request.getServerName() + ":"
                + request.getServerPort() +request.getContextPath()+ separator;
        try {
            String filePath="";
            //获取源文件
            filePath="D:/imgUploads/" ;//存储地址，此处也可以在application.yml中配置对象用@Value("${*.**}")注解注入内容
            String filename = file.getOriginalFilename();//获取图片名
            String[] names=filename.split("\\.");//获取后缀格式
            String uploadFileName=UUID.randomUUID().toString()+"."+names[names.length-1];//生成新图片
            File targetFile = new File (filePath,uploadFileName);//目标文件
            if (!targetFile.getParentFile().exists()){
                targetFile.getParentFile().mkdirs();
            }
            //传图片一步到位
            file.transferTo(targetFile);
            Map<String, String> map = new HashMap<String, String>();
            map.put("data",basePath+"imgUploads/"+uploadFileName);//这里应该是项目路径，返回前台url
            return map;
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return  null;
        }
    }

图片上传到本地，WebMvcConfigurerAdapter拦截器应该要有如下配置来解析资源：


import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;


@Configuration
public class WebMvcConfigurer extends WebMvcConfigurerAdapter {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        //注册拦截器 拦截规则
        //多个拦截器时 以此添加 执行顺序按添加顺序
        //指向外部目录
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry){
        //指向外部目录
        //注：param1是指定的要上传的文件夹位置（去掉盘符，在最后添加“/**” 例如：“imgUploads/**”）
        // param2是指定的文件夹位置（带盘符，在前面要加上“file” 例如：“file:D:/imgUploads/”）
        registry.addResourceHandler("imgUploads/**").addResourceLocations("file:D:/imgUploads/");
        super.addResourceHandlers(registry);
    }
}

四.实现效果

将富文本编辑器中的文本提交到数据库中。
我这里使用了一个标签来获取编辑器中的文本内容，在通过form表单提交。
实现效果
上传文本和图片

可以看到图片已经成功上传并且回显到富文本编辑器中了。

墨末..

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
wangEditor的完整使用（一）

我这个项目使用的是jsp，见笑了，这都老掉牙的东西了。不过对后端程序员来说有时候是真的好用，还有一个thymeleaf可以替代jsp的使用，功能也更加的强大。我自己使用的是wangEditor.min.js,通过手工导入的方式放在项目的静态文件下来引用。我这里使用了一个标签来获取编辑器中的文本内容，在通过form表单提交。这里富文本编辑器的图片先上传到本地，下一篇会讲上传到七牛云上。可以看到图片已经成功上传并且回显到富文本编辑器中了。将富文本编辑器中的文本提交到数据库中。
复制链接

扫一扫