vue wangeditor 表格没有border
时间: 2023-08-16 07:14:26 浏览: 69
你可以通过自定义样式来为 Wangeditor 中的表格添加边框。在 Vue 中使用 Wangeditor,可以通过以下步骤实现:
1. 在组件中引入 Wangeditor,并在 `mounted` 钩子中初始化编辑器:
```javascript
import Editor from 'wangeditor'
export default {
mounted() {
const editor = new Editor('#editor')
editor.create()
}
}
```
2. 在模板中添加一个用于显示编辑器的容器:
```html
<template>
<div id="editor"></div>
</template>
```
3. 在样式文件中添加自定义样式来设置表格边框。可以使用 CSS 的 `border` 属性来设置边框样式。例如,添加以下样式:
```css
#wangEditor-container table {
border-collapse: collapse;
}
#wangEditor-container table td,
#wangEditor-container table th {
border: 1px solid #000;
padding: 5px;
}
```
以上样式将为表格添加 1 像素宽的黑色边框和 5 像素的内边距。
请注意,这里使用的选择器 `#wangEditor-container` 是 Wangeditor 默认生成的编辑器容器的 id,如果你在初始化时指定了其他容器 id,需要相应地修改选择器。
通过以上步骤,你可以为 Wangeditor 中的表格添加边框。记得根据需要自定义样式以满足你的需求。