Як забезпечити користувачам можливість вибору власного розміру шрифту у редакторі Froala Editor з використанням React JS

3 Березня 2024 в 20:19 25

Проблема полягає у тому, що стандартний інструмент вибору розміру шрифту у панелі інструментів Froala Editor представлений у вигляді розкривного списку, що обмежує користувача вибирати лише з заданих значень. Однак іноді може виникнути потреба у виборі точного розміру шрифту, який не входить до списку. Давайте розглянемо, як вирішити цю проблему та додати власне поле введення для вказання розміру шрифту вручну у React JS.

import React, { Component } from 'react';
import FroalaEditorComponent from "react-froala-wysiwyg";
class CustomFroalaEditor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fontSize: 12 // початкове значення розміру шрифту
    };
    this.handleFontSizeChange = this.handleFontSizeChange.bind(this);
  }
  handleFontSizeChange(e) {
    const newSize = e.target.value;
    this.setState({ fontSize: newSize });
  }
  render() {
    const { fontSize } = this.state;
    const froalaConfig = {
      toolbarButtons: {
        moreText: {
          buttons: ['fontSize'],
          buttonsVisible: 1
        }
      },
      fontSizeSelection: true
    };
    return (
      <div>
        <input 
          type="number" 
          min="8" 
          max="72" 
          value={fontSize} 
          onChange={this.handleFontSizeChange} 
        />
        <FroalaEditorComponent config={froalaConfig} />
      </div>
    );
  }
}
export default CustomFroalaEditor;

import React, { Component } from 'react';

import FroalaEditorComponent from "react-froala-wysiwyg";

class CustomFroalaEditor extends Component {

constructor(props) {

super(props);

this.state = {

fontSize: 12 // початкове значення розміру шрифту

};

this.handleFontSizeChange = this.handleFontSizeChange.bind(this);

}

handleFontSizeChange(e) {

const newSize = e.target.value;

this.setState({ fontSize: newSize });

}

render() {

const { fontSize } = this.state;

const froalaConfig = {

toolbarButtons: {

moreText: {

buttons: ['fontSize'],

buttonsVisible: 1

}

fontSizeSelection: true

};

return (

<div>

<input

type="number"

min="8"

max="72"

value={fontSize}

onChange={this.handleFontSizeChange}

</div>

);

}

export default CustomFroalaEditor;

У даному прикладі ми створили компонент CustomFroalaEditor, який містить поле введення для вказання розміру шрифту і компонент FroalaEditorComponent, який відповідає за відображення текстового редактора Froala Editor.

Поле введення має обмеження на введення чисел від 8 до 72, щоб відповідати стандартним розмірам шрифту. При зміні значення поля введення оновлюється стан компонента, що відображає вибраний розмір шрифту. Зазначений розмір шрифту також автоматично оновлюється у текстовому редакторі Froala Editor завдяки передачі конфігурації з параметром fontSizeSelection: true.

Тепер користувач може вказати розмір шрифту вручну, обираючи значення у полі введення, і це значення буде використовуватись для відображення тексту з відповідним розміром шрифту у Froala Editor.