React Tinymce Quickbar add font-size options as input field

user_7665407 0
Viewed 382

I am using React TinyMCE for text editor this is my code.

<Editor
  key={id}
  initialValue={value}
  inline={true}
  init={{
    plugins: [ 'quickbars', 'autoresize', 'code', 'paste', 'link' ],
    menubar: false,
    toolbar: false,
    quickbars_insert_toolbar: false,
    quickbars_selection_toolbar: selection_toolbar,
    browser_spellcheck : true,
    autoresize_bottom_margin: 50,
    autoresize_overflow_padding: 50,
    min_height: 100,
    valid_elements: "*[*]",
    paste_as_text: true,
    font_formats: fonts(),
    content_css: [
      customfontStyle
    ],
    setup: (editor) => {
      editorRef.current = editor;

      editor.on('drop', e => {
        console.log(e);
        e.preventDefault();
      });

    }
  }}
  onEditorChange={onChange}
/>
);

enter image description here

Here the font-size is a drop-down and I am aware I can add/remove font sizes from the list. but I want the font-size option to be an input field to enter font-size. Would that be possible. Can someone please help me.

reactjs tinymce
2 Answers

TinyMCE has a setup property which allows you to specify a callback that will be executed before the TinyMCE editor instance is rendered:

 setup: function (editor) {
    editor.on('click', function () {
      console.log('Editor was clicked');
    });

editor which you give in the setup function, allows you to add predefined component to toolbar. Unfortunately it doesn't support input or something like that, But you can add this components to toolbar. One of them is button. So it can be added to toolbar like this:

 setup: function (editor) {    
    editor.ui.registry.addButton('customInsertButton', {
      text: 'My Button',
      onAction: function (_) {
        editor.insertContent('&nbsp;<strong>It\'s my button!</strong>&nbsp;');
      }
    });
 }

In addition you should configure toolbar with added button:

 toolbar: 'customInsertButton'

Also you can access to editors body content and change styles with the following function:

 editor.getBody().style

Based on this description, you can add 2 buttons to the toolbar for changing fontsize which one of them is increasing fontsize and another for decreasing fontsize:

 setup: (editor) => {
            editor.ui.registry.addButton("btnIncreaseFontSize", {
              text: "A",
              icon: "action-prev",
              onAction: (api) => {
                let fontSize = editor.getBody().style.fontSize;
                if (!fontSize) fontSize = defaultFontSize;
                let value = parseInt(fontSize.substring(0, 2));
                fontSize = `${value + 1}px`;
                editor.getBody().style.fontSize = fontSize;
              }
            });
            editor.ui.registry.addButton("btnDecreaseFontSize", {
              text: "A",
              icon: "action-next",
              onAction: (api) => {
                let fontSize = editor.getBody().style.fontSize;
                if (!fontSize) fontSize = defaultFontSize;
                let value = parseInt(fontSize.substring(0, 2));
                fontSize = `${value - 1}px`;
                editor.getBody().style.fontSize = fontSize;
              }
            });
          }

Note: for icon property had been used from TinyMCEs default icon pack

Continually configure the toolbar like:

   toolbar:
            "undo redo | formatselect | " +
            "bold italic backcolor | alignleft aligncenter " +
            "alignright alignjustify | bullist numlist outdent indent | " +
            "removeformat | help | btnIncreaseFontSize | btnDecreaseFontSize",
          content_style: `body { font-family:Helvetica,Arial,sans-serif; font-size:${defaultFontSize} }`,

And here's the defaultFontSize:

const defaultFontSize = "12px";

At the end here's the full code:

export default function App() {
  const defaultFontSize = "12px";

  return (
    <>
      <Editor
        initialValue="<p>This is the initial content of the editor.</p>"
        init={{
          height: 500,
          menubar: false,
          plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table paste code help wordcount"
          ],
          toolbar:
            "undo redo | formatselect | " +
            "bold italic backcolor | alignleft aligncenter " +
            "alignright alignjustify | bullist numlist outdent indent | " +
            "removeformat | help | btnIncreaseFontSize | btnDecreaseFontSize",
          content_style: `body { font-family:Helvetica,Arial,sans-serif; font-size:${defaultFontSize} }`,
          setup: (editor) => {
            editor.ui.registry.addButton("btnIncreaseFontSize", {
              text: "A",
              icon: "action-prev",
              onAction: (api) => {
                let fontSize = editor.getBody().style.fontSize;
                if (!fontSize) fontSize = defaultFontSize;
                let value = parseInt(fontSize.substring(0, 2));
                fontSize = `${value + 1}px`;
                editor.getBody().style.fontSize = fontSize;
              }
            });
            editor.ui.registry.addButton("btnDecreaseFontSize", {
              text: "A",
              icon: "action-next",
              onAction: (api) => {
                let fontSize = editor.getBody().style.fontSize;
                if (!fontSize) fontSize = defaultFontSize;
                let value = parseInt(fontSize.substring(0, 2));
                fontSize = `${value - 1}px`;
                editor.getBody().style.fontSize = fontSize;
              }
            });
          }
        }}
      />
    </>
  );
}

Edit polished-http-kf4lc

user_149863720

From what I could see you might be able to change the selector to do this, but safest is to use the configuration as per: https://www.tiny.cloud/docs/configure/editor-appearance/#fontsize_formats

example: tinymce.init({ selector: 'textarea', // change this value according to your HTML toolbar: 'fontsizeselect', fontsize_formats: '8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt 48pt' });

user_18808640
Related