如何更改“羽毛笔”中的下拉文本?

时间:2019-04-08 14:56:36

标签: quill ngx-quill

enter image description here我可以更改文本的值,但无法在ngx-羽毛笔下拉菜单中更改文本

我尝试了ts方式和创建新容器的两种方式,均不能解决我的问题。通过了文档,但仍然找不到适合该问题的解决方案。由于文档未定义如何更改标签

html
   <div id="toolBarConfig"></div>
ts
   const sizeVal = Quill.import('attributors/style/size');
    sizeVal.whitelist = ['14px', '16px', '72px'];
    Quill.register(sizeVal, true);
    const quill = new Quill('#toolBarConfig', {
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                ['blockquote', 'code-block'],

                [{ header: 1 }, { header: 2 }],               // custom button values
                [{ list: 'ordered' }, { list: 'bullet' }],
                [{ script: 'sub' }, { script: 'super' }],      // superscript/subscript
                [{ indent: '-1' }, { indent: '+1' }],          // outdent/indent
                [{ direction: 'rtl' }],                         // text direction

                [{ size:  ['14px', '16px', '72px']  }],  // custom dropdown
                [{ header: [1, 2, 3, 4, 5, 6, false] }],

                [{ color: [] }, { background: [] }],          // dropdown with defaults from theme
                [{ font: [] }],
                [{ align: [] }],

                ['clean'],
                ['table'],      // remove formatting button

                ['link', 'image', 'video'],                         // 
  link and image, video
            ],
        },
        theme: 'snow',
    });

     SCSS
    .ql-snow .ql-picker.ql-size span[data-label="14px"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data- 
     value="14px"]::before {
     content: '14px'!important;
     font-size: 14px !important;
   }
    .ql-snow .ql-picker.ql-size span[data-label="16px"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data- 
     value="16px"]::before {
       content: '16px'!important;
      font-size: 16px !important;
     }
    .ql-snow .ql-picker.ql-size span[data-label="72px"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data- 
    value="72px"]::before {
      content: '72px'!important;
      font-size: 72px !important;
      }

1 个答案:

答案 0 :(得分:0)

How to add font types on Quill js with toolbar options?

遵循此stackoverflow线程..最终结果enter image description here