vue3中使用wangEditor，展示html时无样式的解决方法

最新推荐文章于 2025-02-28 11:08:07 发布

weixin_74128026

最新推荐文章于 2025-02-28 11:08:07 发布

阅读量1.8k

点赞数 17

文章标签： css3 html5 前端 vue.js

本文链接：https://blog.csdn.net/weixin_74128026/article/details/143402282

版权

正常我们在编辑器中输入内容时，是会有自带的样式的，比如这样

但是在拿到这个html时，所展示出来的内容是无样式的，比如这里，表格的样式就消失了

在官网的演示demo这里有讲到关于不显示样式的问题

官网是这样解决的

点进来后有以下代码

.editor-content-view {
  border: 3px solid #ccc;
  border-radius: 5px;
  padding: 0 10px;
  margin-top: 20px;
  overflow-x: auto;
}

.editor-content-view p,
.editor-content-view li {
  white-space: pre-wrap; /* 保留空格 */
}

.editor-content-view blockquote {
  border-left: 8px solid #d0e5f2;
  padding: 10px 10px;
  margin: 10px 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;
}
.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 input[type="checkbox"] {
  margin-right: 5px;
}

把这些代码放在一个css文件中，再从外部引入进来就可以了。笔者这里没有单独创建一个css文件，而是把这一段直接放在.vue文件中的<style>部分了

在你的<template>部分中绑定class属性

到这一步还是显示不了样式的，可以把<style>的scoped属性删除，即不要使用<style scoped>,不然样式会不生效。或者还有一种解决办法，用:deep()把以上的所有css属性括起来，像这样(过度使用:deep()可能会导致性能问题，因为它需要Vue去解析和处理更多的CSS选择器)

:deep(.editor-content-view) {
        /* border: 3px solid #ccc; */
        border-radius: 5px;
        padding: 0 10px;
        margin-top: 20px;
        overflow-x: auto;
    }

完成上述步骤后就可以正常显示有样式的内容了