如图所示：

从上图可以看到回显的样式和编辑的样式不一
因为编辑器输出或者生成的 HTML 都是纯标签，没有内联样式。所以，显示 HTML 时需要你自定义样式。
在页面内引入以下样式

<style>
.editor-content-view {
  border-radius: 5px;
  padding: 0 10px;
  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;
}
</style>

• 本文标题： wangedit富文本编辑器显示内容和编辑内容样式不一，样式失效
• 文章分类：【VueJS】
• 非特殊说明，本文版权归【胡同里的砖头】个人博客 所有，转载请注明出处.

• 上一篇：vue3 向弹窗el-dialog中的组件image-upload 传值