pptx-editor-controls

v1.0.0

Published

4 months ago

A complete PowerPoint-style editor toolbar for web applications. Features text formatting, shape insertion, image editing, and more.

Downloads

0High
0Medium
0Low

tushar3291

powerpoint pptx editor toolbar rich-text wysiwyg contenteditable shapes images text-formatting presentation

PPTX Editor Controls

A complete PowerPoint-style editor toolbar for web applications. Add rich text formatting, shape insertion, and image editing to any contenteditable element.

npm version license

Features

Home Tab: Text formatting (bold, italic, underline, fonts, colors, alignment, lists)
Insert Tab: Add shapes (rectangle, circle, triangle, line, arrow), images, and text boxes
Shape Format Tab: Style shapes with fill colors, outlines, shadows, glow effects, rotation, and flipping
Image Format Tab: Apply filters (grayscale, sepia, invert), adjust brightness/contrast, replace images
Framework Agnostic: Works with vanilla JS, React, Vue, Angular, or any other framework
TypeScript Support: Full type definitions included
Customizable Themes: Easily change colors to match your brand
Lightweight: No dependencies

Installation

npm install pptx-editor-controls

Or using yarn:

yarn add pptx-editor-controls

Quick Start

Using ES Modules

import PPTXEditorControls from 'pptx-editor-controls';

const editor = new PPTXEditorControls({
  targetSelector: '#my-editor',
  toolbarContainer: '#toolbar-container'
});

Using CommonJS

const PPTXEditorControls = require('pptx-editor-controls');

const editor = new PPTXEditorControls({
  targetSelector: '#my-editor'
});

Using Script Tag

<script src="https://unpkg.com/pptx-editor-controls/dist/pptx-editor-controls.min.js"></script>
<script>
  const editor = new PPTXEditorControls({
    targetSelector: '#my-editor'
  });
</script>

Auto-Initialization

Add a data-pptx-editor attribute to auto-initialize:

<div id="my-editor" contenteditable="true" data-pptx-editor='{"toolbarPosition": "floating"}'></div>

Basic Usage

HTML Structure

<!DOCTYPE html>
<html>
<head>
  <title>PPTX Editor Demo</title>
</head>
<body>
  <div id="toolbar-container"></div>
  <div id="my-editor" contenteditable="true" style="min-height: 400px; border: 1px solid #ccc; padding: 20px;">
    <p>Start editing here...</p>
  </div>

  <script type="module">
    import PPTXEditorControls from 'pptx-editor-controls';
    
    const editor = new PPTXEditorControls({
      targetSelector: '#my-editor',
      toolbarContainer: '#toolbar-container',
      onChange: (html, element) => {
        console.log('Content changed:', html);
      }
    });
  </script>
</body>
</html>

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | targetSelector | string | '.editable-content, [contenteditable="true"]' | CSS selector for editable elements | | toolbarContainer | string \| HTMLElement \| null | null | Container for the toolbar (defaults to document.body) | | autoMount | boolean | true | Auto-initialize on construction | | showToolbar | boolean | true | Show the built-in toolbar | | toolbarPosition | 'top' \| 'floating' | 'top' | Toolbar position | | onChange | function | null | Callback when content changes | | onFormatChange | function | null | Callback when formatting changes | | onShapeInsert | function | null | Callback when a shape is inserted | | onImageInsert | function | null | Callback when an image is inserted | | theme | object | See below | Custom theme colors |

Theme Options

const editor = new PPTXEditorControls({
  theme: {
    primary: '#ff6b35',      // Accent color (active tabs, selections)
    background: '#2d2d2d',   // Main toolbar background
    backgroundDark: '#1a1a1a', // Input backgrounds
    border: '#555',          // Border color
    text: '#ffffff',         // Primary text color
    textMuted: '#999999'     // Secondary text color
  }
});

API Reference

Constructor

const editor = new PPTXEditorControls(options);

Methods

`init()`

Manually initialize if autoMount is false.

const editor = new PPTXEditorControls({ autoMount: false });
// ... later
editor.init();

`switchTab(tabName)`

Switch to a specific tab: 'home', 'insert', 'shape', or 'image'.

editor.switchTab('insert');

`executeCommand(command, value?)`

Execute a formatting command.

editor.executeCommand('bold');
editor.executeCommand('fontName', 'Georgia');
editor.executeCommand('foreColor', '#ff0000');

Available commands:

undo, redo
bold, italic, underline, strikethrough
alignLeft, alignCenter, alignRight
bulletList, numberList
fontName, fontSize, foreColor, backColor

`insertShape(type)`

Insert a shape. Types: 'rectangle', 'circle', 'triangle', 'line', 'arrow'.

editor.insertShape('circle');

`insertTextBox()`

Insert a new text box.

editor.insertTextBox();

Formatting Shortcuts

editor.bold();           // Toggle bold
editor.italic();         // Toggle italic
editor.underline();      // Toggle underline
editor.setFont('Arial'); // Set font family
editor.setFontSize(24);  // Set font size
editor.setTextColor('#ff0000');      // Set text color
editor.setHighlightColor('#ffff00'); // Set highlight color

`getContent()`

Get HTML content from all editable elements.

const contentArray = editor.getContent();
console.log(contentArray[0]); // First element's HTML

`setContent(html, targetElement?)`

Set HTML content.

editor.setContent('<p><strong>New content</strong></p>');

Shape Formatting

editor.selectShape(shapeElement);      // Select a shape
editor.changeShapeFill('#00ff00');     // Change fill color
editor.changeShapeOutline('#000000');  // Change outline color
editor.changeShapeOutlineWidth(3);     // Change outline width
editor.rotateShape(45);                // Rotate by degrees

Image Formatting

editor.selectImage(imageElement);      // Select an image
editor.adjustImageBrightness(120);     // Adjust brightness (0-200)
editor.adjustImageContrast(110);       // Adjust contrast (0-200)
editor.replaceImage(file);             // Replace with new file

`destroy()`

Clean up and remove the toolbar.

editor.destroy();

React Integration

import React, { useEffect, useRef } from 'react';
import PPTXEditorControls from 'pptx-editor-controls';

function Editor() {
  const editorRef = useRef(null);
  const controlsRef = useRef(null);

  useEffect(() => {
    controlsRef.current = new PPTXEditorControls({
      targetSelector: '#react-editor',
      toolbarContainer: '#react-toolbar',
      onChange: (html) => {
        console.log('Content updated:', html);
      }
    });

    return () => {
      controlsRef.current?.destroy();
    };
  }, []);

  return (
    <div>
      <div id="react-toolbar"></div>
      <div
        id="react-editor"
        ref={editorRef}
        contentEditable
        style={{ minHeight: '300px', border: '1px solid #ccc', padding: '15px' }}
      />
    </div>
  );
}

export default Editor;

Vue Integration

<template>
  <div>
    <div ref="toolbar"></div>
    <div
      ref="editor"
      contenteditable="true"
      style="min-height: 300px; border: 1px solid #ccc; padding: 15px;"
    ></div>
  </div>
</template>

<script>
import PPTXEditorControls from 'pptx-editor-controls';

export default {
  data() {
    return {
      editorControls: null
    };
  },
  mounted() {
    this.editorControls = new PPTXEditorControls({
      targetSelector: this.$refs.editor,
      toolbarContainer: this.$refs.toolbar,
      onChange: (html) => {
        this.$emit('content-change', html);
      }
    });
  },
  beforeUnmount() {
    this.editorControls?.destroy();
  }
};
</script>

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

License

Contributing

Contributions are welcome! Please read our Contributing Guide for details.

Support

📧 Email: [email protected]
🐛 Issues: GitHub Issues
📖 Docs: Full Documentation