自定义表格、引用、代码的样式
最后更新于：2022-04-01 23:42:03
编辑器对编辑内容中的表格、引用区域、代码区域做了默认的样式处理。如果想要自定义这些区域的样式，可通过在`html`页面中增加以下样式来修改：
```css
.wangEditor-container .wangEditor-txt blockquote {
/* 在此自定义引用区域样式 */
}
.wangEditor-container .wangEditor-txt table {
/* 在此表格样式 */
}
.wangEditor-container .wangEditor-txt table td,
.wangEditor-container .wangEditor-txt table th {
/* 在此表格样式 */
}
.wangEditor-container .wangEditor-txt pre {
/* 在此代码区域样式 */
}
```
**注意：以上`css`选择器要按照代码示例中编写，否则无效。**
----
wangEditor 默认的这些区域的样式，可以在下载的文件中找到 `wangEditor.css` 然后搜索 `blockquote` `table` `pre` 等这些关键字找到。
例如（**具体以搜索的结果为准**）
```css
.wangEditor-container .wangEditor-txt blockquote {
display: block;
border-left: 8px solid #d0e5f2;
padding: 5px 10px;
margin: 10px 0;
line-height: 1.4;
font-size: 100%;
background-color: #f1f1f1;
}
.wangEditor-container .wangEditor-txt table {
border: none;
border-collapse: collapse;
}
.wangEditor-container .wangEditor-txt table td,
.wangEditor-container .wangEditor-txt table th {
border: 1px solid #f1f1f1;
padding: 3px 5px;
min-width: 50px;
height: 20px;
}
.wangEditor-container .wangEditor-txt pre {
border: 1px solid #ccc;
background-color: #f8f8f8;
padding: 10px;
margin: 5px 0px;
font-size: 0.8em;
border-radius: 3px;
}
```
';