RTEPro PRO

npm GitHub

Full-featured WYSIWYG editor with AI integration, 16 toolbar groups, slash commands, mentions, and more. Zero dependencies.

Keyboard Shortcuts
Ctrl+FFind & Replace
Ctrl+/Source View
Ctrl+Shift+MMarkdown Toggle
Ctrl+Shift+AAI Panel
Ctrl+Shift+F / F11Fullscreen
Ctrl+ZUndo
Ctrl+Shift+Z / Ctrl+YRedo
Ctrl+SSave HTML
Quick Tips
  • Type / for slash commands (headings, lists, tables, etc.)
  • Type @ for mentions
  • Right-click a table cell for row/column editing
  • Use the gridlines button () in Mode group to see element outlines
  • AI features require an Anthropic API key
Live Preview

Type in the editor above and see the output update in real time.


        

        

          

        

        

          

        

        

          

        

        

          

        

      


      
Install

      
npm install rte-rich-text-editor-pro


      
Quick Start

      
<div id="editor"></div>
<script src="https://unpkg.com/rte-rich-text-editor-pro/rte-pro.js"></script>
<script>
  const editor = RTEPro.init('#editor', {
    placeholder: 'Start typing...',
    height: '400px',
    aiProxy: '/api/ai',            // recommended — keeps API key server-side
    toolbar: null,                  // null = all 16 groups
    mentions: [
      { name: 'Alice', id: 'alice', avatar: '👩' },
      { name: 'Bob', id: 'bob', avatar: '👨' },
    ],
    wordGoal: 500,
    watermark: 'DRAFT',
  });
</script>


      
Toolbar Groups (16)

      

        format
        text
        color
        align
        list
        insert
        block
        style
        direction
        tools
        history
        cleanup
        advanced
        mode
        analysis
        ai
      

      
// Show only specific groups:
RTEPro.init('#editor', {
  toolbar: ['text', 'format', 'insert', 'ai']
});