CODEWITHSUNDEEP
reactjsnext.jstailwind-cssreact-quill
Sail0r
Sail0r

Reputation: 11

Increase display font size in react quill

I want to increase the inner text size of react quill text box, not the output text size but text editor's font size Image of form in the image, you can see the different font sizes. It looks odd This is code

"use client"

import React from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const TextEditor = ({ value, onChange  }) => {
  const toolbarOptions = [
    ['bold', 'italic', 'underline'],     
    ['blockquote', 'code-block'],            
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    [{ 'header': [ 2, 3, false] }],
    [{ 'script': 'sub' }, { 'script': 'super' }],     
    [{ 'align': [] }],

    ['clean']                                        
  ];

  return (
    <ReactQuill
    style={{ fontSize: '20px' }}
       theme="snow"
      value={value}
      onChange={onChange}
      modules={{
        toolbar: toolbarOptions
      }}
      className="border-0 px-3 py-2 placeholder-gray-400 text-black bg-white rounded shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
    />
  );
};

export default TextEditor;

here I tried text-base text-lg but nothing changed

Upvotes: -1

Views: 642

Answers (2)

Ahmed Korany
Ahmed Korany

Reputation: 51

you can display the size of the font by pixel

add this line to the toolbar

    //[{ header: [1, 2, 3, 4, 5, 6, false] }],
<ReactQuill
        theme="snow"
        value={""}
        modules={{
          toolbar: [[{ header: [1, 2, 3, 4, 5, 6, false] }]],
        }}
      />

it will display like this:

list of size fonts

if you want to display pixel size instead of 'Heading'

list of size fonts by pixel

add this CSS code to global CSS

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: '32px' !important;
 }

 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: '24px' !important;
 }

 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: '18px' !important;
 }

 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: '14px' !important;
 }

 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: '10px' !important;
 }

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: '8px' !important;
 }

Upvotes: 0

Nandini_23
Nandini_23

Reputation: 11

Add this line in your toolbarOptions [{ size: ["small", false, "large", "huge"] }]

Upvotes: 1

Related Questions