wangeditor v5 自定义html样式

Wangeditor自定义样式及Vue3中的代码高亮实现,

原创已于 2024-01-26 20:51:57 修改 · 2.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css

于 2024-01-26 20:48:54 首次发布

本文介绍了如何在Wangeditor的基础上自定义HTML样式，并提到在Vue3项目中使用Prism插件实现代码高亮的方法，适合非前端开发者参考。

部署运行你感兴趣的模型镜像

由于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 代码高亮-优快云博客

您可能感兴趣的与本文相关的镜像