主页 / user-21309147

Onur's questions

Martin Hope
Onur
Asked: 2024-10-08 18:27:48 +0800 CST
  • 5

我在 javascript 中使用quill文本编辑器。我想添加自定义字体大小，我这样做了，但所有字体大小的名称看起来都是“正常”的。

这是我的活动代码部分：

这部分是运行 Quill 的 HTML 代码

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<div id="editor-container">
    <p></p>
</div>

这部分是我的配置

<script>
    const fontSizeArr = ['8px', '9px', '10px', '12px', '14px', '16px', '20px', '24px', '32px'];

    var Size = Quill.import('attributors/style/size');
    Size.whitelist = fontSizeArr;
    Quill.register(Size, true);


    var toolbarOptions = [
        [{ 'font': [] },],
        [{ 'size': fontSizeArr }],
        ['bold', 'italic', 'underline', 'strike']
    ];


    var quill = new Quill('#editor-container', {
        modules: {
            toolbar: toolbarOptions,
        },
        theme: 'snow'
    });
</script>

这次我尝试了不同的用法，可以看到字体大小的名称，但字体大小没有改变

代码2：

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<div id="editor-container">
    <p></p>
</div>
<script>
const fontSizeArr = [
    { value: '8px', name: '8px' },
    { value: '9px', name: '9px' },
    { value: '10px', name: '10px' },
    { value: '12px', name: '12px' },
    { value: '14px', name: '14px' },
    { value: '16px', name: '16px' },
    { value: '20px', name: '20px' },
    { value: '24px', name: '24px' },
    { value: '32px', name: '32px' }
];

var Size = Quill.import('attributors/style/size');
Size.whitelist = fontSizeArr;
Quill.register(Size, true);

 var toolbarOptions = [
    [{ 'font': [] },],
    [{ 'size': fontSizeArr.map(size => size.value)}],
    ['bold', 'italic', 'underline', 'strike']
];



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


function updateToolbarSizeNames() {
    const sizeSelect = document.querySelector('.ql-size');
    sizeSelect.innerHTML = ''; 

    fontSizeArr.forEach(size => {
        const option = document.createElement('option');
        option.value = size.value; 
        option.innerText = size.name; 
        sizeSelect.appendChild(option);
    });
}

updateToolbarSizeNames();
</script>
javascript