由于wangeditor的设计,保存下来的html是无样式的,需要自己自定义,下面给出本人的自定义样式供参考(在官网的基础上进行改进)
.editor-content-view {
/*不需要border*/
/*border: 3px solid #ccc;*/
/*border-radius: 5px;*/
padding: 0 10px;
margin-top: 20px;
overflow-x: auto;
}
.editor-content-view a {
color: #0269c8;
cursor: pointer;
}
.editor-content-view p,
.editor-content-view li {
white-space: pre-wrap; /* 保留空格 */
margin: 15px 0;
}
.editor-content-view p {
line-height: 1.5;
}
.editor-content-view blockquote {
border-left: 8px solid #d0e5f2;
padding: 10px 10px;
margin: 15px 0;
background-color: #f1f1f1;
}
/*.editor-content-view code {*/
/* font-family: monospace;*/
/* background-color: #eee;*/
/* padding: 3px;*/
/* border-radius: 3px;*/
/*}*/
/*.editor-content-view pre>code {*/
/* display: block;*/
/* padding: 10px;*/
/*}*/
.editor-content-view table {
border-collapse: collapse;
margin: 15px 0;
}
.editor-content-view td,
.editor-content-view th {
border: 1px solid #ccc;
min-width: 50px;
height: 20px;
}
.editor-content-view th {
background-color: #f1f1f1;
}
.editor-content-view ul,
.editor-content-view ol {
padding-left: 20px;
}
.editor-content-view ul {
list-style: disc
}
.editor-content-view ol {
list-style: decimal;
}
.editor-content-view input[type="checkbox"] {
margin-right: 5px;
}
不是专业写前端的,若有写的不好的请见谅
代码高亮功能,根据官网下载Prism这个插件即可,参考:
vue3中使用prismjs或者highlight.js实现代码高亮_vue3 代码高亮-CSDN博客