Installation
npx shadcn@latest add https://platejs.org/r/editor
Examples
Loading...
Files
components/editor-default.tsx
'use client';
import { Plate, usePlateEditor } from 'platejs/react';
import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';
export default function EditorDefault() {
const editor = usePlateEditor({
plugins: EditorKit,
});
return (
<Plate editor={editor}>
<EditorContainer>
<Editor placeholder="Type your message here." />
</EditorContainer>
</Plate>
);
}
Loading...
Files
components/editor-disabled.tsx
'use client';
import { Plate, usePlateEditor } from 'platejs/react';
import { Editor, EditorContainer } from '@/components/ui/editor';
export default function EditorDisabled() {
const editor = usePlateEditor();
return (
<Plate editor={editor}>
<EditorContainer>
<Editor disabled placeholder="Type your message here." />
</EditorContainer>
</Plate>
);
}
Loading...
Files
components/editor-full-width.tsx
'use client';
import { Plate, usePlateEditor } from 'platejs/react';
import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';
export default function EditorDefault() {
const editor = usePlateEditor({
plugins: EditorKit,
});
return (
<Plate editor={editor}>
<EditorContainer>
<Editor variant="fullWidth" placeholder="Type your message here." />
</EditorContainer>
</Plate>
);
}