texditor

Texditor – Visual Block Editor with Full JSON Export Support

Website

Website / Guide / API /

Русская версия

Сайт / Руководство / API /

Texditor is a modern, visual block editor built with TypeScript. It provides a flexible, modular architecture for creating, editing, and managing structured content. All data is stored and exported in pure JSON format, making it easy to integrate, save, and process content programmatically.

---

Key Features

• Visual Block-Based Editing: Easily add, remove, and customize blocks (paragraphs, headings, code, galleries, files, etc.) in a user-friendly interface.
• Full JSON Export Support: All content is stored and exported as clean, structured JSON, ensuring seamless integration with any backend or database.
• Flexible Architecture: Support for extensions, tools, and actions to expand functionality.
• Localization: Built-in multi-language support (English, Russian, and more).
• History Management: Undo/redo functionality with keyboard shortcut support.
• Event System: Track changes and execute complex operations with commands.
• Customization: Configure styles, behavior, and appearance through settings.

---

Quick Start

Installation

npm install texditor

Basic Setup

Include the styles and initialize the editor:

import 'texditor/styles/theme.css'; // Theme variables
import Texditor from 'texditor';

const editor = new Texditor({
  handle: 'texditor', // Target element ID
});

<div id="texditor"></div>

---

Advanced Configuration

Configure blocks, tools, extensions, and localization:

import Texditor from 'texditor';
import {
  Paragraph,
  H1,
  H2,
  H3,
  H4,
  H5,
  H6,
  List,
  OrderedList,
  Code,
  Image,
  File,
  Video,
} from 'texditor/entities/blocks';
import {
  BoldTool,
  ItalicTool,
  LinkTool,
  ClearFormattingTool,
  SubscriptTool,
  SuperscriptTool,
} from 'texditor/entities/tools';
import { Undo, Redo } from 'texditor/entities/extensions';
import { EnLocale, RuLocale } from 'texditor/locales';

const editor = new Texditor({
  handle: 'texditor',

  // Default content (JSON format)
  content: [{ type: 'p', data: ['Start typing...'] }],

  // Localization
  locale: 'en',
  locales: [
    { code: 'en', data: EnLocale },
    { code: 'ru', data: RuLocale },
  ],

  // Blocks
  blocks: [
    Paragraph,
    H1.setup({ placeholder: 'Heading 1' }),
    H2,
    H3,
    List.setup({ sortable: true }),
    OrderedList,
    Code.setup({ search: true }),
    Image.setup({
      mimeTypes: ['image/png', 'image/jpeg'],
      multiple: true,
      ajaxConfig: {
        url: '/upload',
        options: { success: (data) => console.log(data) },
      },
    }),
    File.setup({
      mimeTypes: ['image/png', 'application/pdf'],
      multiple: false,
    }),
    Video.setup({
      mimeTypes: ['image/png', 'image/jpeg'],
      ajaxConfig: {
        url: '/upload',
        options: { success: (data) => console.log(data) },
      },
    }),
  ],

  // Tools
  tools: [BoldTool, ItalicTool, LinkTool, ClearFormattingTool],

  // Extensions
  extensions: [Undo.setup({ visibleTitle: false }), Redo],

  // Actions
  actions: [CreateAction, ConvertAction, DeleteAction, MoveUpAction, MoveDownAction],

  // UI settings
  extensionsFixed: true,
  extensionVisibleTitle: true,
  autofocus: true,

  // Event handlers
  onReady: (evt) => console.log('Editor is ready!'),
  onChange: (evt) => {
    // Get content as JSON
    const content = evt.instance.save();
    console.log('Content changed (JSON):', content);
  },
});

---

JSON Output Example

All content is exported as structured JSON, where special characters and nested elements are properly formatted:

[
  {
    "type": "h1",
    "data": ["Welcome to Texditor"]
  },
  {
    "type": "p",
    "data": [
      "This is a paragraph with ",
      { "type": "b", "data": ["bold text"] },
      " and ",
      {
        "type": "a",
        "attr": { "href": "https://example.com" },
        "data": ["a link"]
      },
      "."
    ]
  },
  {
    "type": "code",
    "lang": "javascript",
    "data": ["const greet = () => {\n  console.log('Hello, world!');\n};\n\ngreet();"]
  },
  {
    "type": "image",
    "style": "grid",
    "data": [
      {
        "url": "/images/sunset.jpg",
        "type": "image/jpeg",
        "caption": "Beautiful sunset",
        "desc": "A photo of a sunset over the mountains"
      },
      {
        "url": "/images/forest.png",
        "type": "image/png",
        "caption": "Green forest",
        "desc": "A lush forest with tall trees"
      }
    ]
  },
  {
    "type": "ul",
    "data": [
      { "type": "li", "data": ["First item"] },
      {
        "type": "li",
        "data": ["Second item with ", { "type": "b", "data": ["bold text"] }]
      },
      {
        "type": "li",
        "data": [
          "Third item with a ",
          {
            "type": "a",
            "attr": { "href": "https://example.com" },
            "data": ["link"]
          }
        ]
      }
    ]
  },
  {
    "type": "ol",
    "data": [
      { "type": "li", "data": ["Step one"] },
      { "type": "li", "data": ["Step two"] },
      { "type": "li", "data": ["Step three"] }
    ]
  },
  {
    "type": "file",
    "data": [
      {
        "url": "/documents/report.pdf",
        "type": "application/pdf",
        "name": "Annual Report.pdf",
        "size": 2450
      }
    ]
  }
]

License

MIT