使用quill显示带格式的文本

在富文本编辑器Quill的简单React封装中介绍过quill在react项目中的基本使用，主要方向是文本编辑，即提供一个允许用户书写并设置各种格式或嵌入图片、视频等的文本框。如果现在我们要显示一段文字，并且希望带有各种不同格式（文本编辑器编辑过的），也是可以使用quill实现的。

比如有一段文字：

Quill是一个免费开源文本API编辑器工具，帮助开发人员解决编辑问题。Quill编辑器旨在通过自身的编辑模块提供强大的API来构建自定义式的编辑器。最重要的是，Quill没有规定样式，你可以自定义自己的编辑器以符合自己的使用需求。Quill是一个轻量级的开源编辑器，拥有良好的可扩展构架和表现力出色的API接口，标准化的HTML规则。Quill支持的浏览器有Firefox、Safari和IE9+、Chorme等。

我们希望显示效果为：

 

该如何操作：

Quill对于输入文本的处理方式本质是将文本转换为HTML代码，对于设置的格式是使用不同的HTML标签+css类来实现的，所以问题转化为依据格式需求将文本解析为前端代码，并由quill进行显示。文本到前端代码的转换过程可由js实现，本例转换后的文本为：

文本编辑器Quill的介绍：
Quill是一个免费开源文本API编辑器工具，帮助开发人员解决编辑问题。
Quill编辑器旨在通过自身的编辑模块提供强大的API来构建自定义式的编辑器。
最重要的是，Quill没有规定样式，你可以自定义自己的编辑器以符合自己的使用需求。
Quill是一个轻量级的开源编辑器，拥有良好的可扩展构架和表现力出色的API接口，标准化的HTML规则。
Quill支持的浏览器有Firefox、Safari和IE9+、Chorme等。

需要注意的是：quill有一套代码的规则及定义好的类名，我们应该使用quill使用HTML标签的规则和类名的定义来转换自己的文本，只需要在quill中输入用例文本并设置需要的格式，便有结果代码可参考。

至于界面可使用以下配置进行处理：

 

const options = {
  modules: {
    toolbar: false
  },
  theme: 'snow',
  readOnly:true,
 };

这样就实现了我们的需求。