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

最后更新于: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; } ```
';