前端如何渲染后端传过来的富文本

前端渲染后端传过来的富文本可以使用类似于上面提到的方法。

1. 使用 HTML 标记

如果后端传递的是 HTML 格式的富文本，可以直接将其插入到页面中，例如使用 `innerHTML` 属性：

const richText = '<p>这是一段带有 <b>加粗</b> 和 <i>斜体</i> 标记的富文本。</p><img src="https://example.com/image.jpg" alt="图片描述">';
document.getElementById('rich-text-container').innerHTML = richText;

2. 使用富文本编辑器

如果后端传递的是 JSON 格式的富文本，可以使用富文本编辑器来渲染。例如，可以使用 Quill 编辑器：

const quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, 3, false] }],
      ['bold', 'italic', 'underline'],
      ['image']
    ]
  },
  readOnly: true
});

// 将后端传递的 JSON 富文本插入到编辑器中
const richText = {ops: [...]}; // 后端传递的 JSON 富文本
quill.setContents(richText);

这里使用了 Quill 编辑器，并将其设置为只读模式，这样用户就无法编辑富文本了。然后将后端传递的 JSON 富文本插入到编辑器中，编辑器会自动渲染出对应的富文本内容。