首页 前端知识 wangeditor v5 自定义html样式

wangeditor v5 自定义html样式

2024-04-29 11:04:04 前端知识 前端哥 162 458 我要收藏

由于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博客

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5927.html
标签
评论
发布的文章

AJAX和JSON

2024-05-03 19:05:37

qml 文件中 JSON的使用

2024-05-03 19:05:03

json在线格式化代码

2024-05-03 19:05:01

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!