import { MediumEditor } from 'ts-medium-editor' import 'ts-medium-editor/css/medium-editor.css' import 'ts-medium-editor/css/themes/default.css' // Initialize editor const editor = new MediumEditor('.editable', { toolbar: { buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote'] }, placeholder: { text: 'Tell your story...' } })

interface MediumEditorOptions { // Core Settings activeButtonClass?: string // CSS class for active buttons buttonLabels?: boolean | string | ButtonLabels // Button label configuration delay?: number // Toolbar show delay (ms) disableReturn?: boolean // Disable return key disableDoubleReturn?: boolean // Disable double return disableExtraSpaces?: boolean // Prevent extra spaces disableEditing?: boolean // Make editor read-only spellcheck?: boolean // Enable spellcheck // Auto-features autoLink?: boolean // Auto-convert URLs to links targetBlank?: boolean // Open links in new tab imageDragging?: boolean // Enable image drag-and-drop fileDragging?: boolean // Enable file drag-and-drop // DOM Configuration elementsContainer?: HTMLElement // Container for editor elements contentWindow?: Window // Window context ownerDocument?: Document // Document context // Extensions extensions?: Record<string, Extension> // Custom extensions // Feature Modules toolbar?: ToolbarOptions | false // Toolbar configuration anchorPreview?: AnchorPreviewOptions | false // Link preview placeholder?: PlaceholderOptions | false // Placeholder text anchor?: AnchorOptions | false // Link creation paste?: PasteOptions | false // Paste handling keyboardCommands?: KeyboardOptions | false // Keyboard shortcuts }

class MediumEditor { // Lifecycle constructor(elements: Elements, options?: MediumEditorOptions) setup(): MediumEditor destroy(): void // Content Management getContent(index?: number): string setContent(html: string, index?: number): void serialize(): Record<string, string> resetContent(element?: HTMLElement): void // Element Management addElements(elements: Elements): void removeElements(elements: Elements): void // Selection Management exportSelection(): SelectionState | null importSelection(state: SelectionState, favorLater?: boolean): void saveSelection(): void restoreSelection(): void selectAllContents(): void selectElement(element: HTMLElement): void // Event Handling subscribe(event: string, listener: EventListener): MediumEditor unsubscribe(event: string, listener: EventListener): MediumEditor trigger(event: string, data?: any, editable?: HTMLElement): MediumEditor // Actions execAction(action: string, opts?: any): boolean queryCommandState(action: string): boolean }

const editor = new MediumEditor('.editable', { buttonLabels: 'fontawesome', toolbar: { buttons: [ 'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'anchor', 'image', 'quote', 'pre', 'orderedlist', 'unorderedlist', 'indent', 'outdent', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ], static: true, sticky: true, align: 'center' } })

const editor = new MediumEditor('.editable', { autoLink: true, targetBlank: true, toolbar: { buttons: ['bold', 'italic', 'anchor'] }, anchor: { placeholderText: 'Enter a URL', targetCheckbox: true, targetCheckboxText: 'Open in new tab' } })

// Title editor (no line breaks) const titleEditor = new MediumEditor('.title', { disableReturn: true, disableExtraSpaces: true, toolbar: { buttons: ['bold', 'italic'] }, placeholder: { text: 'Enter title...' } }) // Content editor (full features) const contentEditor = new MediumEditor('.content', { autoLink: true, toolbar: { buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote', 'orderedlist', 'unorderedlist'] }, placeholder: { text: 'Tell your story...' } })

const editor = new MediumEditor('.editable', { paste: { forcePlainText: false, cleanPastedHTML: true, cleanReplacements: [ [/\s*style\s*=\s*["'][^"']*["']/gi, ''], // Remove inline styles [/<o:p\s*\/?>|<\/o:p>/gi, ''], // Remove Word tags [/<xml>[\s\S]*?<\/xml>/gi, ''], // Remove XML [/<!--[\s\S]*?-->/g, ''] // Remove comments ], cleanAttrs: ['class', 'style', 'dir'], cleanTags: ['meta', 'style', 'script', 'object', 'embed'] } })

const editor = new MediumEditor('.editable') // Content change events editor.subscribe('editableInput', (event, editable) => { console.log('Content changed:', editable.innerHTML) // Auto-save logic here }) // Selection change events editor.subscribe('editableKeyup', (event, editable) => { const selection = editor.exportSelection() console.log('Cursor position:', selection) }) // Focus events editor.subscribe('focus', (event, editable) => { console.log('Editor focused') }) editor.subscribe('blur', (event, editable) => { console.log('Editor blurred') })

import { MediumEditorExtension } from 'ts-medium-editor' class EmojiExtension implements MediumEditorExtension { name = 'emoji' private button!: HTMLButtonElement private base: any init(): void { this.button = this.createButton() } getButton(): HTMLButtonElement { return this.button } private createButton(): HTMLButtonElement { const button = document.createElement('button') button.className = 'medium-editor-action' button.innerHTML = '😀' button.title = 'Insert Emoji' button.addEventListener('click', this.handleClick.bind(this)) return button } private handleClick(): void { const emoji = '🎉' const selection = window.getSelection() if (selection && selection.rangeCount > 0) { const range = selection.getRangeAt(0) range.deleteContents() range.insertNode(document.createTextNode(emoji)) range.collapse(false) selection.removeAllRanges() selection.addRange(range) } } destroy(): void { if (this.button) { this.button.removeEventListener('click', this.handleClick) } } } // Use the extension const editor = new MediumEditor('.editable', { toolbar: { buttons: ['bold', 'italic', 'emoji'] }, extensions: { emoji: new EmojiExtension() } })

const themeSelector = document.getElementById('theme-select') as HTMLSelectElement const themeLink = document.getElementById('theme-css') as HTMLLinkElement const themes = [ 'default', 'beagle', 'bootstrap', 'flat', 'mani', 'roman', 'tim' ] themeSelector.addEventListener('change', (event) => { const theme = (event.target as HTMLSelectElement).value themeLink.href = `./dist/css/themes/${theme}.css` })

// Static toolbar (always visible) const editor = new MediumEditor('.editable', { toolbar: { static: true, sticky: true, align: 'center' } }) // Relative container const editor = new MediumEditor('.editable', { toolbar: { relativeContainer: document.getElementById('toolbar-container') } })

const editor = new MediumEditor('.editable', { toolbar: { buttons: [ 'bold', 'italic', { name: 'highlight', action: 'highlight', aria: 'Highlight text', contentDefault: 'H', classList: ['custom-highlight-button'], attrs: { 'data-action': 'highlight' } } ] } })