【无标题】

最新推荐文章于 2024-05-01 14:30:23 发布

klggd555

最新推荐文章于 2024-05-01 14:30:23 发布

阅读量552

点赞数

文章标签：前端 vue.js typescript

本文链接：https://blog.csdn.net/klggd555/article/details/131134051

版权

vue3 使用wangEditor表格边框显示不出来

1.样式文件一定一定要放在展示内容的vue页面下，不能放在编辑器页面下。
2.需要注意的是：从编辑器中获取的 html 代码是不包含任何样式的纯 html，如果显示的时候需要对其中的<table><code><blockquote>等标签进行自定义样式（这样既可实现多皮肤功能），下面提供了编辑器中官方使用的样式供参考

<style >
/* table 样式 */
table {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

table td,
table th {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 3px 5px;
}

table th {
    border-bottom: 2px solid #ccc;
    text-align: center;
}

/* blockquote 样式 */
blockquote {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
}

/* code 样式 */
code {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background-color: #f1f1f1;
    border-radius: 3px;
    padding: 3px 5px;
    margin: 0 3px;
}

pre code {
    display: block;
}

/* ul ol 样式 */
ul,
ol {
    margin: 10px 0 10px 20px;
}</style>