如何删除或更改 Quill js 中的默认字体？答案

【问题标题】：How to remove or change the default font in Quill js?如何删除或更改 Quill js 中的默认字体？
【发布时间】：2021-07-11 21:39:17
【问题描述】：

无论我如何尝试从 Quill js 中的字体选择中删除默认的“无衬线”字体，它都会一直出现。

即使我将它从中删除，它仍然会出现

正如您在图片中看到的那样，即使不在选择中也存在字体，类似于：

     <select class="ql-font">
        <option selected>SourceSansPro</option>
        <option value="inconsolata">Inconsolata</option>
        <option value="roboto">Roboto</option>
        <option value="mirza">Mirza</option>
        <option value="arial">Arial</option>
      </select>

那么我该如何摆脱它呢？

注意：我使用了这个问题：How to add font types on Quill js with toolbar options? 作为指导。

【问题讨论】：

标签： javascript quill

【解决方案1】：

从您提供的 SO 链接中，我合并了动态注册字体的答案，它可以完全覆盖默认字体列表。

你可以试试下面的代码sn-p：

<!DOCTYPE html>

<html>

<head>
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro%7CRoboto%7CInconsolata%7CMirza"
        rel="stylesheet">

    <style>
        #editor-container {
            width: 100%;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }

        /* to avoid overflow for long font name */
        .ql-formats:nth-child(1) {
            width: 130px;
        }

        /* expand to ql-format width */
        .ql-snow .ql-picker.ql-font {
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="toolbar-container" class="ql-toolbar ql-snow">
        <span class="ql-formats">
            <select class="ql-font">
                <option value="source-sans-pro" selected></option>
                <option value="inconsolata"></option>
                <option value="roboto"></option>
                <option value="mirza"></option>
                <option value="arial"></option>
            </select>
        </span>
        <span class="ql-formats">
            <select class="ql-header">
                <option value="1"></option>
                <option value="2"></option>
                <option value="3"></option>
                <option selected="selected"></option>
            </select>
        </span>
        <span class="ql-formats">
            <button type="button" class="ql-bold"></button>
        </span>
        <span class="ql-formats">
            <button type="button" class="ql-list" value="ordered"></button>
            <button type="button" class="ql-list" value="bullet"></button>
        </span>
        <span class="ql-formats">
            <button type="button" class="ql-clean"></button>
        </span>
    </div>

    <div id="editor-container">
        <div id="editor">
            <p>
                He has since been seeking advice from specialists, including Serbian doctor Zdenko Milinkovic, who said
                Djokovic is suffering
                from a "bruised bone due to excessive playing".
            </p>
        </div>
    </div>

    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script>
        const getFontName = (font) => font.toLowerCase().replace(/\s/g, "-");
        const fontNameList = ['Source Sans Pro', 'Inconsolata', 'Roboto', 'Mirza', 'Arial'];
        const fontNameLowercaseList = fontNameList.map(font => getFontName(font));

        // register fonts in quill
        const fonts = Quill.import("formats/font");
        fonts.whitelist = fontNameLowercaseList
        Quill.register(fonts, true);

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

        // Add extra font CSS to the DOM dynamically
        const node = document.createElement('style');
        node.innerHTML = fontNameList.reduce((fontStyle, fontName) => {
            const fontNameLowercase = getFontName(fontName);
            fontStyle += `
                .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=${fontNameLowercase}]::before,
                .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=${fontNameLowercase}]::before {
                    content: '${fontName}';
                    font-family: '${fontName}';
                }

                .ql-font-${fontNameLowercase} {
                    font-family: '${fontName}';
                }
            `
            return fontStyle
        }, '')
        document.body.appendChild(node);
    </script>
</body>

</html>

【讨论】：

sn-p 的问题是，如果您选择一个单词并将其更改为 Roboto，然后选择另一个单词（未更改字体，因此大概是 Source Sans Pro），它不会更改为该字体（Source Sans Pro）但保持为 Roboto。
好的。明白你的意思。更新了 sn-p 以手动构建工具栏以将 source-sans-pro 选择为默认字体，因此字体的更改将像 quilljs 示例一样。