vue-quill-editor富文本选项对齐混乱
vue-quill-editor富文本选项对齐混乱问题:今天使用ElementUI与vue-quill-editor的时候发现,富文本编辑框选项对齐出现了点问题。原因:查询结构发现,是与ElementUI的样式出现问题。vue-quill-editor中,没有设置自身的行高,而是通过继承来设置的line-height,而且其中选项并没有BFC限制,导致行高混乱了。解决方法:为vue...
·
vue-quill-editor富文本选项对齐混乱
问题:
今天使用ElementUI与vue-quill-editor的时候发现,富文本编辑框选项对齐出现了点问题。
原因:
查询结构发现,是与ElementUI的样式出现问题。
vue-quill-editor中,没有设置自身的行高,而是通过继承来设置的line-height,而且其中选项并没有BFC限制,导致行高混乱了。
解决方法:
为vue-quill-editor组件设置更高优先权的行高样式,覆盖elementUI的行高样式就OK了。
代码:
<quill-editor
class="quill-editor"
v-model="content"
:options="editorOption">
</quill-editor>
.quill-editor {
line-height: normal;
}
发现
quill-editor中默认样式quill-editor没有行高,但是在ql-editor中有定义默认行高。我们直接添加样式就可以解决。
<quill-editor
class="ql-editor"
v-model="content"
:options="editorOption">
</quill-editor>
记录自己的遇到的小坑,同时希望能对后来者也有帮助!
加油,奥利给~~~
更多推荐
已为社区贡献5条内容
所有评论(0)