我正在尝试在 Quill js 上添加字体大小，但所有名称似乎都“正常”

问题描述 投票：0回答：1

我在 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 html quill
1个回答
0
投票

此样式将帮助您获取字体大小的名称。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <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>
  <style>
    .ql-snow {
      .ql-picker {
        &.ql-size {

          .ql-picker-label,
          .ql-picker-item {
            &::before {
              content: attr(data-value) !important;
            }
          }
        }
      }
    }
  </style>
</head>

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

</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.