mui-tiptap-editor v0.11.6

mui-tiptap-editor!

mui-tiptap-editor: A customizable and easy to use Tiptap styled WYSIWYG rich text editor, using Material UI.

Files

StackEdit stores your files in your browser, which means all your files are automatically saved locally and are accessible offline!

Table of Contents

• Demo

• Installation

• Get started

• Use the all-in-one component

• Create and provide the editor yourself

• Render read-only rich text content

• mui-tiptap extensions and components

• Tiptap extensions

• HeadingWithAnchor

• FontSize

• LinkBubbleMenuHandler

• ResizableImage

• TableImproved

• Components

• Controls components

• Localization

• Tips and suggestions

• Choosing your editor extensions

• Extension precedence and ordering

• Other extension tips

• Drag-and-drop and paste for images

• Re-rendering RichTextEditor when content changes

• Contributing

Installation

npm  install  mui-tiptap-editor

or

yarn  add  mui-tiptap-editor

Get started

Simple usage

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.

Customization

Toolbar

  import { TextEditor } from 'mui-tiptap-editor';

  function App() {
    return (
      <TextEditor toolbar={['bold', 'italic', 'underline']} />
    );
  }

Styles

Root styles

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;
}

Each element styles

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