解决Simditor表格显示不带边框排版问题

木来

今天我第一次发带表格的文章,在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');

这样的话,就大功告成了,最终会是以下这个样子:

姓名 班级 学号 项目名称 导师
测试1
软件工程 H20 https://inx.fun
xxx
测试2
软件工程 H20 https://inx.fun xxx

意见反馈