时间戳

首页 > 解决方案 > 在 Quill 编辑器 Angular 2+ 中添加字体

javascript - 在 Quill 编辑器 Angular 2+ 中添加字体

问题描述

我在 Angular 中使用羽毛笔编辑器我无法在 Angular 2+ 中添加多种字体我正在使用以下代码片段

QuillModule.forRoot({
      modules: {
        toolbar: [
          ['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': ['small', false, 'large', 'huge'] }],  // custom dropdown
          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

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

          ['clean'],                                         // remove formatting button

          ['link', 'image']                         // link and image, video
        ]
      },

    })

每当我在字体列表中添加字体时，我总是得到相同的字体。我也关注了这个链接，但它不是角度的，我想 如何使用工具栏选项在 Quill js 上添加字体类型？

谁能帮我？

标签： javascriptangularquillngx-quill

解决方案

带有ql-font类的选择标签。这将包含新的字体选项。将新字体添加到白名单。这必须在您调用 Javascript 中的 Quill 构造函数之前定义。为下拉列表中的每个标签定义字体系列。例子：

font-family: "Inconsolata"

定义将在文本区域中使用的内容字体系列。按照第三个组件中的示例：.ql-font-inconsolata{ font-family: "Inconsolata";}

推荐阅读