Using input rather than dropdown to set font size

[Adarsh Tiwari]

Hello folks,

Currently, there is a dropdown in the RTE toolbar for setting the font size that can have some specific font sizes, Is there any way I can implement an input field rather than a dropdown so that the user types the font size and can get it  

[Indhumathy Loganathan]

Hi Adarsh,

Greetings from Syncfusion support.

Before proceeding with your requirement, we would like to confirm whether the RTE component you have rendered is from EJ1 or EJ2 to assist you promptly.

Here we have included our UG documentation for your reference.

EJ1: https://help.syncfusion.com/reactjs/richtexteditor/getting-started

EJ2: https://ej2.syncfusion.com/react/documentation/rich-text-editor/getting-started/

Please get back to us with the required details.

Regards,

Indhumathy L

[Adarsh Tiwari]

Hello Indumathy,

The  RTE component I'm using is

EJ2: https://ej2.syncfusion.com/react/documentation/rich-text-editor/getting-started/

[Vinitha Jeyakumar]

Hi Adarsh,

We have created a sample as per your requirement to set font size by implementing an input field in the toolbar section by using custom toolbar options and added font size using executeCommand. please check the code below,

Code snippet:

items = [

    'Bold',

    'Italic',

    'Underline',

    '|',

    'Formats',

    'Alignments',

    'OrderedList',

    'UnorderedList',

    '|',

    'CreateLink',

    'Image',

    '|',

    'SourceCode',

    {

      tooltipText: 'Insert FontSize',

      template:

        ' <input id="font" type="text" /><button id="custom_tbar">Set FontSize</button>',

    },

  ];

  toolbarSettings = {

    items: this.items,

  };

  onCreate() {

    this.customBtn = document.getElementById('custom_tbar');

    this.customBtn.onclick = (e) => {

      var fontValue = document.getElementById('font');

      this.rteObj.executeCommand('fontSize', fontValue.value + 'pt');

    };

  }

  render() {

    return (

      <div className="control-pane">

        <div

          className="control-section e-rte-custom-tbar-section"

          id="rteCustomTool"

        >

          <div

            className="rte-control-section"

            ref={this.rteSectionRef}

            id="rteSection"

          >

            <RichTextEditorComponent

              id="EmotionIconstRTE"

              ref={(scope) => {

                this.rteObj = scope;

              }}

              toolbarSettings={this.toolbarSettings}

              created={this.onCreate.bind(this)}

            >

              <div style={{ display: 'block;' }}>

                <p style={{ marginRight: '10px' }}>

                  The custom command "insert emoticons" is configured as the

                  last item of the toolbar. Click on the command and choose the

                  special character you want to include from the popup.

                </p>

              </div>

              <Inject

                services={[HtmlEditor, Toolbar, Link, Image, QuickToolbar]}

              />

            </RichTextEditorComponent>

          </div>

        </div>

      </div>

    );

  }

}

Sample: https://stackblitz.com/edit/react-3yd6pk?file=index.js,index.css,index.html

In the above sample, you can enter the font size in the input field as per your requirement, and then focus on the RTE content or any texts where you want to change the font size and then click the Set Font Size button to see the changes in UI.

Documentation: https://ej2.syncfusion.com/react/documentation/rich-text-editor/exec-command/

Custom Toolbar Demos: https://ej2.syncfusion.com/react/demos/#/material/rich-text-editor/insert-emoticons

Regards,

Vinitha