时间戳

首页 > 解决方案 > 如何在CKeditor中显示表格边框

angular - 如何在CKeditor中显示表格边框

问题描述

我正在使用 CKEditor 在一个页面（页面 A）上写一些带有表格的文本，然后将其发送到另一个页面（页面 B），当我编辑我的文本并且表格显示时，编辑器工作正常，但是当我检索时我的文本（使用 editor.getData() ）并将其发送到页面 B，表格消失

例如，使用 editor.getData() 检索的文本

<table><tableRow><tableCell><paragraph>Foo</paragraph></tableCell><tableCell><paragraph>Bar</paragraph></tableCell></tableRow></table>

这在（Page B）中显示了一个“无边界”表格，（Page B）在以这种方式格式化时确实显示了一个表格

<table border="1" cellpadding="1" cellspacing="1" style="width:500px">This is a table </table>

我像这样配置了我的CKeditor：

// 要包含在构建中的插件。

ClassicEditor.builtinPlugins = [
    Essentials,
    UploadAdapter,
    Autoformat,
    BlockQuote,
    CKFinder,
    Heading,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
];

// Editor configuration.
ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            'bold', 'italic', 'insertTable'
        ]
    },
    table: {
        contentToolbar: [
            'tableColumn',
            'tableRow',
            'mergeTableCells'
        ]
    },
    indentBlock: {
        offset: 1,
        unit: 'em'
    },
    language: 'en'
};

为了显示表格样式（例如带有可见边框的表格），我是否忘记了配置中的某些内容？

标签： angularangular6ckeditorckeditor5

解决方案

CK Editor CSS 不会在页面 B 上加载，由开发人员在生成的内容上添加 CSS。尝试在页面 B 上添加此 CSS。

table {
    border-collapse: collapse;
}
table, td {
    border: 1px solid black;
}

参考

推荐阅读