How can I set the default fontSize

[Imhemers]

It seems that there is no API to set up

fontSize: { defaultSize: 18,//This does not work. options: [10,12, 14, 16, 18, 24, 30, 36, 48, 60], },

[jpuri]

This can be done using editorStyle or editorClassName. Simply setting css font-size will change font-size of the editor.

[shakdoesgithub]

Hi @jpuri your solution only changes what is displayed in the editor. Is there a way to set the default font size of the draft js content?

[jpuri]

Good point, its missed. Atm you can do that by selecting font-size from dropdown.

This default font-size information is required to be added to all the blocks, I will try to fix this.

[jpuri]

Default font-size can be changed by using editorStyle or editorClassName. Trouble atm is that its not saved in editor-content.

A work around could set default size of font while displaying editor content next time also.

[Pratapvirendra47]

Is this fixed??

[mandarspringct]

Hi @jpuri any updates on this? I have same issue. Version: 1.12.13 Setting font size through editorStyle / editorClassName only sets content font size. Does not change the default font size in the dropdown. Hope for a fix soon, Thanks!

[shaunjacobsen]

Hello, also wondering if this is going to be available as an option soon?

[sachinkammar]

Hello @jpuri please update the status of this issue.

[jpuri]

Hey @sachinkammar : defaultFont size can be set as described here: https://github.com/jpuri/react-draft-wysiwyg/issues/551#issuecomment-352435105

I still need to add it to options.

[jakeleventhal]

Similarly, users need to be able to set the default fontFamily. Currently setting the font family will change the display, but not the actual content of the editor.

[sandropoluan]

Any update?

[sandropoluan]

I need this feature

[mikeappell]

I've managed to get a working fix for this issue, but it's fairly convoluted.

constructor(props) {
  ...
  const fontFamily = `fontfamily-${DEFAULT_FONT_FAMILY}`;
  const fontSize = `fontsize-${DEFAULT_FONT_SIZE}`;
 ...
  this.state = {
    editorState,
    fontFamily,
    fontSize,
  };
}

...

setDefaultFontFamilyAndSize = (editorState) => {
  const currentStyles = editorState.getCurrentInlineStyle();

  let newEditorState = editorState;
  if (!currentStyles.some(style => style.match(/^fontfamily-/))) {
    newEditorState = RichUtils.toggleInlineStyle(
      newEditorState,
      this.state.fontFamily,
    );
  }
  if (!currentStyles.some(style => style.match(/^fontsize-/))) {
    newEditorState = RichUtils.toggleInlineStyle(
      newEditorState,
      this.state.fontSize,
    );
  }

  return newEditorState;
}

...

ensureOnlyOneFontSizeAndFamily = (editorState) => {
  const currentStyles = editorState.getCurrentInlineStyle();
  const fontFamilies = currentStyles.filter(style => style.match(/^fontfamily-/));
  const fontSizes = currentStyles.filter(style => style.match(/^fontsize-/));
  let newEditorState = editorState;

  if (fontFamilies.size > 1) {
    newEditorState = RichUtils.toggleInlineStyle(
      newEditorState,
      fontFamilies.first(),
    );
  }
  if (fontSizes.size > 1) {
    newEditorState = RichUtils.toggleInlineStyle(
      newEditorState,
      fontSizes.first(),
    );
  }

  return newEditorState;
}

...

onEditorChange = (editorState) => {
  ...
  const currentStyles = editorState.getCurrentInlineStyle();
  const fontFamily = currentStyles.filter(style => style.match(/^fontfamily-/)).last();
  const fontSize = currentStyles.filter(style => style.match(/^fontsize-/)).last();
  if (fontFamily) this.setState({ fontFamily });
  if (fontSize) this.setState({ fontSize });

  let newEditorState = this.ensureOnlyOneFontSizeAndFamily(editorState);
  newEditorState = this.setDefaultFontFamilyAndSize(newEditorState);
  ...
}

...

componentDidMount() {
  const editorState = this.setDefaultFontFamilyAndSize(this.state.editorState);
  this.onEditorChange(editorState);
}

It would be far easier were the API to reveal an option for a default fontSize/Family, of course, but in the absence of this, this is doing the job for me.

[SangeetAgarwal]

Is there a way to add a font family and keep all the other toolbar options

[ledesmablt]

It seems as though setting editorStyle to something like fontSize: 16 sets the default selected font size to 16 (not just what is displayed). Tested on version 1.14.7

[abhayverma112]

I am using react-final-form i am making crud app every thing working fine but when i do edit with the help of this editor, first time it work perfect but when i again edit the same task it does not show the previous style in editor box <Field component={DraftEditor} name="description" type="text" />

`/* eslint-disable no-underscore-dangle / / eslint-disable react/destructuring-assignment / / eslint-disable max-len / / eslint-disable no-undef / / eslint-disable react/prop-types / / eslint-disable no-unused-vars / / eslint-disable no-shadow */ import * as React from 'react'; import { useState } from 'react'; import { EditorState, convertToRaw, ContentState, convertFromHTML, Modifier, editorRef, } from 'draft-js'; import { stateFromHTML } from 'draft-js-import-html'; import { Editor } from 'react-draft-wysiwyg'; import draftToHtml from 'draftjs-to-html'; import htmlToDraft from 'html-to-draftjs'; import parser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';

const WYSIWYGEditor = ({ input, meta }) => { const blocksFromHTML = convertFromHTML(input.value); const content = ContentState.createFromBlockArray( blocksFromHTML.contentBlocks, blocksFromHTML.entityMap, ); const raw = convertToRaw(content); const [contentState, setContentState] = useState(raw); const [editorState, setEditorState] = useState(EditorState.createEmpty());

const onEditorStateChange = (contentState) => { setEditorState(contentState); return input.onChange(draftToHtml(convertToRaw(editorState.getCurrentContent()))); }; return ( <div className="editor"> <Editor defaultContentState={contentState} onEditorStateChange={onEditorStateChange} wrapperClassName="wrapper-class" editorClassName="editor-class" toolbarClassName="toolbar-class" placeholder="Write your answere here" toolbar={{ options: [ 'inline', 'blockType', 'fontSize', 'fontFamily', 'colorPicker', ], inline: { options: ['bold', 'italic', 'underline'], }, fontSize: { options: [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96], className: undefined, component: undefined, dropdownClassName: undefined, }, blockType: { options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'Blockqoute', 'Code'], }, fontFamily: { options: ['Arial', 'Georgia', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'], className: undefined, component: undefined, dropdownClassName: undefined, }, colorPicker: { className: undefined, component: undefined, popupClassName: undefined, }, }} /> ); };

export default WYSIWYGEditor; `

[kingsleydev19]

Any solution for this so far? I would like to use the Editor as readOnly to display the content coming from my database. This means I need to style the fontsize and family to match my application design. How best can I set a default font family and size and color for the editor content?

[gonenoob]

.DraftEditor-root {
  font-size: 14px;
}

[Stinny]

@sparkmediatech Did you ever find a solution by chance? Using the Editor in read only mode as well and would like styles to match my entire application.

[meierac]

Hi @jpuri , is there already an official solution for setting the default font size that is stored in the editor content and not only in the website CSS? I want to print the editor content with my application, but if the user does not set a custom font size, the default font size is used when printing, which is tiny...

[jueser]

the same here

i found this solution:

`import { toggleCustomInlineStyle, getSelectionCustomInlineStyle, } from 'draftjs-utils'; Secondly, on each render(!?) you should execute:

const fontSize = getSelectionCustomInlineStyle(editorState, ['FONTSIZE',]).FONTSIZE if (!fontSize) { setEditorState(toggleCustomInlineStyle(editorState, 'fontSize', 24)) }`

but it's not wor for fontSize and fontFamily on the same time.

[maqboolna]

Adding this line set the font size editorStyle={{ fontSize: 24, }}

<ReactDraftWysiwyg
     wrapperClassName="wrapper-class"
     editorClassName="editor-class"
     toolbarClassName="toolbar-class"
    editorState={editorValue}
    editorStyle={{
      fontSize: 24,
    }}
    }}
  />