quill-editor中编辑设置编辑框高度导致样式错乱问题解决思路

刚学VUE,做了个BBS练手,就试了一下quill这个轻量级的编辑器,结果在设顶编辑器高度的时候出现了样式错乱的问题

 

quill-editor中编辑设置编辑框高度导致样式错乱问题解决思路_第1张图片

quill-editor中编辑设置编辑框高度导致样式错乱问题解决思路_第2张图片

从图中可以看到,这个按钮应该是在编辑器下方的,但是实际渲染出来确是在编辑框中,甚至被编辑框覆盖;

出现这个问题的原因是因为我在style里面设置的高度并非编辑框的高度,如果直接设置height是不行的,用开发者工具查一下结构就能知道。

quill-editor中编辑设置编辑框高度导致样式错乱问题解决思路_第3张图片

如上图所示,编辑框的高度应该是由ql-container决定的,而不是quil-editor,所以我只需要对这个ql-container类设定高度即可;

quill-editor中编辑设置编辑框高度导致样式错乱问题解决思路_第4张图片

重点!!!!

直接在style中写css会出现问题,建议新建一个css文件import引入!

你可能感兴趣的:(前端)