React Rich Text Editor Integration

Learn how to integrate React with Tetrons.

Versatile

An adaptable ecosystem capable of handling end-to-end document editing, interoperability with third-party tools, document management, and collaboration.

Extensible

Modular architecture where everything is a plugin. You can tune up, add, or remove plugins as you wish. Use custom processors to handle HTML, Markdown, or JSON output.

Progressive

Takes advantage of a superb team of 50+ industry experts and 20+ years of experience in WYSIWYG editing. We are releasing new features every month.

Simple Setup

Step 1: Create a project

Create a project using a basic Vite template and change the working directory to a newly created project.

npm create vite@latest tetrons-react -- --template react && cd tetrons-react

Step 2: Install packages

Install dependencies to Tetrons React Component and a chosen Editor Type.

npm install tetrons @tetrons/react

Step 3: Add a component

Replace contents of src/App.jsx with Tetrons initialization code.

import { TetronsEditor } from '@tetrons/react';
  import {
    ClassicEditor,
    Bold,
    Essentials,
    Heading,
    Indent,
    IndentBlock,
    Italic,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    Table,
    Undo
  } from 'tetrons';
  
  import 'tetrons/tetrons.css';
  
  export default function App() {
    return (
      <TetronsEditor
        editor={ ClassicEditor }
        config={{
          toolbar: [
            'undo', 'redo', '|',
            'heading', '|', 'bold', 'italic', '|',
            'link', 'insertTable', 'mediaEmbed', '|',
            'bulletedList', 'numberedList', 'indent', 'outdent'
          ],
          plugins: [
            Bold,
            Essentials,
            Heading,
            Indent,
            IndentBlock,
            Italic,
            Link,
            List,
            MediaEmbed,
            Paragraph,
            Table,
            Undo
          ],
          initialData: '<h1>Hello from Tetrons!</h1>',
        }}
      />
    );
  }

Step 4: Done!

Run the app by executing the following command:

npm run dev

Step 5: Explore the documentation

Congratulations on setting up Tetrons! Visit the docs for more customization and integration tips.

Chatbot