erixeditor

v0.0.6

Published

2 months ago

A rich text editor component with built-in toolbar and plugin system

0High
0Medium
0Low

editor wysiwyg rich-text html richtext text javascript typescript stencil web-component react angular vue prosemirror word-import docx

Erix Editor

A powerful, lightweight rich text editor web component with built-in toolbar and plugin system. Built with Stencil and ProseMirror.

Features

Rich Text Editing – Full WYSIWYG editing experience
Framework Agnostic – Works with React, Vue, Angular, or vanilla JS
DOCX Import – Import Microsoft Word documents directly
Built-in Toolbar – Customizable formatting toolbar
Plugin System – Extend functionality with plugins
Lightweight – Lazy-loaded components for optimal performance
Print Support – Theme-agnostic printing
Theme Support – Light and dark themes

Installation

npm install erixeditor

yarn add erixeditor

pnpm add erixeditor

Quick Start

Using npm/bundler

<erix-editor id="editor"></erix-editor>

<script type="module">
  import 'erixeditor';

  const editor = document.querySelector('#editor');

  editor.config = {
    toolbar: {
      items: ['undo', 'redo', 'bold', 'italic', 'underline', 'bullet-list'],
    },
    theme: 'light',
    placeholder: 'Start typing...',
  };
</script>

Using CDN

<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="https://unpkg.com/erixeditor@latest/dist/erixeditor/erixeditor.esm.js"></script>
  </head>
  <body>
    <erix-editor id="editor"></erix-editor>

    <script type="module">
      const editor = document.querySelector('#editor');

      editor.config = {
        toolbar: {
          items: ['undo', 'redo', 'bold', 'italic', 'underline'],
        },
        theme: 'light',
      };

      editor.addEventListener('erix-ready', e => {
        const api = e.detail.api;
        api.setContent('<p>Hello World!</p>', 'html');
      });
    </script>
  </body>
</html>

Framework Integration

React

import { defineCustomElements } from 'erixeditor/loader';

// Define custom elements
defineCustomElements();

function App() {
  const handleReady = (event: any) => {
    const api = event.detail.api;
    api.setContent('<p>Hello React!</p>', 'html');
  };

  return (
    <erix-editor
      config={{
        toolbar: { items: ['undo', 'redo', 'bold', 'italic'] },
        theme: 'light',
      }}
      onerix-ready={handleReady}
    />
  );
}

TypeScript Setup

Create src/erix-editor.d.ts to properly type the custom element:

import 'react';

declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
      'erix-editor': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
        'config'?: any;
        'content'?: string;
        'theme'?: 'light' | 'dark' | string;
        'onerix-ready'?: (event: any) => void;
        'onerix-content-change'?: (event: any) => void;
        'onerix-selection-change'?: (event: any) => void;
        'onerix-focus'?: (event: any) => void;
        'onerix-blur'?: (event: any) => void;
      };
    }
  }
}

Angular

Use the Stencil loader with Angular's CUSTOM_ELEMENTS_SCHEMA for reliable integration:

// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

// Import and define Stencil custom elements
import { defineCustomElements } from 'erixeditor/loader';
defineCustomElements();

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Required for web components
})
export class AppModule {}

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

@Component({
  selector: 'app-root',
  template: ` <erix-editor [config]="editorConfig" (erix-ready)="onReady($event)" (erix-content-change)="onContentChange($event)"> </erix-editor> `,
})
export class AppComponent {
  editorConfig = {
    toolbar: { items: ['undo', 'redo', 'bold', 'italic', 'underline'] },
    theme: 'light',
  };

  onReady(event: any) {
    const api = event.detail.api;
    api.setContent('<p>Hello Angular!</p>', 'html');
  }

  onContentChange(event: any) {
    console.log('Content changed:', event.detail.content);
  }
}

Vue

<script setup>
import { defineCustomElements } from 'erixeditor/loader';

// Define custom elements
defineCustomElements();

const editorConfig = {
  toolbar: { items: ['undo', 'redo', 'bold', 'italic', 'bullet-list'] },
  theme: 'light',
};

function onReady(event) {
  const api = event.detail.api;
  api.setContent('<p>Hello Vue!</p>', 'html');
}
</script>

<template>
  <erix-editor :config="editorConfig" @erix-ready="onReady" />
</template>

Note: Configure compilerOptions.isCustomElement in your vite.config.js to avoid warnings.

Package Exports

| Export Path | Description | | ------------------- | ---------------------- | | erixeditor | Main entry (ESM/CJS) | | erixeditor/loader | Custom elements loader |

Documentation

For complete API reference, configuration options, and advanced usage examples, see the Full Integration Guide.

Contributing

Erix Editor is now open source! We welcome contributions from everyone. Whether you're fixing a bug, adding a feature, or improving documentation, your help is appreciated.

How to contribute:

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

For discussions and community support, join our Discord Community.

Community

Get help and support
Share feedback and feature requests
Stay updated on new releases
Discuss contribution opportunities

License

Erix Editor is licensed under the MIT License. It is totally open source and free to use for personal and commercial projects.

Enterprise Users: While Erix Editor is free to use, we greatly appreciate a shout-out or support from enterprise users. If your company uses Erix Editor, let us know on Discord or mention us!

View Full License