jpuri / react-draft-wysiwyg

A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg
MIT License
6.41k stars 1.16k forks source link

Unable to update font sizes on the toolbar #1050

Open stefenmenzel opened 3 years ago

stefenmenzel commented 3 years ago

Hello,

I am attempting to update the font sizes on the toolbar. I have added a couple extra font size options but the toolbar remains unchanged.

Here is my editor:

<Editor ref={this.setDomEditorRef} editorState={getEditorState( component, propertyName )} onEditorStateChange={( editorState ) => onEditorStateChange( component.id, editorState, updateRichText )} wrapperClassName="rdw-editor-wrapper" editorClassName="rdw-editor-main" toolbarClassName="rdw-editor-toolbar" wrapperId={( this.props.index ).toString( 10 )} toolbar={{ fontSize: { options: [ 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96, 120 ] } }} />

I am using "react-draft-wysiwyg": "^1.14.3",

I would like to know how to add custom font size options to my editor toolbar.

s-kris commented 3 years ago

You need to pass options array as well.

toolbar={{
                    options: [
                        'inline',
                        'blockType',
                        'fontSize',
                        // 'fontFamily',
                        // 'list',
                        'textAlign',
                        'colorPicker',
                        'link',
                        'embedded',
                        'emoji',
                        'image',
                    ],
                    fontSize: {
                        options: [8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60, 72, 96],
                    },
}}