TinyMCE Editor 4.8.1版本表格边框丢失问题求助

你在Optimizely解决方案中使用TinyMCE 4.8.1版本，已引入table插件，但创建表格时行、列边框缺失，无法显示网格线，当前配置代码如下：

services.Configure<TinyMceConfiguration>(config =>{
     config.Default()
    .AddEpiserverSupport()
    .EnableImageTools()
    .Menubar("edit insert view format")
    .AddPlugin("epi-link").AddPlugin("epi-image-editor").AddPlugin("epi-dnd-processor")
    .AddPlugin("epi-personalized-content").AddPlugin("print").AddPlugin("preview").AddPlugin("searchreplace")
          .AddPlugin("autolink").AddPlugin("directionality").AddPlugin("visualblocks").AddPlugin("visualchars")
    .AddPlugin("fullscreen").AddPlugin("image").AddPlugin("link").AddPlugin("media").AddPlugin("table")
    .Toolbar("formatselect | numlist  bullist | outdent indent | alignleft aligncenter alignright  |  epi-personalized-content | code | ")
    .BlockFormats("Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3; Header 4=h4;Header 5=h5;Header 6=h6");
 });

按以下方法解决：

1. 补充表格工具栏操作按钮 #

当前Toolbar配置中缺少表格相关操作按钮，既无法通过编辑器手动设置表格边框，编辑器也不会自动给表格添加默认边框样式。在Toolbar中添加表格操作按钮：

.Toolbar("formatselect | numlist bullist | outdent indent | alignleft aligncenter alignright | table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol | epi-personalized-content | code")

2. 给编辑器内容区域添加表格默认样式 #

TinyMCE编辑器内容区域的默认样式未给表格设置边框，通过ContentStyle配置注入自定义样式，强制显示表格网格线：

.ContentStyle("table { border-collapse: collapse; width: 100%; } table, th, td { border: 1px solid #ccc; padding: 8px; }")

修改后的完整配置代码 #

services.Configure<TinyMceConfiguration>(config =>{
     config.Default()
    .AddEpiserverSupport()
    .EnableImageTools()
    .Menubar("edit insert view format")
    // 合并插件调用，简化代码
    .AddPlugin("epi-link epi-image-editor epi-dnd-processor epi-personalized-content print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media table")
    .Toolbar("formatselect | numlist bullist | outdent indent | alignleft aligncenter alignright | table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol | epi-personalized-content | code")
    .BlockFormats("Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3; Header 4=h4;Header 5=h5;Header 6=h6")
    .ContentStyle("table { border-collapse: collapse; width: 100%; } table, th, td { border: 1px solid #ccc; padding: 8px; }");
 });

额外检查项 #

• 用浏览器开发者工具查看编辑器内的table元素，确认是否有全局样式覆盖了表格边框样式，若有则调整自定义样式优先级（比如添加!important）。
• 查看浏览器控制台，确认TinyMCE的table插件是否加载成功，无加载失败报错。

内容的提问来源于stack exchange，提问作者surya