开发后端Web应用CRUD系统：如何移除TinyMCE表格内边距？

嘿，我来帮你搞定这个问题！要去掉TinyMCE编辑器里表格的内边距，有几种简单有效的方法，你可以根据自己的项目情况选择：

方法1：直接在初始化配置中注入自定义样式 #

这是最快捷的方式，你只需要在tinymce.init()的配置里添加content_style属性，直接覆盖编辑器的默认表格样式：

<script type="text/javascript">
// 用偏好配置初始化TinyMCE编辑器
tinymce.init({
  selector: 'textarea',
  height: 200,
  theme: 'modern',
  plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime...',
  // 添加这部分自定义样式
  content_style: `
    table td, table th {
      padding: 0 !important;
    }
  `
});
</script>

这里的!important是为了确保自定义样式优先级高于TinyMCE的默认表格样式，保证内边距能被彻底移除。

方法2：通过外部CSS文件定义样式 #

如果你的项目已经有自定义样式文件，也可以通过content_css引入，然后在CSS里设置表格内边距：

1. 先在TinyMCE初始化配置中添加外部CSS的引用：

tinymce.init({
  // 其他配置项...
  content_css: '/path/to/your/custom-editor-styles.css'
});

2. 在custom-editor-styles.css文件中添加表格样式：

table td, table th {
  padding: 0;
}

这种方式更适合需要管理大量编辑器样式的场景，方便后续维护。

方法3：针对特定表格移除内边距（可选） #

如果你不想移除所有表格的内边距，只想针对特定表格生效，可以给目标表格添加自定义类，然后通过样式匹配：

1. 在编辑器中给表格添加类名（比如no-padding-table）
2. 在样式中添加对应规则：

.no-padding-table td, .no-padding-table th {
  padding: 0 !important;
}

这样就能精准控制需要移除内边距的表格啦！

内容的提问来源于stack exchange，提问作者Matteo Pietro Peru