vue Quill富文本工具栏自定义行高

 import Quill from 'quill' let Parchment = Quill.import('parchment');
   // 设置行高为style 设置为class回显富文本时会失效   // class lineHeightAttributor
   extends Parchment.Attributor.Attribute {}  // Attribute // class
   lineHeightAttributor extends Parchment.Attributor.Class {}  // Class
   class lineHeightAttributor extends Parchment.Attributor.Style {}   //   tyle
   
   
   
   let lineHeight = new lineHeightAttributor('lineHeight',
   'line-height', {
       scope: Parchment.Scope.INLINE,
       whitelist: ['1', '1.1','1.2','1.3','1.4','1.5','1.6','1.7','1.8','1.9','2','2.1','2.2','2.3','2.4','2.5','2.6','2.7','2.8','2.9','3']
   }); Quill.register({ "formats/lineHeight": lineHeight }, true);
   
   export default lineHeight;

// html 要配置class

// <select class="ql-lineHeight">
//     <option
//         v-for="(item, index) in lineHeight"
//     :key="index"
//     :value="item"
//     :selected="index === 0"
// >{{ item }}</option
// >
// </select>


// scss也要追加值进去不然不能回显内容
// 如:
// .ql-picker.ql-lineHeight .ql-picker-label[data-value='1']::before,
// .ql-picker.ql-lineHeight .ql-picker-item[data-value='1']::before {
//     content: "1.0";
// }

// vue中在这里加载
// import lineHeight from './lineHeight';

// mounted() {
//     Quill.register("formats/lineHeight", lineHeight, true);
// }
希望能帮到你!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值