解决复制word导致格式杂乱的问题——wangeditor

解决复制word内容导致格式杂乱的问题

网上有很多关于wangeditor编辑框解决word内容格式的问题，基本都是通过自定义的一个粘贴过滤字符串，通过正则滤过一些xml，class，span，空格等字符串

editor.customConfig.pasteTextHandle = function (content) {
    var html = content;
    html = html.replace(/<\/?SPANYES[^>]*>/gi,"");//  移除span
    html = html.replace(/<(\w[^>]*)  lang=([^|>]*)([^>]*)/gi, "<$1$3");// 移除lang属性
    html = html.replace(/<\\?\?xml[^>]*>/gi, "");//  移除xml和相关描述
    html = html.replace(/<\/?\w+:[^>]*>/gi, "");// 移除xml命名空间的标签
    html = html.replace(/ /gi, "");//  移除空格
    html = html.replace(/^\s+|\s+$/g,"");
    html = html.replace(/ <\/o:p>/g,"");//移除标签
    html = html.replace(//g,"");//移除br标签
    return html;
};

这是在wangeditor配置文件里面加入的格式过滤器
但是这个还是不能够有效的将格式弄好，仍然很不美观。

有两个方案可以解决这个问题：

1，更换富文本编辑框

可以使用百度的ueditor，但是这个编辑框弄起来很麻烦，一直不明白干嘛要集成后端。不建议使用

2，使用iframe 引入空白页面直接使用word自带样式

父页面引入iframe

   <iframe src="${ctx}/advice/seeIfcontent?id=${advice.id}" id="iframe" name="iframe" frameborder="0"
                   scrolling="no" onreadystatechange="resize()" onload="resize()" style=" width: 100%;">

                </iframe>

src里面为后端路径，
为了能够让iframe自适应内容宽高，使用js处理

 <script type="text/javascript">
      var oTime = null;
      function resize() {
          if (oTime) {
              clearTimeout(oTime);
          }
          oTime = setTimeout(reset, 200);
      }

      //iframe自适应高度的函数
      function reset() {
          var frame = document.getElementById("iframe");
          var outHeight = frame.offsetHeight;
          var inHeight = frame.contentWindow.document.body.scrollHeight;
          if (outHeight < inHeight) {
              frame.style.height = (inHeight + 10) + "px";
          }else if(inHeight>650){
              frame.style.height=(inHeight + 10) + "px";
          }else{
              frame.style.height="750px";
          }
      }

另外，iframe引入的页面需要一些样式处理

 table{
            margin-top: 0pt!important;
            width: 95% !important;
            border: 1px solid #000000;
            margin-bottom: 6px;
        }
        td{
            border: 1px solid #000000;
        }
        b{
            height: 0px;
            font-size: 1.0rem!important;
        }
        b>span{
            font-family: normal !important;
            font-weight: bold!important;
        }
        img{
            max-width: 95%!important;
            border: 1px solid #ddd;
        }

至此，页面布局完美解决，基本和原来的word内容格式一致。美观度大大提升！