牛骨文教育服务平台(让学习变的简单)

自定义表格、引用、代码的样式

编辑器对编辑内容中的表格、引用区域、代码区域做了默认的样式处理。如果想要自定义这些区域的样式,可通过在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;
}