0
523
Views¿Cómo usar el selector de tamaño de fuente predeterminado con la barra de herramientas Quill personalizada?
El editor Quill normal/predeterminado utiliza este tipo de editor de tamaño:
Estoy creando una barra de herramientas personalizada con las herramientas proporcionadas por Quill. Eso se ve así:
const toolbarOptions = [ [ { font: ['Lato,sans-serif'] }, ], ['size'], ['bold', 'italic', 'underline'], ['link'], ['clean'], ]; ['size'] es una sintaxis no válida, ya que no se muestra nada en la barra de herramientas si usa eso:
Si modifico la matriz de 'tamaño' para que sea [{ size: ['10px', '12px' ... }] , etc., el menú desplegable termina luciendo así:
¿Cómo puedo usar el tamaño predeterminado que viene con el editor en una configuración personalizada de opciones?
1 answers
Answer question0
Puede anular el CSS del editor para cambiar el contenido de las etiquetas y los tamaños de fuente. El estilo personalizado tendrá prioridad cuando se agregue después de la hoja de estilo. Dejé los valores predeterminados comentados en el fragmento a continuación.
const toolbarOptions = [ [ { font: ['Lato,sans-serif'] }, ], [{ 'size': ['small', false, 'large', 'huge'] }], ['bold', 'italic', 'underline'], ['link'], ['clean'], ]; const quill = new Quill('#editor', { theme: 'snow', modules: { toolbar: toolbarOptions } }); <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> <style> .ql-container { box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; /* font-size: 13px; */ font-size: 12px; height: 100%; margin: 0px; position: relative; } .ql-editor .ql-size-small { /* font-size: 0.75em; */ font-size: 10px; } .ql-editor .ql-size-large { /* font-size: 1.5em; */ font-size: 14px; } .ql-editor .ql-size-huge { /* font-size: 2.5em; */ font-size: 16px; } .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { /* content: 'Normal'; */ content: '12px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before { /* content: 'Small'; */ content: '10px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before { /* content: 'Large'; */ content: '14px'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before { /* content: 'Huge'; */ content: '16px'; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before { font-size: 10px; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before { /* font-size: 18px; */ font-size: 14px; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before { /* font-size: 32px; */ font-size: 16px; } </style> <div id="editor"> <p>Hello World!</p> <p>Some initial <strong>bold</strong> text</p> <p><br></p> </div> <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>