今天我第一次发带表格的文章，在Simditor的富文本编辑器里还好，但是在页面排版确实很难看，于是就修改了一下Simditor源码，使其能够显示的好看一些。
这是一开始的显示难看的图：
![图片.png]()
那么，如何去设置呢？
我们的需求很简单：给其加个border，然后给起thead加个灰色背景。
1.首先，打开simditor下的lib下的simditor.js
![图片.png]()
2.找到这个位置：
Formatter.prototype._init = function() {
this.editor = this._module;
this._allowedTags = $.merge(['br', 'span', 'a', 'img', 'b', 'strong', 'i', 'strike', 'u', 'font', 'p', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'h1', 'h2', 'h3', 'h4', 'hr','table'], this.opts.allowedTags);
this._allowedAttributes = $.extend({
// img: ['src','data-original','alt', 'width', 'height', 'data-non-image'],by时玉龙
img: ['style','class','data-original','alt', 'width', 'height', 'data-non-image'],
table:['border'],//时玉龙table
a: ['href', 'target'],
font: ['color'],
code: ['class']
}, this.opts.allowedAttributes);
主要是修改这两个地方：
//在$merge最后面的那个hr标签后面，加上table标签，这个是我已经加好了的。
this._allowedTags = $.merge(['br', 'span', 'a', 'img', 'b', 'strong', 'i', 'strike', 'u', 'font', 'p', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'h1', 'h2', 'h3', 'h4', 'hr','table'], this.opts.allowedTags);
还需要修改这里：
this._allowedAttributes = $.extend({
// img: ['src','data-original','alt', 'width', 'height', 'data-non-image'],by时玉龙
img: ['style','class','data-original','alt', 'width', 'height', 'data-non-image'],
table:['border'],//加上这句代码，意思是让table有border属性
然后，我们ctrl+F找到这里：
TableButton.prototype.decorate = function($table) {
var $colgroup, $headRow, $resizeHandle, $tbody, $thead, $wrapper;
if ($table.parent('.simditor-table').length > 0) {
this.undecorate($table);
$table.wrap('<div class="simditor-table"></div>');
$table.attr("border","1");//加上这句代码
$wrapper = $table.parent('.simditor-table');
$colgroup = $table.find('colgroup');
if ($table.find('thead').length < 1) {
加上带注释的那行代码。这样的话，就可以实现表格带border了。
然后，我们给thead加上灰色背景。
需要ctrl+F找到这里
$.extend(this.editor.formatter._allowedStyles, {
thead:['background-color'],//加上这行代码
td: ['text-align'],
th: ['text-align']
});
然后ctrl+F找到这个地方：
if ($table.find('thead').length < 1) {
$thead = $('<thead />');
$thead.css("background-color",'#dddedf');//给其添加灰色背景颜色
$headRow = $table.find('tr').first();
$thead.append($headRow);
this._changeCellTag($headRow, 'th');
$tbody = $table.find('tbody');
这样的话，就大功告成了，最终会是以下这个样子：
