富文本内容展示问题

原文地址

富文本行内元素显示 | GitHub

前言

日常需求中，需要把富文本的内容展示出来。

正常情况下，直接把富文本的内容 html 赋值给 element.innerHTML 就可以，

但是有些情况下会被项目原有的style 覆盖，或者 行内元素 无法正常显示

行内元素被覆盖

行内元素:

加粗 strong
倾斜 em
下划线 u
等等...

伪代码：

const editorEle = document.getElementById('editorEle');
const contentEle = document.getElementById('contentEle');

contentEle.innerHTML = editorEle.value.html

dom 显示：

html

<div id="contentEle">
  <p>正常文本</p>
  <p><strong>加粗文本</strong></p>
  <p><em>倾斜文本</em></p>
  <p><u>下划线文本</u></p>
  <p><span style="background-color: rgb(255, 194, 102);">背景色文本</span></p>
</div>

页面显示：

左边是编辑器，右边是实时展示

07-1

可以看出了行内元素没有正常显示，一般项目里面都会有 resetStyle 文件，会覆盖这些样式

如果一个个修改会比较麻烦，可以想一个方法去隔离css

这里我们使用 shadow dom 来隔离

使用 shadow dom 来隔离

创建 shadow dom：

// 富文本编辑器
const editorEle = document.getElementById('editorEle');
const { html } = editorEle.value

// 影子宿主（shadow host）
const shadowHost = document.getElementById('contentEle');

// 创建影子根（shadow root）
const shadowRoot = shadowHost.attachShadow({ mode: 'open' });

// 影子根赋值
shadowRoot.innerHTML = html

看下结果：

左边是编辑器，右边是实时展示

07-2

富文本内容展示问题 ​

前言 ​

行内元素被覆盖 ​

使用 shadow dom 来隔离 ​

富文本内容展示问题

前言

行内元素被覆盖

使用 shadow dom 来隔离