富文本 wangEditor 前后端交互例子

之前看了很多但都不是很详细，这次贴上的代码，希望新手能少走弯路，与君共勉

参考文献

官方文档 https://www.kancloud.cn/wangfupeng/wangeditor3/332599

主要引入： <script type="text/javascript" src="../static/js/wangEditor.min.js"></script>

官方文档中都有，没用的可以自行删除

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 富文本编辑器</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后�?">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3�?新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技�?">

    <link rel="shortcut icon" href="favicon.ico"> <link href="../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../static/css/animate.css" rel="stylesheet">
    <link href="../static/css/plugins/summernote/summernote.css" rel="stylesheet">
    <link href="../static/css/plugins/summernote/summernote-bs3.css" rel="stylesheet">
    <link href="../static/css/style.css?v=4.1.0" rel="stylesheet">
    <script src="../static/js/jquery.min.js?v=2.1.4"></script>
    <script src="../static/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- Peity -->
    <script src="../static/js/plugins/peity/jquery.peity.min.js"></script>
    <script type="text/javascript" src="../static/js/wangEditor.min.js"></script>
</head>

<body class="gray-bg">
     <div> 
     <span class="col-lg-8" id="editor"></span>
     </div>
     <div>
     <button id="btn2">获取text</button>
        </div>
     <script type="text/javascript">
      var E = window.wangEditor;
      var editor = new E('#editor');
      //editor.create();
      // 自定义菜单配置
      editor.customConfig.menus = [
          'head',  // 标题
          'bold',  // 粗体
          'fontSize',  // 字号
          'fontName',  // 字体
          'italic',  // 斜体
          'underline',  // 下划线
          'strikeThrough',  // 删除线
          'foreColor',  // 文字颜色
          'backColor',  // 背景颜色
          'link',  // 插入链接
          'list',  // 列表
          'justify',  // 对齐方式
          'quote',  // 引用
          'emoticon',  // 表情
          'image',  // 插入图片
          'table',  // 表格
          'video',  // 插入视频
          'code',  // 插入代码
          'undo',  // 撤销
          'redo'  // 重复
      ];

      //editor.customConfig.uploadImgServer = '/admin.php/Upload/wang_editor';  // 上传图片到服务器
      //editor.customConfig.uploadImgServer = '/upload';
      editor.customConfig.uploadImgShowBase64 = true;   // 使用 base64 保存图片
      // 3M
      editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
      // 限制一次最多上传 5 张图片
      editor.customConfig.uploadImgMaxLength = 1;
      // 自定义文件名
      editor.customConfig.uploadFileName = 'editor_img';
      // 将 timeout 时间改为 3s
      editor.customConfig.uploadImgTimeout = 5000;
        
      editor.create();
      editor.customConfig.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.url;
              // 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) {
              // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
              // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
              // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
              var url = result.data[0];
              insertImg(url);
              // result 必须是一个 JSON 格式字符串！！！否则报错
          }
      }

      
      //获取文本输入的内容
      document.getElementById('btn2').addEventListener('click', function () {
            editor.txt.html(content);
            var content = editor.txt.html();
            console.log(content);
            // 读取 text
              var announcement_mag = editor.txt.text();
              alert(announcement_mag)    
            $.ajax({
            url : "http://localhost:8080/User/inserAnnouncements?announcement_mag="+announcement_mag,
            type : "post",
            dataType : "json",
            success : function(data) {
                alert(data.result);
                
            },
             error : function(msg) {
                    alert("ajax连接异常：" + msg);
                }
        });
           
      }, false)
      
      </script>
</body>

</html>

效果

后台：

  /*
     * 新增公告信息
     */
    @RequestMapping(value = "/inserAnnouncements")
    @ResponseBody
    public Map<String, Object> inserAnnouncements(String announcement_mag) {
        Map<String, Object> map = new HashMap<String, Object>();
        Announcement announcement = new Announcement();
        announcement.setAnnouncement_mag(announcement_mag);
        try {
            int insertUser = userservice.inserAnnouncement(announcement);
        } catch (Exception e) {
            map.put("result", "false");
            e.printStackTrace();
        }
        map.put("result", "true");
        System.out.println(map.get("result"));
        return map;
    }

在富文本中输入文字：点击提交

数据库字段如下图：

扫描二维码关注公众号，回复： 5849571 查看本文章

添加成功

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

2019.4.1

继续完善插入图片回显到富文本

测试使用的是spring boot框架

代码：

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 富文本编辑器</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后�?">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3�?新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技�?">

    <link rel="shortcut icon" href="favicon.ico"> <link href="../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../static/css/animate.css" rel="stylesheet">
    <link href="../static/css/plugins/summernote/summernote.css" rel="stylesheet">
    <link href="../static/css/plugins/summernote/summernote-bs3.css" rel="stylesheet">
    <link href="../static/css/style.css?v=4.1.0" rel="stylesheet">
    <script src="../static/js/jquery.min.js?v=2.1.4"></script>
    <script src="../static/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- Peity -->
    <script src="../static/js/plugins/peity/jquery.peity.min.js"></script>
    <script type="text/javascript" src="../static/js/wangEditor.min.js"></script>
</head>

<body class="gray-bg">
     <div> 
     <span class="col-lg-8" id="editor"></span>
     </div>
     <div>
     <button id="btn2">获取text</button>
        </div>
     <script type="text/javascript">
      var E = window.wangEditor;
      var editor = new E('#editor');
      // 配置服务器端地址
      //editor.customConfig.uploadImgServer = '/upload'
       editor.customConfig.uploadImgServer = 'http://localhost:8080/User/selectJpgUrl';
      //editor.create();
      // 自定义菜单配置
      editor.customConfig.menus = [
          'head',  // 标题
          'bold',  // 粗体
          'fontSize',  // 字号
          'fontName',  // 字体
          'italic',  // 斜体
          'underline',  // 下划线
          'strikeThrough',  // 删除线
          'foreColor',  // 文字颜色
          'backColor',  // 背景颜色
          'link',  // 插入链接
          'list',  // 列表
          'justify',  // 对齐方式
          'quote',  // 引用
          'emoticon',  // 表情
          'image',  // 插入图片
          'table',  // 表格
          'video',  // 插入视频
          'code',  // 插入代码
          'undo',  // 撤销
          'redo'  // 重复
      ];

      //editor.customConfig.uploadImgServer = '/admin.php/Upload/wang_editor';  // 上传图片到服务器
      editor.customConfig.uploadImgShowBase64 = true;   // 使用 base64 保存图片
      // 3M
      editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
      // 限制一次最多上传 5 张图片
      editor.customConfig.uploadImgMaxLength = 1;
      //自定义文件名
      editor.customConfig.uploadFileName = 'myFileName'
      // 自定义文件名
      //editor.customConfig.uploadFileName = 'editor_img';
      // 将 timeout 时间改为 3s
      editor.customConfig.uploadImgTimeout = 50000;
        

      editor.customConfig.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.url;
              // 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) {
              // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
              // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
              // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
             var url = result.url
              console.log(url);
             //var jsonStrings = encodeURIComponent(url);
             insertImg(url);
             // result 必须是一个 JSON 格式字符串！！！否则报错
          }
      }
      
      editor.create();

      
      //获取文本输入的内容
      document.getElementById('btn2').addEventListener('click', function () {
            editor.txt.html(content);
            var content = editor.txt.html();
            console.log(content);
            // 读取 text
              var announcement_mag = editor.txt.text();
              alert(announcement_mag)    
            $.ajax({
            url : "http://localhost:8080/User/inserAnnouncements?announcement_mag="+announcement_mag,
            type : "post",
            dataType : "json",
            success : function(data) {
                alert(data.result);
                
            },
             error : function(msg) {
                    alert("ajax连接异常：" + msg);
                }
        });
           
      }, false)
      
      </script>
</body>
</html>

主要相对于之前的代码新增了，服务器地址和自定义文件名，本插件会自动访问你的路径进行调用图片下载上传。

后台代码：

/*
     * 返回图片路径（富文本）
     */
    @RequestMapping(value = "/selectJpgUrl")
    @ResponseBody
    public Map<String,String> selectJpgUrl(@RequestParam(value = "myFileName") MultipartFile mf, HttpServletRequest request)
            throws IOException {
        String realPath = request.getSession().getServletContext().getRealPath("myFileName");
        // 获取源文件
        String filename = mf.getOriginalFilename();
        String[] names = filename.split("\\.");//
        String tempNum = (int) (Math.random() * 100000) + "";
        String uploadFileName = tempNum + System.currentTimeMillis() + "." + names[names.length - 1];
        File targetFile = new File(realPath, uploadFileName);// 目标文件
        // 开始从源文件拷贝到目标文件
        // 传图片一步到位
        try {
            mf.transferTo(targetFile);
        } catch (IllegalStateException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        Map<String, String> map = new HashMap<String, String>();
        map.put("errno","0");
        System.out.println(uploadFileName);
        map.put("data","http://localhost:8080/static/myFileName/"+uploadFileName);// 这里应该是项目路径
        map.put("url","http://localhost:8080/static/myFileName/"+uploadFileName);
        return map;// 将图片地址返回
    }

//细节如下：

spring boot配置文件：

设置完成展示富文本：

控制台显示

富文本 wangEditor 前后端交互例子

猜你喜欢