Basic Editor

The simplest way to get started with ts-medium-editor.

Quick Start

Interactive Demo

Try it yourself - Select text to see the toolbar:

🔄 Loading interactive demo...

This is a basic editor with formatting capabilities.

You can create links, format text, and more!

HTML

<div class="editable" data-placeholder="Start typing here...">
  <p>This is a <strong>basic editor</strong> with <em>formatting capabilities</em>.</p>
  <p>You can create <a href="#">links</a>, format text, and more!</p>
</div>

TypeScript

import { MediumEditor } from 'ts-medium-editor'
import 'ts-medium-editor/css/medium-editor.css'

const editor = new MediumEditor('.editable', {
  toolbar: {
    buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote']
  },
  placeholder: {
    text: 'Start typing here...',
    hideOnClick: true
  }
})

Minimal Setup

Interactive Demo

Minimal editor with default settings:

🔄 Loading interactive demo...

This is the most basic setup with default options.

For the absolute minimum setup:

import { MediumEditor } from 'ts-medium-editor'
import 'ts-medium-editor/css/medium-editor.css'

// Just pass a selector - uses all default options
const editor = new MediumEditor('.editable')

Article Editor

A more complete setup for article writing:

HTML

<article class="article-editor">
  <h1 class="article-title" data-placeholder="Enter your title...">
    Your Article Title
  </h1>
  <div class="article-content" data-placeholder="Write your article...">
    <p>Write compelling content here. You can use various formatting options:</p>
    <ul>
      <li>Bold and italic text</li>
      <li>Headers for structure</li>
      <li>Links and quotes</li>
    </ul>
    <blockquote>
      "This is a blockquote example that demonstrates the quote feature."
    </blockquote>
    <p>Continue writing your amazing content!</p>
  </div>
</article>

TypeScript

const articleEditor = new MediumEditor(['.article-title', '.article-content'], {
  toolbar: {
    buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote']
  },
  placeholder: {
    text: 'Start writing...',
    hideOnClick: true
  },
  buttonLabels: 'fontawesome'
})

CSS

.article-editor {
  max-width: 700px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Georgia', serif;
}

.article-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  border: none;
  outline: none;
}

.article-content {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
}

.article-content:focus {
  outline: none;
  border-left: 3px solid #007bff;
  padding-left: 17px;
}

Real-time Preview

Interactive Demo

Live preview demo - Edit on the left, see changes on the right:

🔄 Loading interactive demo...

Editor

Edit this text and watch the preview update!

Live Preview

Edit this text and watch the preview update!

Show content updates in real-time:

HTML

<div class="editor-container">
  <div class="editor-panel">
    <h3>Editor</h3>
    <div class="editable-preview" data-placeholder="Type to see live preview...">
      <p>Edit this text and watch the preview update!</p>
    </div>
  </div>

  <div class="preview-panel">
    <h3>Live Preview</h3>
    <div id="live-preview"></div>
  </div>
</div>

TypeScript

const editor = new MediumEditor('.editable-preview', {
  toolbar: {
    buttons: ['bold', 'italic', 'underline', 'anchor', 'quote']
  }
})

// Update preview in real-time
editor.subscribe('editableInput', (event, editable) => {
  const preview = document.getElementById('live-preview')
  preview.innerHTML = editable.innerHTML
})

// Initialize preview
document.addEventListener('DOMContentLoaded', () => {
  const editable = document.querySelector('.editable-preview')
  const preview = document.getElementById('live-preview')
  preview.innerHTML = editable.innerHTML
})

CSS

.editor-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.editor-panel, .preview-panel {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1rem;
}

.editable-preview {
  min-height: 200px;
  border: 2px dashed #dee2e6;
  border-radius: 6px;
  padding: 1rem;
}

#live-preview {
  min-height: 200px;
  background: #f8f9fa;
  border-radius: 6px;
  padding: 1rem;
}

Next Steps

• Learn about Custom Toolbar options
• Explore Multiple Editors setup
• Check out Event Handling for interactivity