一、问题描述
在使用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);
以上,问题解决!