QuillFiddle

by davidmold

HTML

<!DOCTYPE html>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet" type="text/css">
<div id="editor" class="mpicker">
   <span class="ql-size-extra-large">
     This whole sentence should be sized extra large, but the formatting is removed. And when
     you set it to be extra large, it does not show in the menu.
  </span>
 </div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>

CSS

.ql-toolbar.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
  content: 'Small';
}
.ql-toolbar.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
  font-size: 15px;
  content: 'Changed Large';
}
.ql-toolbar.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='extra-large']::before {
  font-size: 16px;
  content: 'Extra Large';
}
.ql-toolbar.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='xx-large']::before {
  font-size: 17px;
  content: 'XX Large';
}
.ql-toolbar.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
  font-size: 18px;
  content: 'Changed Huge';
}

.ql-size-small {
  font-size: 0.85em;
}

.ql-size-large {
  font-size: 1.14em;
}

.ql-size-extra-large {
  font-size: 1.35em;
}

.ql-size-xx-large {
  font-size: 1.5em;
}

.ql-size-huge {
  font-size: 1.8em;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before {
  content: 'Large Changed'
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="extra-large"]::before {
  content: 'Extra Large'
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="xx-large"]::before {
  content: 'XX Large'
}

JavaScript

function setupQuill(element) {
  	const SzAttr = Quill.import('formats/size');
    SzAttr.whitelist = ['small', 'normal', 'large', 'extra-large', 'xx-large', 'huge'];
    Quill.register(SzAttr, true);
    
    const toolbarObj = [
        [{ 'size': ['small', false, 'large', 'extra-large', 'xx-large','huge'] }],
      ]
    const quill = new Quill(element, {
      modules: { toolbar: toolbarObj },
      theme: 'snow'
    });
    return quill;
  }

  setupQuill('#editor');