vue-quill-editor富文本组件对齐不生效问题处理

一、问题描述

在使用vue-quill-editor富文本组件时，对编辑内容选择了对齐方式，例如标题居中对齐。

图一

如图一所示，编辑框内是已经居中对齐，正确显示了。但是在其他地方却无法正常显示，如图二

图二

后面检查代码发现，vue-quill-editor编辑时默认使用的是类名进行样式控制的，也就是在需要对齐的地方使用了class="ql-align-center"，如图

<p class="ql-align-center"><strong style="font-size: 20px;">对齐测试行不行</strong></p>

所以导致了在其他地方没有正常显示对齐的效果。

二、问题解决

要处理这个问题，只需要在代码里加入这一段就可以了，左对齐是默认对齐样式，所以不需要添加代码。其他问题同理，例如字体大小，字体类型等

// 设置居中样式
const Align = Quill.import('attributors/style/align'); // 引入这个后会把对齐类型样式写在style上
Align.whitelist = ['right', 'center', 'justify'];
Quill.register(Align, true);

以上，问题解决！