ArticleZip > How To Add Custom Font Sizes To Quilljs Editor

How To Add Custom Font Sizes To Quilljs Editor

When working on a web project, having control over the appearance of text is crucial for creating a unique and user-friendly experience. One way to customize the text styling in your web editor is by adding custom font sizes to the Quilljs editor. Quilljs is a powerful WYSIWYG text editor that offers a straightforward and flexible interface for text input. In this article, we'll guide you through the process of adding custom font sizes to the Quilljs editor to enhance the design and readability of your content.

To get started, you'll need to have the Quilljs library integrated into your project. If you haven't done this yet, you can easily add Quilljs by including the necessary CSS and JS files in your HTML document. Once you have Quilljs set up, you can proceed with adding custom font sizes to your editor.

The first step is to define the font sizes you want to include in your editor. You can specify the font sizes in a CSS style block in your HTML file or in an external CSS file. For example, you can define different font sizes like this:

Css

.ql-size-small {
  font-size: 14px;
}

.ql-size-medium {
  font-size: 16px;
}

.ql-size-large {
  font-size: 18px;
}

In the CSS above, we've created classes for small, medium, and large font sizes, each with a corresponding font size value. You can adjust these values based on your design preferences.

Next, you'll need to configure the Quilljs editor to recognize and apply these custom font sizes. Quilljs provides a way to extend its functionality through custom formats. You can register the custom font sizes with the Quilljs editor by adding the following code:

Javascript

var Size = Quill.import('attributors/style/size');
Size.whitelist = ['14px', '16px', '18px'];
Quill.register(Size, true);

In the JavaScript snippet above, we're importing the size attributor from Quill, specifying the whitelist of allowed font sizes, and then registering the custom sizes with the Quilljs editor.

After registering the custom font sizes, you can apply them to your text content in the editor. You can do this by adding a dropdown menu or buttons to your UI that allow users to select the desired font size. When a user selects a font size from the dropdown or clicks a button, you can set the font size for the selected text by using Quill's API methods.

By following these steps, you can easily add custom font sizes to the Quilljs editor and give your users more control over the appearance of their text content. Experiment with different font size options and incorporate them into your web projects to create visually appealing and engaging content. With Quilljs and custom font sizes, you can elevate the design of your text editor and provide a better writing experience for your users.

Related posts:

×