CKEditor表格边框显示问题：跨页传递后样式丢失如何解决？

Got it, let's break down why your tables are showing up without borders on Page B—and how to fix it.

The core issue here is that CKEditor 5 (your ClassicEditor setup) outputs semantic, clean table HTML by default, which doesn't include old-school attributes like border, cellpadding, or inline styles. But Page B is expecting those specific attributes to render borders properly. Here are three solid solutions depending on your needs:

1. Add Table Properties Plugin for User-Controlled Styles #

CKEditor has built-in plugins that let users set table borders, padding, and other properties directly in the editor—and those settings will be included in the getData() output. You're missing these plugins in your current config.

Update your plugin list and toolbar config like this:

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
  Essentials, UploadAdapter, Autoformat, BlockQuote, CKFinder, Heading, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar,
  TableProperties, // Add this plugin
  TableCellProperties // Add this too for cell-level styles
];

// Editor configuration.
ClassicEditor.defaultConfig = {
  toolbar: {
    items: [ 'bold', 'italic', 'insertTable' ]
  },
  table: {
    contentToolbar: [ 
      'tableColumn', 'tableRow', 'mergeTableCells',
      'tableProperties', // Add button to edit table properties
      'tableCellProperties' // Add button for cell properties
    ]
  },
  indentBlock: {
    offset: 1, unit: 'em'
  },
  language: 'en'
};

Now when users insert a table, they can open the table properties panel to set borders, padding, width, etc.—and those attributes will be part of the HTML returned by getData(), which Page B will recognize.

2. Auto-Add Default Attributes via Custom Plugin #

If you don't want users to manually set styles (you just want every table to have those border/padding attributes by default), you can create a tiny custom plugin to inject these attributes during the editor's output conversion.

Here's how to set that up:

ClassicEditor.create(document.querySelector('#editor'), {
  // Keep your existing config
  builtinPlugins: [
    Essentials, UploadAdapter, Autoformat, BlockQuote, CKFinder, Heading, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar
  ],
  toolbar: {
    items: [ 'bold', 'italic', 'insertTable' ]
  },
  table: {
    contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
  },
  indentBlock: {
    offset: 1, unit: 'em'
  },
  language: 'en',
  // Add the custom plugin
  extraPlugins: [ AutoTableAttributes ]
})
.catch(error => {
  console.error(error);
});

// Custom plugin to inject default table attributes
function AutoTableAttributes(editor) {
  editor.conversion.for('dataDowncast').add(dispatcher => {
    dispatcher.on('element:table', (evt, data, conversionApi) => {
      const viewWriter = conversionApi.writer;
      const viewTable = conversionApi.mapper.toViewElement(data.item);
      
      // Add your default attributes here
      viewWriter.setAttribute('border', '1', viewTable);
      viewWriter.setAttribute('cellpadding', '1', viewTable);
      viewWriter.setAttribute('cellspacing', '1', viewTable);
      viewWriter.setStyle('width', '500px', viewTable);
    });
  });
}

This will automatically add those attributes to every table when you call getData(), no user action required.

3. Fix It on Page B with CSS #

If you can modify the styles on Page B, the cleanest solution (semantically speaking) is to add CSS to style all tables properly, instead of relying on old HTML attributes.

Add this CSS to Page B's stylesheet:

table {
  border-collapse: collapse;
  width: 500px;
  margin: 1em 0;
}
table, th, td {
  border: 1px solid #333;
  padding: 1px;
}

This will style any clean <table> tag from CKEditor to have borders and padding, matching the look you want without changing how CKEditor outputs HTML.

Which One Should You Choose? #

• Option 1 is best if you want users to have control over table styles (e.g., some tables might need different borders or widths).
• Option 2 is great for consistency—every table gets the same default styles automatically.
• Option 3 is the most modern, semantic approach, and keeps your editor output clean while fixing the display on Page B.

Pick the one that fits your workflow best!

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