Getting Started - Simple Guide

November 30, 2025 ยท View on GitHub

Learn ArmorEditor in 5 minutes with copy-paste examples.

Step 1: Install

npm install armor-editor

Step 2: Basic Example

Copy this code and it works:

<!DOCTYPE html>
<html>
<head>
    <title>My Editor</title>
</head>
<body>
    <div id="editor"></div>
    
    <script type="module">
        import { ArmorEditor } from 'armor-editor';
        
        const editor = new ArmorEditor({
            container: '#editor',
            height: '400px',
            placeholder: 'Start typing...'
        });
    </script>
</body>
</html>

That's it! You now have a working rich text editor.

Step 3: Add Features

Add AI Writing Help

const editor = new ArmorEditor({
    container: '#editor',
    height: '400px',
    ai: {
        enabled: true,
        apiKey: 'your-openai-key',
        provider: 'openai'
    }
});

Add Real-time Collaboration

const editor = new ArmorEditor({
    container: '#editor',
    height: '400px',
    collaboration: {
        enabled: true,
        channelId: 'my-document',
        userId: 'user-123',
        userName: 'John Doe'
    }
});

Add Voice Comments

const editor = new ArmorEditor({
    container: '#editor',
    height: '400px',
    voiceComments: {
        enabled: true,
        transcription: true
    }
});

Framework Examples

React

import { useEffect, useRef } from 'react';
import { ArmorEditor } from 'armor-editor';

function MyEditor() {
  const editorRef = useRef();
  
  useEffect(() => {
    const editor = new ArmorEditor({
      container: editorRef.current,
      height: '400px'
    });
    
    return () => editor.destroy();
  }, []);
  
  return <div ref={editorRef}></div>;
}

Vue

<template>
  <div ref="editor"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ArmorEditor } from 'armor-editor';

const editor = ref();

onMounted(() => {
  new ArmorEditor({
    container: editor.value,
    height: '400px'
  });
});
</script>

Next.js

'use client';
import { useEffect, useRef, useState } from 'react';

export default function Editor() {
  const editorRef = useRef();
  const [mounted, setMounted] = useState(false);
  
  useEffect(() => setMounted(true), []);
  
  useEffect(() => {
    if (mounted) {
      import('armor-editor').then(({ ArmorEditor }) => {
        new ArmorEditor({
          container: editorRef.current,
          height: '400px'
        });
      });
    }
  }, [mounted]);
  
  if (!mounted) return <div>Loading...</div>;
  return <div ref={editorRef}></div>;
}

Common Options

const editor = new ArmorEditor({
    container: '#editor',           // Where to put editor
    height: '400px',               // How tall
    width: '100%',                 // How wide
    theme: 'light',                // 'light' or 'dark'
    placeholder: 'Start typing...', // Placeholder text
    readOnly: false,               // Can edit or not
    
    // Toolbar buttons
    toolbar: [
        'bold', 'italic', 'underline',
        'fontSize', 'textColor',
        'alignLeft', 'alignCenter', 'alignRight',
        'orderedList', 'unorderedList',
        'link', 'image'
    ]
});

Get/Set Content

// Get content
const content = editor.getContent();
console.log(content); // HTML string

// Set content
editor.setContent('<p>Hello <strong>world</strong>!</p>');

// Get plain text
const text = editor.getText();
console.log(text); // "Hello world!"

// Clear everything
editor.clear();

Events

const editor = new ArmorEditor({
    container: '#editor',
    onChange: (content) => {
        console.log('Content changed:', content);
    },
    onReady: () => {
        console.log('Editor is ready!');
    }
});

// Or add events later
editor.on('contentChanged', (content) => {
    console.log('New content:', content);
});

Next Steps

  1. ai-features.md - Add AI writing help
  2. collaboration.md - Add team editing
  3. security.md - Add security features
  4. media-features.md - Add voice/video
  5. FEATURES.md - See all 135+ features

Need Help?