ray-editor

KO | EN

gitlite — search

#javascript #react #go #golang #rust #docker #nodejs #windows #awesome #vue #security #ios #mcp #open-source

(★ 18)

This is a lightweight, extensible, and user-friendly content editor built with pure JavaScript. It supports rich text editing, inline code, code blocks with syntax styling, tooltips, and a fully integrated emoji picker.

ray-editor 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# RayEditor

> Lightweight, dependency-free WYSIWYG rich text editor — free alternative to TinyMCE & CKEditor.

[![npm version](https://img.shields.io/npm/v/@rohanyeole/ray-editor.svg)](https://www.npmjs.com/package/@rohanyeole/ray-editor)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://raw.githubusercontent.com/yeole-rohan/ray-editor/main/LICENSE)
[![Bundle Size](https://img.shields.io/badge/bundle-~45KB-blue)](https://bundlephobia.com/package/@rohanyeole/ray-editor)

**[Live Demo & Docs](https://ray-editor.rohanyeole.com)** · **[Issues](https://github.com/yeole-rohan/ray-editor/issues)** · **[npm](https://www.npmjs.com/package/@rohanyeole/ray-editor)**

![RayEditor preview](https://github.com/user-attachments/assets/d9f38163-fdfa-4f57-9d16-1234e6d78b7c)

Zero dependencies · TypeScript · MIT · React / Vue / Angular / Svelte wrappers · ~45 KB min+gzip

---

## Install

```bash
npm install @rohanyeole/ray-editor
```

```js
import { RayEditor } from '@rohanyeole/ray-editor';
import '@rohanyeole/ray-editor/css';

const editor = new RayEditor('editor', { theme: 'light' });
```

### CDN

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rohanyeole/ray-editor@2/dist/ray-editor.css">
<script src="https://cdn.jsdelivr.net/npm/@rohanyeole/ray-editor@2/dist/ray-editor.umd.min.js"></script>

<div id="editor"></div>
<script>
  const editor = new RayEditor.RayEditor('editor', { theme: 'light' });
</script>
```

---

## Basic Usage

```js
const editor = new RayEditor('editor', {
  theme: 'light',            // 'light' | 'dark' | 'auto'
  wordCount: true,
  onChange: (html) => console.log(html),
  toolbar: [
    ['bold', 'italic', 'underline'],
    ['headings', 'blockquote'],
    ['link', 'imageUpload', 'table'],
    ['undo', 'redo'],
  ],
});

editor.getContent();           // → HTML string
editor.setContent('<p>Hi</p>');
editor.setTheme('dark');
editor.setReadOnly(true);
editor.destroy();
```

---

## Features

- Bold, italic, underline, strikethrough, superscript, subscript, highlight
- Headings (H1–H6), blockquote, horizontal rule
- Ordered / unordered lists, indent / outdent, text alignment
- Font size picker, font family, text color, background color
- Tables (insert, resize columns/rows, add/remove rows & cols, floating toolbar)
- Links (insert, edit, remove, hover tooltip, new-tab toggle)
- Image upload (8-direction resize handles, alt / title / caption editor)
- File upload with inline preview (image / video / audio / download link)
- Code blocks with syntax highlighting (highlight.js) + inline code
- Task lists (interactive checkboxes, keyboard navigation)
- Callout blocks (Info / Warning / Success / Error / Tip / Note / Important / Caution)
- Emoji picker (800+ emojis, search, recently used)
- Special characters picker (90+ symbols)
- Date/time insertion
- Slash commands (/) — Notion-style command palette
- Markdown mode — bidirectional rich text ↔ Markdown
- Markdown shortcuts (**, ##, >, ---, etc.)
- Find & Replace (Ctrl+F / Ctrl+H)
- Dark mode + CSS variable theming
- Fullscreen, print, show HTML source, remove format
- Plugin API + custom slash commands
- Word count bar
- Spell check toggle
- Auto-save hook
- @Mentions
- Undo/redo (100-entry history)
- Paste normalisation (Word, Google Docs, GitHub, etc.)

**[Full documentation and live demo →](https://ray-editor.rohanyeole.com)**

---

## Framework Wrappers

Official, published wrapper packages for React, Vue 3, Angular, and Svelte — source lives
in [`packages/`](packages/), each with its own README covering full usage.

**React**
```bash
npm install @rohanyeole/ray-editor @rohanyeole/ray-editor-react
```
```tsx
import RayEditor from '@rohanyeole/ray-editor-react';

<RayEditor value={html} onChange={setHtml} options={{ theme: 'light' }} />
```

**Vue 3**
```bash
npm install @rohanyeole/ray-editor @rohanyeole/ray-editor-vue
```
```vue
<RayEditorVue v-model="content" :options="{ theme: 'light' }" />
```

**Angular** (standalone component, Angular 15+)
```bash
npm install @rohanyeole/ray-editor @rohanyeole/ray-editor-angular
```
```html
<ray-editor [(ngModel)]="content" [options]="editorOptions"></ray-editor>
```

**Svelte**
```bash
npm install @rohanyeole/ray-editor @rohanyeole/ray-editor-svelte
```
```svelte
<RayEditor bind:value={content} options={{ theme: 'light' }} />
```

See each package's README ([react](packages/react/README.md) · [vue](packages/vue/README.md) ·
[angular](packages/angular/README.md) · [svelte](packages/svelte/README.md)) for the full API,
including reactive-forms/two-way-binding patterns and accessing the underlying editor instance.

---

## Contributing

Requires **Node ≥ 20** (the `packages/*` framework wrappers build against current
Angular/Vite toolchains that need it — the core package alone is more lenient, but the
repo is set up as one npm workspace covering both).

```bash
git clone https://github.com/yeole-rohan/ray-editor
npm install          # installs the core package + all packages/* workspaces
npm run dev           # watch build (core)
npm test               # run tests (vitest + jsdom)
npm run test:e2e:chrome  # Playwright e2e
npm run build --workspace=packages/react   # build a specific wrapper (react/vue/angular/svelte)
```

Open an issue before starting work on large features so we can align on the design.
See [ROADMAP.md](ROADMAP.md) for tracked bugs and planned features.

---

## Security

See [SECURITY.md](SECURITY.md) for the vulnerability reporting process, integrator
best practices, and documented design decisions (including `setContent()` trust model
and upload MIME validation).

---

## License

ray-editor

ray-editor 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

ray-editor

ray-editor 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README