mui-tiptap-editor: A customizable and easy to use Tiptap styled WYSIWYG rich text editor, using Material UI.
StackEdit stores your files in your browser, which means all your files are automatically saved locally and are accessible offline!
npm install mui-tiptap-editor
or
yarn add mui-tiptap-editor
import { TextEditor, TextEditorReadOnly } from 'mui-tiptap-editor';
import { useState } from "react";
function App() {
const [value, setValue] = useState<string>("");
const handleChange = (newValue: string) => setValue(newValue);
return (
<div>
<TextEditor value={value} onChange={handleChange} />
{value && <TextEditorReadOnly value={value} />}
</div>
);
}
See example/App.tsx
for a more thorough example of using TextEditor
.
Can display the menus as needed
import { TextEditor } from 'mui-tiptap-editor';
function App() {
return (
<TextEditor toolbar={['bold', 'italic', 'underline']} />
);
}
import './index.css';
function App () {
return (
<TextEditor
value="<p>Hello word!</p>"
rootClassName="root"
/>
)
}
/* ./index.css */
.root {
background-color: #fff;
}
.root .MuiTab-root.Mui-selected {
background-color: yellow !important;
}
import './index.css';
function App () {
return (
<TextEditor
value="<p>Hello word!</p>"
label="Content"
tabClassName="my-tab"
labelClassName="my-label"
inputClassName="my-input"
/>
)
}
/* ./index.css */
.my-tab.MuiTab-root.Mui-selected {
background-color: pink !important;
}
.my-label {
color: blue !important;
}
.my-input {
border: 1px solid green;
}
props | type | Default value | Description |
---|---|---|---|
toolbar | string[] |
heading, bold, italic, strike, link, underline, image, code, orderedList, bulletList, align, codeBlock, blockquote, table, history, youtube, color, mention, ai | The list of the menu buttons to be displayed |
placeholder | string |
empty | input placeholder |
label | string |
empty | input label |
error | string |
empty | Error message to display |
withFloatingMenu | boolean |
false | Show or hide the floating menu |
withBubbleMenu | boolean |
true | Show or hide the bubble menu |
inputClassName | string |
empty | Override input styles |
toolbarClassName | string |
empty | Override the toolbar menu styles |
tabsClassName | string |
empty | Override the tabs (preview , editor ) styles |
tabClassName | string |
empty | Override the tab (preview or editor ) styles |
errorClassName | string |
empty | Override the error message styles |
rootClassName | string |
empty | Override the main container styles |
labelClassName | string |
empty | Override the label styles |
bubbleMenuToolbar | string[] |
['bold', 'italic', 'underline', 'link'] |
Similar to toolbar props |
floatingMenuToolbar | string[] |
['bold', 'italic', 'underline', 'link'] |
Similar to toolbar props |
value | string |
empty | Value of the input |
onChange | (value: string) => void |
empty | Function to call when the input change |
...all tiptap features | EditorOptions | empty | Can access to all tiptap useEditor props |