editor.getHtml()显示的样式与编辑器显示的样式差异比较大

[lianghuiyong]

bug 描述

editor.getHtml()显示的样式与编辑器显示的样式差异比较大

你预期的样子是？

editor.getHtml()显示的样式与编辑器显示的样式保持一致，即：所见即所得。

浏览器及版本号

Chrome V95

wangEditor 版本

"@wangeditor/editor-for-vue": "^0.6.12-2"

官网能否复现该 bug ？

不能

编辑页样式截图

详情展示页样式截图

详情页引入的样式

// 增加样式：https://www.wangeditor.com/v5/guide/for-frame.html#%E5%A2%9E%E5%8A%A0%E6%A0%B7%E5%BC%8F

/* 表格 */
table {
  border-collapse: collapse;
}
table th,
table td {
  border: 1px solid #ccc;
  min-width: 50px;
  height: 20px;
  text-align: left;
}
table th {
  background-color: #f1f1f1;
  text-align: center
}

/* 代码块 */
pre>code {
  display: block;
  border: 1px solid hsl(0, 0%, 91%);
  border-radius: 4px 4px;
  text-indent: 0;
  background-color: #fafafa;
  padding: 10px;
  font-size: 14px;
}

/* 引用 */
blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 10px 10px;
  margin: 10px 0;
  background-color: #f1f1f1;
}

/* 列表 */
ul, ol {
margin: 10px 0 10px 20px;
}

/* 分割线 */
hr {
  display: block;
  width: 90%;
  margin: 20px auto;
  border: 0;
  height: 1px;
  background-color: #ccc;
}

img {
  max-width: 100%;
}

语法高亮

package.json
    "clipboard": "^2.0.8",
    "prismjs": "^1.25.0",

import Prism from "prismjs"
import "prismjs/themes/prism-tomorrow.css"
import 'prismjs/components/'

// 代码片段的右上角会出现一个复制按钮
import 'clipboard'
import 'prismjs/plugins/toolbar/prism-toolbar' 
import 'prismjs/plugins/toolbar/prism-toolbar.css'
import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard'

// 显示语言
import 'prismjs/plugins/show-language/prism-show-language' 
export default Prism

[lianghuiyong]

是wangEditor-v5 的问题，发错地方了

[goku1989]

是wangEditor-v5 的问题，发错地方了

解决了吗