(editorState: EditorState, name: string, anchor: HTMLElement | null) => EditorState | void The custom React FunctionComponent used for rendering a custom atomic block. The custom React component used for rendering a custom block. The React.CSSProperties object for styling the text when using a custom inline style. For "atomic" control type, the component is not required.Įither "inline", "block", "atomic" or "callback" The icon has priority over the component, so if the icon is set the component will be ignored. The custom function component for the control. For "atomic" control type, the icon is not required. For rendering the control this name should be added to the MUIRichTextEditor controls property. The state is a object.įunction triggered when when the editor acquires focus.įunction triggered when when the editor loses focus. The data is a stringified object.įunction triggered on any change in the editor (key input, delete, etc.). Sets autocomplete strategies to present suggestion lists as the user types into the editor.įunction triggered when the save button is pressed. Sets the maximum characters count that can be input into the editor. If not provided and inlineToolbar is true the following inline styles will be displayed: bold, italic, underline and clear.ĭefines an array of TKe圜ommand objects for adding key bindings to the editor.ĭefines an object containing specific draft-js Editor properties. Available values are: "bold", "italic", "underline", "strikethrough", "highlight", "link", "clear", and user defined inline controls. List of controls to display in the inline toolbar. Sets the size on the default IconButton component for the main toolbar.ĭefines if the inline toolbar should be rendered. See more information in 'Custom Decorators'.ĭefines if the main toolbar should be rendered. See more information in 'Custom Controls' below.ĭefines an array of user custom decorators. Current available values are: "title", "bold", "italic", "underline", "strikethrough", "highlight", "undo", "redo", "link", "media", "numberList", "bulletList", "quote", "code", "clear", "save".ĭefines an array of user custom inline styles, blocks and callbacks. If not provided, all controls will be rendered. List of controls to display in the main toolbar. The toolbar is disabled by default.ĭefault content to load. Sets a reference instance of the editor component. Import MUIRichTextEditor from 'mui-rte' import TableChartIcon from const MyBlock = ( props ) => ) APIīase Id name for the component HTML elements. This sample adds a control to change the background color and font color of the typed or selected text: Just select an icon from or create your own FunctionComponent and define your rules. You can define your custom inline styles, blocks, atomic blocks and callback actions to the editor. ExamplesĬheck the examples directory for more. #Material ui rich text editor codeCurrent code using mui-rte version 1.x should be compatible with version 2.x, the only breaking change is that it requires to be wrapped on a ThemeProvider as shown in the examples. You can still use version 1.x for Material-UI v4. Mui-rte version 2.x is compatible with MUI (v5) only. getElementById ( "root" ) ) Material-UI v4 compatibility You can see this live and interactive demo:Īre you looking for an example project to get started? We host some.Import MUIRichTextEditor from 'mui-rte' const data = getContentStateAsStringFromSomewhere ( ) ReactDOM. Import React from 'react' import ReactDOM from 'react-dom' import ReactDOM.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |