基于Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题

样式错乱效果
假设你已经知道如何引入vue-quill-editor,并且遇到了跟我一样的问题(如上图),显示出来的图标排列不整齐,字体,文字大小选择时超出边框。你可以试试下面这种解决办法 。

  1. 在使用文本编辑器的vue页面中引入vue-quill-editor中的样式。
    @import "../../node_modules/quill/dist/quill.snow.css";
    
  2. 然后在组件中添加class名 —— class=“ql-editor”。
    <quill-editor class="ql-editor"></quill-editor>
    
    你就会看到错乱的图标样式已经改变,如下图:
    样式排列已经整齐
  3. 如果在包裹组件的标签上添加class名 —— class=“ql-container ql-snow”。
    <el-form-item class="ql-container ql-snow">
        <quill-editor class="ql-editor"></quill-editor>
    </el-form-item>
    
    你将会看到下图的效果,文本编辑器外面多了一层容器。
    文本编辑器多了一层外框
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值