tinymce自动实现斑马纹表格

最新推荐文章于 2024-04-10 09:52:16 发布

不会敲代码的小liu

最新推荐文章于 2024-04-10 09:52:16 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/leo_shire/article/details/114685945

版权

本文介绍了如何通过TinyMCE的table插件快速实现斑马纹表格，包括利用table_row_class_list配置属性自定义行属性，以及直接修改plugin.js源码来达到自动效果。在设置默认值后，需要确保对应的样式已全局添加。

摘要由CSDN通过智能技术生成

快速实现方法包括：

1、使用table插件自带配置属性table_row_class_list自定义行属性类型

tinymce.init({
    selector: '#tinydemo',
    plugins: "table",
    toolbar: "table",
    table_class_list: [
        {title: 'None', value: ''},
        {title: '表头', value: 'table_header'},
        {title: '白色', value: 'table_row_white_background'},
        {title: '灰色', value: 'table_row_gray_background'}
    ],
});

修改后富文本编辑器会多出以下选项

注意table_header等对应样式需要全局添加才起作用，如需在富文本编辑器也能看到效果，需要在prism.css文件里也加入对应样式

2、修改table插件源码，自动生成斑马纹表格

修改node_modules里tinymce>plugins>table>plugin.js源文件

//源文件558行左右
var fromTag = function (tag, scope) {
      var doc = scope || domGlobals.document;
      var node = doc.createElement(tag);
      return fromDom(node);
    };
//修改后
var fromTag = function (tag, rowIndex, scope) {
      var doc = scope || domGlobals.document;
      var node = doc.createElement(tag);
      
      //新增内容，可以添加样式，样式同样需要全局添加；也可以直接修改
      if(tag == 'tr'){
        if(rowIndex == 0){
          node.className = "table_header"
        }else if((rowIndex - 1)%2 == 1){
          node.className = "table_row_gray_background"
        }
      }
      if(tag == 'td'){
        node.style.height = '35px'
        node.style.padding = '0 5px'
      }

      return fromDom(node);
    };

//源文件5801行左右
var tableRow = function () {
      return Element.fromTag('tr');
    };
//修改后
var tableRow = f