如何使用工具栏选项在 Quill js 上添加字体类型? [英] How to add font types on Quill js with toolbar options?

查看：13
本文介绍了如何使用工具栏选项在 Quill js 上添加字体类型?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我用 Quill js 制作了一个富文本区域.我有工具栏的下一个选项:

new Quill('#quilljs-container', {模块:{工具栏: [['bold', 'italic', 'underline', 'strike'],//切换按钮['blockquote', 'code-block', 'link'],[{ 'header': 1 }, { 'header': 2 }],//自定义按钮值[{ 'list': 'ordered'}, { 'list': 'bullet' }],[{ 'script': 'sub'}, { 'script': 'super' }],//上标/下标[{ 'indent': '-1'}, { 'indent': '+1' }],//缩进/缩进[{ 'direction': 'rtl' }],//文本方向[{ 'color': [] }, { 'background': [] }],//带有主题默认值的下拉菜单[{'字体':[]}]，[{ '对齐': [] }]，['clean']//移除格式化按钮]},主题:雪"});

<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet"><!-- quill js 容器--><div id="quilljs-container">

<!-- 在项目中添加quill js--><script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>

目前，当我尝试添加更多类型编辑工具栏上的字体"选项(例如字体":['arial'])时，选择选项只显示Sans Serif"而不是显示Arial"选项.我所看到的是默认选项(Sans Serif"、Serif"、Monospace")以及我想添加的自定义选项.

另外，我已经尝试了 自定义属性在文档中，但使用我当前的配置，它只显示默认选项.也许我错过了什么.

我希望我清楚我的疑问并且有人可以帮助我.

更新:

为了更清楚一点，我试图在 Quill 容器配置

<块引用>

容器:在最简单的层面上，工具栏控件可以通过一个简单的格式名称数组来指定.

解决方案

这就是您所需要的.

流程是这样的，你需要4个组件:

  1. 带有 ql-font 类的 select 标记.这将包含新的字体选项.
  2. 将新字体添加到白名单.这必须在您调用 Javascript 中的 Quill 构造函数之前定义.
  3. 为下拉列表中的每个 label 定义 font-family.示例:font-family: "Inconsolata"
  4. 定义将在文本区域中使用的内容字体系列.按照第三个组件中的示例: .ql-font-inconsolata { font-family: "Inconsolata";}

更新:

我阅读文档是为了帮助您，他们提到

<块引用>

在最简单的层面上，工具栏控件可以通过一个简单的格式名称数组来指定...

或者，您可以通过将 DOM 元素 或 selector 传入 Quill 来手动在 HTML 中创建工具栏；这就是这个答案中提出的解决方案.另一方面，文档没有提到但在尝试了多种使用数组加载数据的方法后(没有任何成功)，我注意到这是不可能的.所以，这是我的贡献以及我发布此更新的原因.我为手动实现做了等价物(JS 和 HTML).

可以使用 HTML 和 JS 构造函数创建自定义工具栏.构造函数将接收 #toolbar-container 作为 modules 部分中的 toolbar.

然后，您可以仅使用 HTML 标签生成相同的结构.这个概念非常相似.例如:

  • 如果在 JS 中我们声明一个这样的数组:['bold', 'italic', 'underline', 'strike'] 在 HTML 将是:

<button class="ql-bold"></button><button class="ql-italic"></button><button class="ql-underline"></button><button class="ql-strike"></button></span>

  • 在 JS 中是 [{ 'header': 1 }, { 'header': 2 }] 在 HTML 中将是莉>

<button class="ql-header" value="1"></button><button class="ql-header" value="2"></button></span>

所以，这里有一个完整的示例代码片段:

//添加字体到白名单let Font = Quill.import('格式/字体');//我们不添加 Sans Serif 因为它是默认的Font.whitelist = ['inconsolata', 'roboto', 'mirza', 'arial'];Quill.register(字体，真)；//我们现在可以用这样的方式初始化 Quill:let quillObj = new Quill('#quilljs-container', {模块:{工具栏:'#toolbar-container'},placeholder: '这是一个字体测试...',主题:雪"});

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"><风格>/* 设置下拉字体系列 */#toolbar-container .ql-font span[data-label="Sans Serif"]::before {字体系列:无衬线"；}#toolbar-container .ql-font span[data-label="Inconsolata"]::before {字体系列:Inconsolata"；}#toolbar-container .ql-font span[data-label="Roboto"]::before {字体系列:机器人"；}#toolbar-container .ql-font span[data-label="Mirza"]::before {字体系列:米尔扎"；}#toolbar-container .ql-font span[data-label="Arial"]::before {字体系列:Arial"；}/* 设置内容字体系列 */.ql-font-inconsolata {字体系列:Inconsolata"；}.ql-font-roboto {字体系列:机器人"；}.ql-font-mirza {字体系列:米尔扎"；}.ql-font-arial {字体系列:Arial"；}/* 我们没有设置 Sans Serif 因为它是默认字体 */</风格><link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet"><div id="独立容器"><div id="工具栏-容器"><span class="ql-formats"><select class="ql-font"><选择的选项>无衬线</option><option value="inconsolata">Inconsolata</option><option value="roboto">Roboto</option><option value="mirza">Mirza</option><option value="arial">Arial</option></选择><select class="ql-size"></select></span><span class="ql-formats"><button class="ql-bold"></button><button class="ql-italic"></button><button class="ql-underline"></button><button class="ql-strike"></button></span><span class="ql-formats"><select class="ql-color"></select><select class="ql-background"></select></span><span class="ql-formats"><button class="ql-blockquote"></button><button class="ql-code-block"></button><button class="ql-link"></button></span><span class="ql-formats"><button class="ql-header" value="1"></button><button class="ql-header" value="2"></button></span><span class="ql-formats"><button class="ql-list" value="ordered"></button><button class="ql-list" value="bullet"></button><button class="ql-indent" value="-1"></button><button class="ql-indent" value="+1"></button></span><span class="ql-formats"><button class="ql-direction" value="rtl"></button><select class="ql-align"></select></span><span class="ql-formats"><button class="ql-script" value="sub"></button><button class="ql-script" value="super"></button></span><span class="ql-formats"><button class="ql-clean"></button></span>

<!-- quill js 容器--><div id="quilljs-container"></div><!-- 在项目中添加quill js--><script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>

I have made a rich text area made with Quill js. I have the next options for the tool bar:

new Quill('#quilljs-container', {
    modules: {
        toolbar: [
           ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
           ['blockquote', 'code-block', 'link'],

           [{ '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

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

           ['clean']                                         // remove formatting button
       ]
    },
    theme: 'snow'
});

<!-- Style -->
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">

<!-- quill js container -->
<div id="quilljs-container">  </div>

<!-- Add quill js on the project -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>

Currently, when I try to add more types editing the 'font' option on toolbar (e.g. 'font': ['arial']), the select options just display "Sans Serif" instead of display the "Arial" option. What I spect is see the default options ("Sans Serif", "Serif", "Monospace") plus custom options that I want to add.

Also, I have tried the customizing attributors shown on the documentation, but with my current configuration, it just display just the default options. Maybe I'm missing something.

I hope I was clear with my doubt and someone could help me.

UPDATE:

Just to be a little more clear, I am trying to add more fonts following the Quill Container configuration

Container: At the simplest level, toolbar controls can be specified by a simple array of format names.

解决方案

This is what you need.

The process is like this you need 4 components:

  1. A select tag with a ql-font class. This will contain the new font options.
  2. Add the new fonts to the whitelist. This has to be defined before you call the the Quill constructor in Javascript.
  3. Define the font-family for each label in the dropdown. Example: font-family: "Inconsolata"
  4. Define the content font-families that will be used in the text area. Following the example in the 3rd component: .ql-font-inconsolata { font-family: "Inconsolata";}

Update:

I read the documentation in order to help you and they mention that

At the simplest level, toolbar controls can be specified by a simple array of format names...

Alternatively, you can manually create a toolbar in HTML by passing the DOM element or selector into Quill; and that is the solution presented in this answer. On the other hand, the documentation does not mention but after trying many ways to load data using an array (without any success), I noticed that is not possible. So, here is my contribution and the reason why I posted this update. I made the equivalences (JS and HTML) for the manual implementation.

A custom toolbar can be created using HTML and a JS constructor. The constructor will receive the #toolbar-container as a toolbar in the modules section.

Then, you can generate the same structure using only HTML tags. The concept is very similar. For example:

  • If in JS we declare an array like this: ['bold', 'italic', 'underline', 'strike'] in HTML will be:

<span class="ql-formats">
    <button class="ql-bold"></button>
    <button class="ql-italic"></button>
    <button class="ql-underline"></button>
    <button class="ql-strike"></button>
</span>

  • In JS is [{ 'header': 1 }, { 'header': 2 }] in HTML will be

<span class="ql-formats">
   <button class="ql-header" value="1"></button>
   <button class="ql-header" value="2"></button>
</span>

So, here you have a complete example in this code snippet:

// Add fonts to whitelist
let Font = Quill.import('formats/font');
// We do not add Sans Serif since it is the default
Font.whitelist = ['inconsolata', 'roboto', 'mirza', 'arial'];
Quill.register(Font, true);


// We can now initialize Quill with something like this:
let quillObj = new Quill('#quilljs-container', {
  modules: {
    toolbar: '#toolbar-container'
  },
  placeholder: 'This is a font test...',
  theme: 'snow'
});

<!-- Style -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
  /* Set dropdown font-families */
  
  #toolbar-container .ql-font span[data-label="Sans Serif"]::before {
    font-family: "Sans Serif";
  }
  
  #toolbar-container .ql-font span[data-label="Inconsolata"]::before {
    font-family: "Inconsolata";
  }
  
  #toolbar-container .ql-font span[data-label="Roboto"]::before {
    font-family: "Roboto";
  }
  
  #toolbar-container .ql-font span[data-label="Mirza"]::before {
    font-family: "Mirza";
  }
  
  #toolbar-container .ql-font span[data-label="Arial"]::before {
    font-family: "Arial";
  }
  /* Set content font-families */
  
  .ql-font-inconsolata {
    font-family: "Inconsolata";
  }
  
  .ql-font-roboto {
    font-family: "Roboto";
  }
  
  .ql-font-mirza {
    font-family: "Mirza";
  }
  
  .ql-font-arial {
    font-family: "Arial";
  }
  /* We do not set Sans Serif since it is the default font */
</style>
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">


<div id="standalone-container">
  <div id="toolbar-container">
    <span class="ql-formats">
      <select class="ql-font">
        <option selected>Sans Serif</option>
        <option value="inconsolata">Inconsolata</option>
        <option value="roboto">Roboto</option>
        <option value="mirza">Mirza</option>
        <option value="arial">Arial</option>
      </select>
      <select class="ql-size"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-bold"></button>
      <button class="ql-italic"></button>
      <button class="ql-underline"></button>
      <button class="ql-strike"></button>
    </span>
    <span class="ql-formats">
      <select class="ql-color"></select>
      <select class="ql-background"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-blockquote"></button>
      <button class="ql-code-block"></button>
      <button class="ql-link"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-header" value="1"></button>
      <button class="ql-header" value="2"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-list" value="ordered"></button>
      <button class="ql-list" value="bullet"></button>
      <button class="ql-indent" value="-1"></button>
      <button class="ql-indent" value="+1"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-direction" value="rtl"></button>
      <select class="ql-align"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-script" value="sub"></button>
      <button class="ql-script" value="super"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-clean"></button>
    </span>
  </div>
</div>
<!-- quill js container -->
<div id="quilljs-container"></div>
<!-- Add quill js on the project -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>

这篇关于如何使用工具栏选项在 Quill js 上添加字体类型?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆