如何更改 Quill 中的下拉文本?

CoderBackEndDev

在此处输入图片说明我可以更改文本的值,但无法更改 ngx-quill 下拉菜单中的文本

我尝试了 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;
      }
CoderBackEndDev

如何使用工具栏选项在 Quill js 上添加字体类型?

按照这个stackoverflow线程..最终结果在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Quill JS中添加图像?

如何在 Quill Editor-React 中更改图像大小?

Quill 编辑器未在 Angular 中触发(更改)事件

如何使用Quill格式化文本并嵌入视频?

如何在Angular中的Quill文本编辑器的内容div中添加html标签?

如何在基于Quill的编辑器中粘贴纯文本

如何在 Quill 的不可编辑块中添加可编辑的文本块?

如何在Quill.js中创建自己的格式按钮?

动态更改Quill占位符

如何使用ngx-quill在angular 7的quill.js工具栏中添加图像按钮?

如何更改下拉列表中按钮的文本

如何在编辑器外部将Quill文本格式化为HTML?

如何在 Vue.js 中使用 Quill 文本编辑器作为组件

如何使用选定的li列表项的文本更改下拉菜单中按钮的文本-jQuery

如何使用文本更改更改组合框中的下拉项?

如何在Quill JS(反应羽毛笔)中创建撤消/重做按钮?

如何在quill.js编辑器中添加内联注释?

如何在Angular项目的Quill编辑器中更新标题的字体大小值

如何在 quill 编辑器中添加 alt 和 title 属性以及图像

在多个下拉选择中更改锚标记中的多个文本

Quill:如何获取已删除的内容?

如何从下拉列表绑定的文本框中获取模型值而不更改下拉列表的模型值

React-Quill:如何在键入时动态替换文本,而不会失去焦点并使光标保持在正确的位置

如何使用Next.js实现富文本编辑器,例如Quill或Draft.js?

Shadow DOM 中的 Quill 编辑器

在Quill Rich Editor中包含标题

指令QuillEditorBase中的Ngx-Quill错误

在Quill.JS中识别换行

如何在Materializecss选择下拉菜单中更改文本颜色?