使用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实现，本利转换后的文本为：

<h2 class="ql-indent-1"><strong>文本编辑器</strong><a href="https://quilljs.com/" target="_blank"><strong>Quill</strong></a><strong>的介绍：</strong></h2><ol><li><span style="color: rgb(0, 102, 204);">Quill</span>是一个免费开源文本API编辑器工具，帮助开发人员解决编辑问题。</li><li><span style="color: rgb(0, 102, 204);">Quill</span>编辑器旨在通过自身的编辑模块提供强大的API来构建自定义式的编辑器。</li><li>最重要的是，<span style="color: rgb(0, 102, 204);">Quill</span>没有规定样式，你可以自定义自己的编辑器以符合自己的使用需求。</li><li><span style="color: rgb(0, 102, 204);">Quill</span>是一个轻量级的开源编辑器，拥有良好的可扩展构架和表现力出色的API接口，标准化的HTML规则。</li><li><span style="color: rgb(0, 102, 204);">Quill</span>支持的浏览器有<strong class="ql-font-monospace">Firefox</strong>、<strong class="ql-font-monospace">Safari</strong>和<strong class="ql-font-monospace">IE9+</strong>、<strong class="ql-font-monospace">Chorme</strong>等。</li></ol>

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

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

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

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

使用quill显示带格式的文本

猜你喜欢