使用UEditor富文本编辑器提取table数据

之前有一个功能是做导入商品，但是不是使用excel或者文档之类的直接导入，然后后台解析数据。此次采用的是用户直接复制excel中的数据到文本域中，前端再解析数据，解析为一个二维数组的方式，再传给后台查询完整信息。（项目比较老，使用jsp+jq完成的）。每行数据列数不确定（但对于前端不重要，有多少传多少，反正每一行的列数是相同的），但是列信息不一定全必录。

为适应项目，首先想到了采用如下的方式去显示和处理数据

页面显示部分如下：

<textarea type="text" id="inputInfo" value="">xxx</textarea>

关于数据处理：

// 把复制过来的数据转换为二维数组
 formaterValToJSON() {    var \_fmt = /\\t/;    var val = this.$\_inputInfo.val() || \_fmt;    if (val == this.$\_inputInfo\[0\].defaultValue) {      return false;
    }    var rowArr = val.split('\\n');    var _rowArr = \[\];    for (var i = 0, lenR = rowArr.length; i < lenR; i++) {      if (rowArr\[i\] == '' || rowArr\[i\].replace(/\\t/g, '') == '') {        continue;
      }      var colArr = rowArr\[i\].split(\_fmt);      var \_colArr = \[\];      for (var j = 0, lenC = colArr.length; j < lenC; j++) {
        _colArr.push(colArr\[j\]);
      }
      \_rowArr.push(\_colArr);
    }    if (_rowArr.length == 0) {      return false;
    }    return _rowArr;
}

这种方式能够很快的达到预期效果，只是关于导入完成后的数据处理在项目中比较麻烦，但这一步操作开发是很快的。

但同时也具有局限性，只考虑了用户从excel复制过来的数据，当时也没有测试从word过来的表格是不是一个效果，没有注意，需求也没有讲到这里，就跳过了。用户复制到文本域的内容也是不规则的，毕竟只是一个textarea，没有样式相关显示操作处理，只是简单实现一下就结束了。

可见，简单的完成，导致的结果是局限性太大，而且交互体验也不是很好，用户没办法在文本域中检查数据，因为列不是必录，也可能长短不一，所以每一列没有对齐，根本没有办法检查数据，只能点击导入之后再看看是不是正确的了........

于是，为了好看，我选择了曾经使用过的UEditor富文本编辑器，开开心心地去一步一步实现...

先引入必要的文件：

<script type="text/javascript" charset="utf-8" src="../ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="../ueditor/ueditor.all.min.js"> </script><script type="text/javascript" charset="utf-8" src="../ueditor/lang/zh-cn/zh-cn.js"></script>

然后还是加一个文本域（重要的是id，标签的话，应该是块标签就可以吧，以前我用的div）：

<textarea id="inputInfo" type="text/plain"></textarea>

然后就去初始化我们的富文本编辑器了：

ueditor = UE.getEditor('inputInfo', {  toolbars: \[
    \['fullscreen', 'undo', 'redo', 'selectall', 'searchreplace', 'cleardoc', 'preview'\]
  \],  autoHeightEnabled: false,  autoFloatEnabled: true,  initialFrameWidth: 850,  elementPathEnabled: false,  wordCount: false,  enableContextMenu: true,  autotypeset: {    removeEmptyline: true,    clearFontSize: true,    clearFontFamily: true
  },  retainOnlyLabelPasted: true,  initialContent: 'xxx',  autoClearinitialContent: true});
ueditor.ready(function() {  var height = $(window).height() - $("#inputInfo").offset().top - 50;
  ueditor.setHeight(height);
  $(".edui-editor-messageholder.edui-default").css({ "visibility": "hidden" });
  UE.dom.domUtils.on(ueditor.body, 'keydown', function(e) {    var keyCode = e.keyCode || e.which;    if (e.ctrlKey && keyCode == 86) {
      ctrlV = true;
    }
  });
});

UE.getEditor('inputInfoShow').addListener('contentChange', function() {  // 如果内容改变就去触发事件，不太友好，所以只在粘贴内容的时候再去触发比较合适
  if (ctrlV) {
    THISPAGE.formaterValToHTML();
    ctrlV = !ctrlV;
  }
});

我只保留了很少的工具栏工具，因为我这里用不上，所以选了几个可以用得上的，初始化配置也是配置了需要用的东西。关于配置可以看文档编辑器初始化配置、工具栏配置。

完了之后一切ok。

对了中间有监听键盘事件，因为我只想在用户复制的时候去处理一下数据，因为在这里显示必须是表格，所以我想也不会有人无聊到去弄这个玩，而是为了功能使用达到目的即可。所以即使想添加数据，那也可以插入行，后面我提取table里面的数据就好了。不是复制的时候去改变数据，那就不用再继续去触发事件了，没必要。

一切ok，复制过来显示都ok，但是提交数据的时候才觉得难受，以前使用把样式保存一下就好，没必要做数据处理，毕竟我们显示的时候直接拿然后显示html就好，不用处理什么的。

现在却需要去处理table数据，内置的getContentTxt()不能达到要求，因为它只能取到文本，而我需要的是数组....

所以，我又开启了处理数据的代码编写......

var val = ueditor.getContent();// 从word复制过来的表格里面会自动带出一系列样式及其他标签，先给过滤掉，只保留table类标签，便于提取数据val = val.replace(/<(\\/)?(p|br|span|strong|div)(\\/)?>/g, '');console.log(val)var inputData = \[\];
val.replace(/<tr.*<\\/tr>/g, function() {  var trArr = arguments\[0\].split('</tr>');  for (var i = 0, lenTR = trArr.length; i < lenTR; i++) {    var flag = false;
    _trDataArr = \[\];    var item = trArr\[i\];    if (item == '') {      continue;
    }
    item.replace(/<td.*<\\/td>/g, function() {      var tdArr = arguments\[0\].split('</td>');      for (var j =0, lenTD = tdArr.length; j < lenTD; j++) {        var ele = tdArr\[j\];        if (ele == '') {          continue;
        }        var str = ele.replace(/<td.*>/ig, '');        if (!flag && str != '') {
          flag = true;
        }
        _trDataArr.push(str);
      }
    });    // 空行跳过
    if (flag) {
      inputData.push(_trDataArr);
    }
  }
});return inputData;

就采用这样的方式去提取table里面的数据并且格式化为二维数组......

但是同样有局限性，只适用于从各处复制来的表格，如果不是表格，还是需要在之前的监听函数那里先格式化为二维数组，再拼接出一个html显示回去才行.......同时，复制的格式需要限定，否则根本没必要做除了表格之外的复制数据处理.....

就这样了，只做了表格的，别的还在思考中，想想其实也没必要做~~~用excel就能处理好，而且还很方便，我想也没人选择用一大块不规则的 文本 来存自己的多行多列信息吧~~~

关于有看到有大佬说用 form 提交之类的，我想了想，可能不太适合这种场景，也就没去试了。。。

希望各位大佬指教，这样就可以优化了，O(∩_∩)O哈哈~~~