关于 v-html 解析富文本内容样式问题

最新推荐文章于 2025-06-08 13:10:22 发布

西波_

最新推荐文章于 2025-06-08 13:10:22 发布

阅读量2.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： html 前端 css

本文链接：https://blog.youkuaiyun.com/m0_57874230/article/details/128485950

在我们做一些后台管理里需要富文本框，富文本框的内容会生成代码片段传给服务端，服务端对代码片段处理成字符串，好让其他端去解析，这时候我们用v-html 时候，会发现样式和我们在富文本框里编辑的内容不一样，比如文字超出图片超出等问题还有最头疼的表格没有背景颜色和表格线条，这时候需要在本地添加一些样式

::v-deep {
        img,
        p,
        table,
        span {
          max-width: 100%;
        }
        blockquote {
          border-left: 8px solid #d0e5f2;
          padding: 10px 10px;
          margin: 10px 0;
          background-color: #f1f1f1;
        }

        code {
          font-family: monospace;
          background-color: #eee;
          padding: 3px;
          border-radius: 3px;
        }
        pre > code {
          display: block;
          padding: 10px;
        }

        table {
          border-collapse: collapse;
          overflow-x: auto;
          display: -webkit-box;
          -webkit-overflow-scrolling: touch;
        }
        td,
        th {
          border: 1px solid #ccc;
          min-width: 50px;
          heigh