DOCSEARCHbyAlgolia
Submit Docs

TinyEditor Documentation

repository·dev·Indexed 19 days ago

https://github.com/opentiny/tiny-editor

A framework-independent rich text editor built on Quill 2.0, available via the @opentiny/fluent-editor package. It extends Quill with over 30 modules and formats, including advanced table manipulation, emoji insertion, and image resizing. The project includes a collaborative editing backend deployable via Docker Compose with MongoDB persistence and support for custom database implementations via a Persistence interface.

Tokens
43.2K
Snippets
150
Records
179
Agent score
67%

What's inside TinyEditor

  1. Overview of TinyEditor features

    dev

    TinyEditor is a rich text editor based on Quill 2.0. It extends the core Quill functionality with a wide range of modules and formats, designed to be powerful and ready to use out of the box.

    Key features include:

    • Out-of-the-box usage: Includes over 30 built-in modules and formats.
    • Powerful capabilities: Extends Quill with features like tables, image support, file uploads, and @mentions.
    • Framework agnostic: Can be integrated into various frameworks including Vue, React, and Angular.
    • Quill compatibility: Maintains compatibility with the Quill API and its existing ecosystem.

  2. What is TinyEditor?

    dev

    TinyEditor is a rich text editor built on top of Quill 2.0. It extends the core Quill functionality with over 30 modules and formats.

    Key characteristics include:

    • Enhanced Modules: Extends Quill with advanced support for tables, images, links, clipboard, emoji, files, mentions, and quick menus.
    • Advanced Table Support: Includes features like inserting tables with specific dimensions, dragging row heights/column widths, inserting/deleting rows and columns, and merging/splitting cells.
    • Framework Agnostic: Can be used in Vue, React, Angular, or vanilla JavaScript projects.
    • Quill Compatibility: Fully compatible with all Quill APIs and the existing Quill module ecosystem.

  3. Features and capabilities of TinyEditor

    dev

    TinyEditor extends Quill 2.0 with over 30 modules and formats. Key features include:

    • Extended Modules: Beyond Quill's 21 built-in formats, TinyEditor adds 15 additional modules including tables, images, hyperlinks, word count, emojis, file uploads, copy-paste enhancements, @mentions, slash menus, and screenshots.
    • Advanced Table Support: Supports inserting tables with specific rows/columns, dragging row heights and column widths, inserting/deleting rows and columns, and merging/splitting cells.
    • Framework Agnostic: Can be used in Vue, React, Angular, and other frameworks.
    • Quill Compatibility: Fully compatible with all Quill APIs and the existing Quill module ecosystem.

  4. Table features in TinyEditor

    dev

    Once quill-table-up is installed, TinyEditor supports the following table-related capabilities:

    • Cell Operation Menus: Contextual menus for interacting with specific cells.
    • Cell Resizing: Ability to adjust the size of table cells.
    • Shortcut Menu Configuration: Customizable menus for quick table actions.
    • Table Clipboard Support: Enhanced clipboard functionality specifically for table data.

  5. How collaborative editing works in TinyEditor

    dev

    The collaborative editing system consists of three main components:

    1. Frontend (TinyEditor): The user interface where editing occurs.
    2. Collaboration Engine (Yjs): The middleware layer that manages shared data types and synchronization.
    3. Backend Service: Handles data synchronization across clients and provides persistence (e.g., saving data to a database like MongoDB).

    Yjs uses various connection protocols, such as WebSocket or WebRTC, to achieve multi-terminal synchronization. Operations performed in the editor are passed to Yjs, which then propagates them to other connected clients.

  6. Use translation keys in module options

    dev

    For editor modules that accept text directly as an option, you can pass the translation key instead of the literal string. The editor will automatically resolve the key to the correct text based on the current active language.

    // Instead of passing 'Save', pass the key that maps to 'Save' in the current locale
const moduleOptions = {
  label: 'editor.save_button_key'
};

  7. Configure the Header List scroll container and offset

    dev

    By default, the editor uses itself as the scrolling container. You can customize this behavior using the following properties:

    • scrollContainer: Specify a different element (as a string selector or HTMLElement) to act as the scrolling container.
    • topOffset: If your page has fixed elements at the top that might overlap the headers when scrolling, use this property to set an additional scroll offset (in px). It accepts a number or a function returning a number.

  9. Setup y-webrtc-server for TinyEditor

    dev

    You can use y-webrtc-server to set up a WebRTC backend.

    Installation

    git clone https://github.com/yjs/y-webrtc.git
cd y-webrtc
pnpm i

    Running the server

    Ubuntu/MacOS: HOST=localhost PORT=4444 npx y-webrtc

    Windows PowerShell: $env:HOST="localhost"; $env:PORT="4444"; npx y-webrtc

    git clone https://github.com/yjs/y-webrtc.git
cd y-webrtc
pnpm i
# Ubuntu/MacOS
HOST=localhost PORT=4444 npx y-webrtc

  10. Configure custom database persistence for collaborative editing

    dev

    TinyEditor's collaborative editing backend, which is based on WebSocket, supports custom database persistence. Specifically, it supports MongoDB for data persistence and can be deployed using Docker containers.

    For detailed configuration and deployment instructions for a custom persistence service, refer to the collaborative-editing-backend package documentation.

  11. Use TinyEditor in Angular

    dev

    To use TinyEditor in an Angular project, install the package via npm. Initialize the FluentEditor instance inside the ngAfterViewInit lifecycle hook to ensure the template element is rendered. You must also import the editor's CSS styles in your global styles file.

    // src/app/app.component.ts
import { Component } from '@angular/core'
import { RouterOutlet } from '@angular/router'
import FluentEditor from '@opentiny/fluent-editor'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  title = 'my-app'

  ngAfterViewInit() {
    new FluentEditor('#editor', {
      theme: 'snow',
    })
  }
}

    In src/app/app.component.html:

    <main class="main">
  <div id="editor"></div>
</main>
<router-outlet />

    In src/styles.scss:

    @import '@opentiny/fluent-editor/style.css';

  12. Configure MongoDB for local development

    dev

    If you are developing locally and want to use a standalone MongoDB instance instead of the Docker Compose setup, start MongoDB with the following command:

    docker run -d \
  --name mongodb \
  -p 27017:27017 \
  -e MONGO_INITDB_ROOT_USERNAME=admin \
  -e MONGO_INITDB_ROOT_PASSWORD=admin \
  -v mongodb_data:/data/db \
  mongo:latest

    Then, update your .env file's MONGODB_URL to point to your local instance:

    MONGODB_URL=mongodb://admin:admin@localhost:27017/?authSource=admin