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

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

问题描述

我使用 Quill js 制作了一个富文本区域.我为工具栏提供了下一个选项:

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>

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

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.

更新:

为了更清楚一点，我尝试在

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.

推荐答案

这就是您所需要的.

此过程就是这样，您需要 4个组件:

The process is like this you need 4 components:

  1. 具有ql-font类的select标记.这将包含新的字体选项.
  2. 将新字体添加到白名单.必须在调用Javascript中的Quill构造函数之前对此进行定义.
  3. 为下拉菜单中的每个label定义font-family.示例:font-family: "Inconsolata"
  4. 定义将在文本区域中使用的内容字体系列.遵循第三个组件中的示例:.ql-font-inconsolata { font-family: "Inconsolata";}
  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";}

更新:

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

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...

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

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.

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

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.

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

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

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

  • 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>

<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>

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

<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-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
var 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:
var 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天全站免登陆