📚 Examples & Tutorials

Learn through practical code examples

Live Playground: Try Editora in your browser with a working sample. Open Playground →

Bundle Options

Editora offers two bundle sizes to fit your needs:

  • Core Bundle: Essential plugins only (bold, italic, underline, history)
  • Full Bundle: All plugins including advanced ones (embedIframe, math, specialCharacters, table, image, link, heading, list, blockquote, code, fontSize, textAlignment, fontFamily, lineHeight, textColor, backgroundColor, capitalization, indent, direction, checklist, emojis, preview, fullscreen, print, pageBreak, footnote, codeSample, anchor, mergeTag, template, comments, spellCheck, a11yChecker, strikethrough, clearFormatting, image, documentManager)

Core Bundle Usage

<!DOCTYPE html>
<html>
<head>
  <title>Editora Core Bundle</title>
  <script src="https://cdn.jsdelivr.net/npm/@editora/core/dist/webcomponent-core.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@editora/core/dist/webcomponent-core.min.css">
</head>
<body>
  <editora-editor
    plugins="bold italic underline history"
    toolbar-items="bold italic underline | undo redo"
    height="300"
  >
    <p>Start editing with core plugins...</p>
  </editora-editor>
</body>
</html>

Full Bundle Usage

<!DOCTYPE html>
<html>
<head>
  <title>Editora Full Bundle</title>
  <script src="https://cdn.jsdelivr.net/npm/@editora/core/dist/webcomponent.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@editora/core/dist/webcomponent.min.css">
</head>
<body>
  <editora-editor
    plugins="bold italic underline table codeSample embedIframe math specialCharacters history"
    toolbar-items="bold italic underline | table | codeSample | embedIframe | math | specialCharacters | undo redo"
    height="400"
  >
    <p>Start editing with all plugins...</p>
  </editora-editor>
</body>
</html>

Basic HTML Example

<!DOCTYPE html>
<html>
<head>
  <title>Editora Web Component</title>
  <script src="https://cdn.jsdelivr.net/npm/@editora/core/dist/webcomponent-core.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@editora/core/dist/webcomponent-core.min.css">
</head>
<body>
  <editora-editor
    plugins="bold italic underline history"
    toolbar-items="bold italic underline | undo redo"
    height="300"
  >
    <p>Start editing your content here...</p>
  </editora-editor>

  <script>
    // Access the editor programmatically
    const editor = document.querySelector('editora-editor');
    
    // Get content
    const content = editor.innerHTML;
    
    // Set content
    editor.innerHTML = '<p>New content</p>';
    
    // Get API for advanced operations
    const api = editor.getAPI();
    if (api) {
      console.log('Editor content:', api.getContent());
    }
  </script>
</body>
</html>

React Example


import { EditoraEditor } from '@editora/react';

import "@editora/themes/themes/default.css";

import {
  BoldPlugin,
  ItalicPlugin,
  HeadingPlugin,
  HistoryPlugin
} from '@editora/plugins';

function MyEditor() {
  const [content, setContent] = useState('<p>Start writing...</p>');

  return (
    <EditoraEditor
      value={content}
      onChange={setContent}
      plugins={[
        BoldPlugin(),
        ItalicPlugin(),
        HeadingPlugin(),
        HistoryPlugin()
      ]}
    />
  );
}

Vue 3 Example

<template>
  <div class="editor-wrapper">
    <editora-editor
      plugins="bold italic underline history"
      toolbar-items="bold italic underline | undo redo"
      height="300"
    >
      <p>Hello from Vue 3!</p>
    </editora-editor>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  // Access the editor programmatically if needed
  const editor = document.querySelector('editora-editor');
  if (editor) {
    const api = editor.getAPI();
    // Use API for advanced operations
  }
});
</script>

Vue 3 + Plugins Example

<template>
  <div class="editor-wrapper">
    <editora-editor
      plugins="bold italic underline table codeSample history"
      toolbar-items="bold italic underline | table | codeSample | undo redo"
      height="400"
    >
      <p>Hello from Vue with plugins!</p>
    </editora-editor>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const editor = document.querySelector('editora-editor');
  if (editor) {
    const api = editor.getAPI();
    // Use API for advanced operations
  }
});
</script>

Angular Example

// app.component.ts
import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <editora-editor
      plugins="bold italic underline history"
      toolbar-items="bold italic underline | undo redo"
      height="300"
    >
      <p>Hello from Angular!</p>
    </editora-editor>
  `
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit() {
    const editor = document.querySelector('editora-editor');
    if (editor) {
      const api = editor.getAPI();
      // Use API for advanced operations
    }
  }
}

Svelte Example

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    const editor = document.querySelector('editora-editor');
    if (editor) {
      const api = editor.getAPI();
      // Use API for advanced operations
    }
  });
</script>

<editora-editor
  plugins="bold italic underline history"
  toolbar-items="bold italic underline | undo redo"
  height="300"
>
  <p>Hello from Svelte!</p>
</editora-editor>

With Plugins Example

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/@editora/core/dist/webcomponent.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@editora/core/dist/webcomponent.min.css">
</head>
<body>
  <editora-editor
    plugins="bold italic underline image table codeSample history"
    toolbar-items="bold italic underline | insertImage insertVideo | table | codeSample | undo redo"
    height="400"
  >
    <p>Start editing...</p>
  </editora-editor>

  <button id="save">Save</button>

  <script>
    document.getElementById('save').addEventListener('click', () => {
      const editor = document.querySelector('editora-editor');
      const html = editor.innerHTML;
      // Send to server
      fetch('/api/save', {
        method: 'POST',
        body: JSON.stringify({ content: html })
      });
    });
  </script>
</body>
</html>

Auto-Save Example

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/@editora/core/dist/webcomponent-core.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@editora/core/dist/webcomponent-core.min.css">
</head>
<body>
  <editora-editor
    plugins="bold italic underline history"
    height="300"
  >
    <p>Start typing...</p>
  </editora-editor>

  <script>
    // Auto-save every 30 seconds
    setInterval(() => {
      const editor = document.querySelector('editora-editor');
      const content = editor.innerHTML;
      localStorage.setItem('draft', content);
      console.log('Auto-saved');
    }, 30000);

    // Load draft on page load
    window.addEventListener('DOMContentLoaded', () => {
      const draft = localStorage.getItem('draft');
      if (draft) {
        const editor = document.querySelector('editora-editor');
        editor.innerHTML = draft;
      }
    });
  </script>
</body>
</html>

Custom Toolbar Example

<editora-editor
  plugins="bold italic underline heading list link image history"
  toolbar-items="bold italic underline | heading1 heading2 | bullist numlist | link insertImage | undo redo"
  height="300"
>
  <p>Custom toolbar with specific buttons</p>
</editora-editor>

Event Handling Example

<editora-editor
  plugins="bold italic underline history"
  height="300"
>
  <p>Try editing this content...</p>
</editora-editor>

<div id="preview"></div>
<div id="status">Ready</div>

<script>
  const editor = document.querySelector('editora-editor');
  const preview = document.getElementById('preview');
  const status = document.getElementById('status');

  // Listen for content changes
  editor.addEventListener('input', () => {
    preview.innerHTML = editor.innerHTML;
  });

  // Focus/blur events
  editor.addEventListener('focus', () => {
    status.textContent = 'Editing...';
  });

  editor.addEventListener('blur', () => {
    status.textContent = 'Ready';
  });
</script>

Data Binding Example

<form id="form">
  <input type="hidden" id="content" name="content">
  <editora-editor
    plugins="bold italic underline history"
    height="300"
  >
    <p>Start writing...</p>
  </editora-editor>
  <button type="submit">Save</button>
</form>

<script>
  const form = document.getElementById('form');
  const contentInput = document.getElementById('content');
  const editor = document.querySelector('editora-editor');

  // Set initial content
  editor.innerHTML = contentInput.value || '<p>Start writing...</p>';

  // Update input on change
  editor.addEventListener('input', () => {
    contentInput.value = editor.innerHTML;
  });

  // Submit form
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    // Form is ready with content in contentInput
    console.log('Content to save:', contentInput.value);
    // form.submit();
  });
</script>

Formatting Example

<editora-editor
  plugins="bold italic underline heading link history"
  toolbar-items="bold italic underline | heading1 heading2 heading3 | link | clearFormatting"
  height="300"
>
  <p>Select text and use the toolbar buttons to format it.</p>
</editora-editor>

<!-- Custom buttons for programmatic formatting -->
<div style="margin-top: 10px;">
  <button onclick="makeBold()">Make Bold</button>
  <button onclick="insertHeading(1)">H1</button>
  <button onclick="insertLink()">Insert Link</button>
</div>

<script>
  const editor = document.querySelector('editora-editor');
  const api = editor.getAPI();

  function makeBold() {
    if (api) {
      // Use API to execute commands programmatically
      api.execCommand('bold');
    }
  }

  function insertHeading(level = 1) {
    if (api) {
      api.execCommand('heading', { level });
    }
  }

  function insertLink() {
    const url = prompt('Enter URL:');
    if (url && api) {
      api.execCommand('insertLink', { url });
    }
  }
</script>

Validation Example

<editora-editor
  plugins="bold italic underline history"
  height="300"
>
  <p>Write some content here...</p>
</editora-editor>

<button id="submit">Submit Content</button>

<script>
  const editor = document.querySelector('editora-editor');
  const submitBtn = document.getElementById('submit');

  function validateContent() {
    const content = editor.innerHTML;
    
    // Check if empty
    if (content === '<p></p>' || content.trim() === '') {
      alert('Content cannot be empty');
      return false;
    }
    
    // Check minimum length
    const text = new DOMParser().parseFromString(content, 'text/html').body.textContent;
    if (text.length < 10) {
      alert('Content must be at least 10 characters');
      return false;
    }
    
    return true;
  }

  submitBtn.addEventListener('click', () => {
    if (validateContent()) {
      // Save content
      saveContent(editor.innerHTML);
    }
  });

  function saveContent(content) {
    console.log('Saving content:', content);
    // Send to server...
  }
</script>

💡 Additional Example Files

Explore these additional working example files:

🔗 Core Examples

🎨 UI & Toolbar

📷 Media & Plugins

🔧 Advanced Features

🍞 Toast Notifications

⚛ī¸ Framework Examples

All example files use CDN URLs and can be opened directly in your browser. Check the GitHub examples directory for the complete collection.