wangEditor富文本编辑器实现上传

实现功能:文章撰写

实现效果:文章名称、标题、图片、和文章上传保存

工具:wangEditor.js (富文本编辑器),xss.js(过滤富文本编辑器的特殊内容)XMLHttpRequest(实现仿ajax提交)

效果如下:

wangEditor富文本编辑器实现上传_第1张图片

wangEditor配置和创建:

引用wangEditor.js(百度即可找到)

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

var editor;

  jQuery(document).ready(function($) {

         //富文本编辑器的配置

         var E = window.wangEditor;

         //实例化E:第一个参数是编辑器菜单栏的标签,第二个参数是编辑器内容的标签

         editor = new E('#editor1', '#editor2');

          //配置菜单栏

         editor.customConfig.menus = [                         

    'head',  // 标题                      'bold',  // 粗体

    'fontSize',  // 字号                  'list',  // 列表

    'justify',  // 对齐方式               'quote',  // 引用

    'emoticon',  // 表情                  'image',  // 插入图片

    'table',  // 表格                     'video',  // 插入视频

    'code',  // 插入代码                  'undo',  // 撤销

    'redo'  // 重复                       'fontName',  // 字体                  'italic',  // 斜体                    'underline',  // 下划线

    'strikeThrough',  // 删除线          'foreColor',  // 文字颜色

    'backColor',  // 背景颜色              'link',  // 插入链接

   ];

        // 使用 base64 保存图片

         editor.customConfig.uploadImgShowBase64 = true;

          //设置一次上传图片张数  

         editor.customConfig.uploadImgMaxLength =1;

         //设置图片最大为多少

         editor.customConfig.uploadImgMaxSize = 1 * 1024 * 1024;

         editor.customConfig.showLinkImg = false; // 隐藏网络图片”tab

         editor.create();//创建

 

     });

图片预览方法:

var tr=false;

   function changefile(){   

      var preview = document.getElementById('img_file'); //获取img标签

      //声明图片类型的数组

      var imgExt = new Array(".png",".jpg",".jpeg",".bmp",".gif");

      //获取inputfile】的图片名称

      var fileName=$("#inp_file").val().toString();

    // alert(fileName)

     //调用其他方法判断选择的文件是否是图片

      if(imgExt.contain(fileName.extension())){

         var file  = document.getElementById('inp_file').files[0];

         var reader = new FileReader();

         reader.onloadend = function () {

          preview.src = reader.result;

         };

         tr=true;

         if (file) {

          reader.readAsDataURL(file);

         } else {

          preview.src = "";

         }

         }else{

         tr=false;

         alert("文件类型不是图片!");

         }

   };

将文章上传到后台方法:

引用xss.js(百度即可)

<script type="text/javascript" src="xss.js">script>

function submit_1(){

      //获取富文本编辑器的内容

       var html = editor.txt.html();

       //设置xss过滤的白名单

       var options = {

       //设置白名单内容:格式'标签名':【标签属性】

          whiteList: {

            'span': ['style'],

            'p':[],

            'font':['color','size'],

              'br' :[],

              'strong':[],

              'em':[],

              'img':['src','style']

              },

               onTagAttr: function (tag, name, value, isWhiteAttr) {

                 //tag-标签,name-标签属性,value属性值,isWhiteAttr-是否为白名单上的属性

                 //因为xss.js自身会过滤链接,但是编辑器内容的图片内容是需要保存到后台,所以要手动拼接回来

            if (tag=='img'&& name === 'src') {          

             return name + '="' + value + '"';

            }

          }

       };      

       //调用filterXSS方法,实现自定义过滤

     var filterHtml = filterXSS(html, options);

     //获取图片资源

     var imgfile= document.getElementById('inp_file').files[0];

     //获取名称

     var name=$("#sizing-addon2").val().trim();

     //获取标题

       var title=$("#sizing-addon3").val().trim();

       //判断不能为空

       if(name==undefined||name==""){

        alert("名称不能为空!!!");

        return;

       }

       if(title==undefined||title==""){

         alert("标题不能为空!!!");

        return;

       }

       //如果trfalse,则表示选择的不是图片或者没有选择

       if(tr==false){

       alert("图片格式不正确!");

        return;

       }

       //实例化XMLHttpRequest

      var xmlhttp=null;

           if (window.XMLHttpRequest)

          {

          xmlhttp=new XMLHttpRequest();

          }

        else if (window.ActiveXObject)

          {

          //早期IE

          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

          }

            if (xmlhttp!=null)

          {

             //实例化一个form数据:内容格式为 键值对

           var form = new FormData();

           form.append("filterHtml", filterHtml);

           form.append("imgfile", imgfile);

            form.append("name", name);

           form.append("title", title);

             //成功调用并返回

           xmlhttp.addEventListener("load", function (event) {

                 if (event.currentTarget.responseText == "success") {

                     alert("保存成功!");  

                      window.location.href="${ctx}/Main/Index";                   

                 }

                 else if("error"==event.currentTarget.responseText){

                    alert("用户不存在,新增失败!");

                 }else {

                  alert("新增失败,请确保图片格式正确并且并且文章合法,或者刷新重试!!!");

                 }

             }, false);

             xmlhttp.addEventListener("error", function (event) { //调用失败

                 alert("保存失败!");

             }, false);

             //声明提交方式和请求路径

           xmlhttp.open('POST', "${ctx}/Main/ArticleInsert");

          //  xmlhttp.setRequestHeader("Content-Type","utf-8");

           //传入数据

           xmlhttp.send(form);

          }else

          {alert("浏览器版本太低,请使用高版本的浏览器或其他浏览器!");

          }};

有关Java文件上传的后台代码请看另一篇博客:https://blog.csdn.net/weixin_44600235/article/details/96366333

你可能感兴趣的:(Java)