自定义表格、引用、代码的样式
编辑器对编辑内容中的表格、引用区域、代码区域做了默认的样式处理。如果想要自定义这些区域的样式,可通过在html
页面中增加以下样式来修改:
.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
等这些关键字找到。
例如(具体以搜索的结果为准)
.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;
}