wangEditor编辑器的使用

摘要:
这是保存在数据库中的图像地址

使用场景wangEditor  x-admin前端框架

文档手册地址:https://www.wangeditor.com/

第一步:在html 页面引入需要的js(最好把这些js 下载下来,本地引入)

<script type="text/javascript" src="https://unpkg.com/wangeditor/dist/wangEditor.min.js"></script>
<script type="text/javascript" src="http://www.wangeditor.com/js/jquery-1.10.2.min.js"></script>

第二步:编辑器的身体

<div id="div1">

 </div>

第三步:编辑器中上传图片时配置服务器的连接

         const E = window.wangEditor;
                const editor = new E('#div1');
                editor.config.uploadImgShowBase64=true;
                editor.config.uploadFileName = 'file';  //对应后台上传图片接口参数的名字
                editor.config.uploadImgServer = '/tool/uploadFilewangEditor'; //后台图片上传地址
                editor.config.uploadImgMaxSize = 3 * 1024 * 1024 // 将图片大小限制为 3M
                editor.config.uploadImgMaxLength = 1//限制一次最多上传 5 张图片

          editor.create()

第四步:上传图片后台的接口(一定要跟文档中上传文件后返回值组装一直)

wangEditor编辑器的使用第1张

 下面是我后台仿照数据结构写的controller,如下:他的文档写的可以上传多张图片,我这里是每次上传一张,多张时,上传一张调用一次

    @ResponseBody
    @RequestMapping(value = "uploadFilewangEditor", method = RequestMethod.POST)
    @ApiOperation(value = "上传图片", notes = "上传图片")
    public Object uploadFilewangEditor(@RequestParam("file") MultipartFile file) {
        List list=new ArrayList<Object>();
        Map<String,Object> map=new HashMap();//外层的map
        if (StringUtils.isNotEmpty(file.getOriginalFilename())) {
    
            String pathUrl =FileUpload.upload(file);
            Map<String,Object> map1=new HashMap<>();

            list.add(map1);
            map1.put("url",pathUrl);
            map1.put("alt","图片名称");
            map.put("errno",0);
            map.put("data",list);
        }
        return map;
    }

  第五步:获取编辑框的值和设置编辑框的值

editor.txt.html()//获取编辑框的值
editor.txt.html("值") // 重新设置编辑器内容

  第六步:这些都弄完后,编辑器可以正常使用,存到数据的值如下:

wangEditor编辑器的使用第2张

 这样在编辑器里都是正常的,问题是如果不通过wangEditor编辑器,图片都不能正常显示,可以看出这里都是相对路径,没有服务器的地址和ip,所以我又更改了controller 里的接口把图片的路径返回值改成服务器ip+端口+图片的相对路径

修改后的controller

   @ResponseBody
    @RequestMapping(value = "uploadFilewangEditor", method = RequestMethod.POST)
    @ApiOperation(value = "上传图片", notes = "上传图片")
    public Object uploadFilewangEditor(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
        List list=new ArrayList<Object>();
        Map<String,Object> map=new HashMap();//外层的map
        if (StringUtils.isNotEmpty(file.getOriginalFilename())) {
            //String pathUrl ="http://服务器ip:端口号/"+FileUpload.upload(file);
            // 组装成这种连接不仅编辑器里可以正常显示,不通过编辑器也可以正常显示
            InetAddress address= null;
            try {
                address = InetAddress.getByName(request.getServerName());
            } catch (UnknownHostException e) {
                e.printStackTrace();
            }
            String pathUrl ="http://"+address.getHostAddress()+":"+request.getServerPort()+FileUpload.upload(file);
            Map<String,Object> map1=new HashMap<>();

            list.add(map1);
            map1.put("url",pathUrl);
            map1.put("alt","图片名称");
            map.put("errno",0);
            map.put("data",list);
        }
        return map;
    }

  这样修改后,编辑器里可以正常显示图片,不用编辑器也可以正常显示。这是存到数据库的图片地址

wangEditor编辑器的使用第3张

 

免责声明:文章转载自《wangEditor编辑器的使用》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇详解nginx的rewrite应用,Nginx高级之Rewrite规则Nmap扫描与RDP连接实验下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

springboot项目中集成ip2region遇到的问题及终极解决办法

1、问题回顾 按照ip2region项目的官方集成到springboot项目后,运行测试一切都ok,没有任何问题。但是当项目打成可执行的jar包后再运行,却显示找不到ip2region.db,无法找到资源文件的错误。异常代码如下: java.io.FileNotFoundException: class path resource [ip2region/i...

C#中遍历各类数据集合的方法总结

C#中遍历各类数据集合的方法总结: 1.枚举类型  //遍历枚举类型Sample的各个枚举名称 foreach (string sp in Enum.GetNames(typeof(Sample))) { ary.Add(sp); } //遍历枚举类型Sample的各个枚举值 foreach (string sp in Enum.GetValu...

算法--字符串移位问题

转载请标明出处http://www.cnblogs.com/haozhengfei/p/d06ff7b10334cd17ec014764b96790ca.html 字符串移位问题 字符串移位练习题 第7节 字符串移位练习题 对于一个字符串,请设计一个算法,将字符串的长度为len的前缀平移到字符串的最后。 给定一个字符串A和它的长度,同时给定le...

【5】Redis从入门到放弃---秒杀案例(Redis的事务+锁机制+lua脚本)

(1)Redis的事务 1.1 Redis事务的定义: Redis事务是一个单独的隔离操作:事务中的所有命令都会序列化、按顺序地执行。事务在执行的过程中,不会被其他客户端发送来的命令请求所打断。 Redis事务的主要作用就是串联多个命令防止别的命令插队。 1.2 Multi、Exec、discard命令 组队阶段:从输入multi命令开始,后面输入的任务命...

C# winform在WebBrowser下获取完整的Cookies(包括含HTTPOnly属性的)

利用wininet获取网页Cookie 模拟post请求取数据,使用普通的Cookies无法获取完整的Cookies信息 只能获取了一部分 ,导致取回来的是重新登陆的页面。 后来经过不懈的精神,终于找到了方法实现获取HTTPOnly。 WinInet WinInet(“Windows Internet”)API帮助程序员使用三个常见的Internet协议,...

Map遍历法则

    /** * 如果既要遍历key又要value,那么建议这种方式,应为如果先获取keySet然后再执行map.get(key),map内部会执行两次遍历。 * 一次是在获取keySet的时候,一次是在遍历所有key的时候。 */ // 当我调用put(key,value)方法的时候...