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

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

我用Quill js做了一个富文本区。我有工具栏的下一个选项:

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>

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

此外,我已经尝试了文档中显示的 customizing attributors,但根据我当前的配置,它只显示默认选项。也许我错过了什么。

我希望我的疑问很清楚,有人可以帮助我。

更新:

为了更清楚一点,我正在尝试在 Quill Container configuration

之后添加更多字体

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

这就是您所需要的。

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

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

更新:

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

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

或者,您可以通过传递 DOM 元素 选择器进入Quill;这就是这个答案中提出的解决方案。另一方面,文档没有提及,但在尝试了多种方法 使用数组 加载数据(没有任何成功)之后,我发现这是不可能的。所以,这是我的贡献,也是我发布此 更新 的原因。我为手动实现做了等价(JS 和 HTML)。

可以使用 HTMLJS 构造函数[=80= 创建 自定义工具栏 ].构造函数将接收 #toolbar-container 作为 modules 部分中的 toolbar

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

  • 如果在 JS 中声明一个这样的数组:['bold', 'italic', 'underline', 'strike']HTML 中将是:
<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>

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

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

可以使用JavaScript构造函数来创建自定义字体选择。

来自 Quill Quickstart page 这是基本的 HTML -

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

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

JavaScript 初始化程序中所需的代码大致如下:

let Font = Quill.import('formats/font');
Font.whitelist = ['times-new-roman', 'arial'];
Quill.register(Font, true);

let toolbarOptions = [
    [{ 'font': ['', 'times-new-roman', 'arial'] }],

    ['clean']                                         // remove formatting button
];

let quill = new Quill('#editor', {
    modules: {
        toolbar: toolbarOptions
      },
    theme: 'snow'
    });

您还需要将以下内容添加到您的样式表中,其中 CSS 选择器中的名称是上面 JavaScript:

中的那些名称
/* Set droplist names - -item is the currently selected font, -label is the font's appearance in the droplist*/
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='']::before
{
  content: 'Default';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='times-new-roman']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='times-new-roman']::before
{
  content: 'Times New Roman';
  font-family: 'Times New Roman';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='arial']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='arial']::before
{
  content: 'Arial';
  font-family: 'Arial';
}

/****************************************************
Set the font-family content used for the HTML content.
*****************************************************/
.ql-font-arial {
  font-family: 'Arial';
}

.ql-font-times-new-roman {
  font-family: 'Times New Roman';
}

FWIW,我已经复制了 Steve B 的代码并使其更通用。这样你就不需要复制粘贴 css 规则等...只需指定你想在字体数组中添加的字体。

// specify the fonts you would 
var fonts = ['Arial', 'Courier', 'Garamond', 'Tahoma', 'Times New Roman', 'Verdana'];
// generate code friendly names
function getFontName(font) {
    return font.toLowerCase().replace(/\s/g, "-");
}
var fontNames = fonts.map(font => getFontName(font));
// add fonts to style
var fontStyles = "";
fonts.forEach(function(font) {
    var fontName = getFontName(font);
    fontStyles += ".ql-snow .ql-picker.ql-font .ql-picker-label[data-value=" + fontName + "]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=" + fontName + "]::before {" +
        "content: '" + font + "';" +
        "font-family: '" + font + "', sans-serif;" +
        "}" +
        ".ql-font-" + fontName + "{" +
        " font-family: '" + font + "', sans-serif;" +
        "}";
});
var node = document.createElement('style');
node.innerHTML = fontStyles;
document.body.appendChild(node);

var toolbarOptions = [
    ['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': ['small', false, 'large', 'huge'] }],  // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

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

    ['clean']                                         // remove formatting button
];

// Add fonts to whitelist
var Font = Quill.import('formats/font');
Font.whitelist = fontNames;
Quill.register(Font, true);

var quill = new Quill('#editor', {
    modules: {
        toolbar: toolbarOptions
    },
    theme: 'snow'
});

接受的答案大部分都很好,但重要的是要注意,formats/font 实际上是错误的并且不适用于经过测试的 Quill 1.3.7.

对我来说有效的是:

let fonts = Quill.import("formats/font");

let fonts = Quill.import("attributors/style/font");
fonts.whitelist = ["initial", "sans-serif", "serif", "monospace"];
Quill.register(fonts, true);

必须对@Thomas 的回答进行一些更新,但下面的代码在 Quill v1.3.6 中可以很好地自动化。如果你有一个简短的字体列表,那么所需的 CSS 是微不足道的;但如果您有更大的 and/or 动态列表,您将希望按如下方式自动化:

// Specify Quill fonts
var fontList = ['Arial', 'Courier', 'Garamond', 'Tahoma', 'Times New Roman', 'Verdana'];
var fontNames = fontList.map(font => getFontName(font));
var fonts = Quill.import('attributors/class/font');
fonts.whitelist = fontNames;
Quill.register(fonts, true);

// Add fonts to CSS style
var fontStyles = "";
fontList.forEach(function(font) {
    var fontName = getFontName(font);
    fontStyles += ".ql-snow .ql-picker.ql-font .ql-picker-label[data-value=" + fontName + "]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=" + fontName + "]::before {" +
        "content: '" + font + "';" +
        "font-family: '" + font + "', sans-serif;" +
        "}" +
        ".ql-font-" + fontName + "{" +
        " font-family: '" + font + "', sans-serif;" +
        "}";
});

// Configure Quill editor options
var toolbarOptions = [
    [{ 'font': fonts.whitelist }],
    ['bold', 'italic', 'underline'],
    ['clean'] 
];

var quill;
$(function() {
    // Append the CSS stylesheet to the page
    var node = document.createElement('style');
    node.innerHTML = fontStyles;
    document.body.appendChild(node);

    quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
        toolbar: toolbarOptions
    } 
    });
});

// Generate code-friendly font names
function getFontName(font) {
    return font.toLowerCase().replace(/\s/g, "-");
}

与 Quill 文档相关的 link 是 https://quilljs.com/guides/how-to-customize-quill/#customizing-attributors,尽管此处提供的示例相当不完整。

多亏了这个答案 才能得到这段代码。我找到了更好的答案,只需使用下面的代码

更新您的 js 和 css

// add an array of values
const fontFamilyArr = ["Roboto Condensed", "Times New Roman", "Calibri", "Calibri Light", "Sans-Serif"];
let fonts = Quill.import("attributors/style/font");
fonts.whitelist = fontFamilyArr;
Quill.register(fonts, true);

const fontSizeArr = ['10px', '11px', '12px', '14px', '18px', '24px'];
var Size = Quill.import('attributors/style/size');
Size.whitelist = fontSizeArr;
Quill.register(Size, true);

var toolbarOptions = [
  [{
    'size': fontSizeArr
  }],
  [{
    'font': fontFamilyArr
  }]
];

var quill = new Quill('#mail-body-editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow',
  placeholder: 'Please provide the content of your mail here'
});
/*Adding the values from the array which has the values as data-values*/


/*for font-size*/

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value]::before {
  content: attr(data-value) !important;
}


/*for font-family*/

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value]::before {
  content: attr(data-value) !important;
}

.ql-snow .ql-picker.ql-font {
  width: 150px !important;
  white-space: nowrap;
}
<!DOCTYPE html>
<html lang="en">

<body>
  <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
  <link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
  <script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
  <div id="mail-body-editor"></div>

</body>

</html>