# kangxi-editor

> Another web-based rich text editor

Latest version **0.19.0** (published 2023-12-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install kangxi-editor
pnpm add kangxi-editor
yarn add kangxi-editor
bun add kangxi-editor
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.19.0 |
| Published | 2023-12-20 |
| First published | 2019-03-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10.0.0 |
| Dependencies | 12 |
| Unpacked size | 70.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Mgen |
| Maintainers | mgenware |
| Keywords | editor, richtext editor |

## Links

- npm: https://www.npmjs.com/package/kangxi-editor
- Repository: https://github.com/mgenware/kangxi-editor
- Issues: https://github.com/mgenware/kangxi-editor/issues
- npm.io page: https://npm.io/package/kangxi-editor

## Dependencies (12)

- [to-type-string](https://npm.io/package/to-type-string.md) ^2.0.0
- [prosemirror-view](https://npm.io/package/prosemirror-view.md) ^1.0.0
- [prosemirror-model](https://npm.io/package/prosemirror-model.md) ^1.0.0
- [prosemirror-state](https://npm.io/package/prosemirror-state.md) ^1.0.0
- [prosemirror-keymap](https://npm.io/package/prosemirror-keymap.md) ^1.0.0
- [throw-if-arg-empty](https://npm.io/package/throw-if-arg-empty.md) ^3.1.0
- [prosemirror-history](https://npm.io/package/prosemirror-history.md) ^1.0.0
- [prosemirror-commands](https://npm.io/package/prosemirror-commands.md) ^1.0.0
- [prosemirror-gapcursor](https://npm.io/package/prosemirror-gapcursor.md) ^1.0.0
- [prosemirror-dropcursor](https://npm.io/package/prosemirror-dropcursor.md) ^1.0.0
- [prosemirror-inputrules](https://npm.io/package/prosemirror-inputrules.md) ^1.0.0
- [prosemirror-schema-list](https://npm.io/package/prosemirror-schema-list.md) ^1.0.0

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.19.0 (latest) — 2023-12-20
- 0.18.3 — 2023-05-25
- 0.18.2 — 2023-05-24
- 0.18.1 — 2023-05-24
- 0.18.0 — 2023-05-12
- 0.17.0 — 2023-05-09
- 0.16.0 — 2023-05-08
- 0.15.0 — 2022-08-16
- 0.14.2 — 2021-07-24
- 0.14.1 — 2021-07-10
- 0.14.0 — 2021-07-10
- 0.13.2 — 2021-06-25
- 0.13.1 — 2021-06-25
- 0.13.0 — 2021-06-12
- 0.12.0 — 2021-06-08
- … 25 more at https://npm.io/package/kangxi-editor/versions

## README

# kangxi-editor

[![Build Status](https://github.com/mgenware/kangxi-editor/workflows/Build/badge.svg)](https://github.com/mgenware/kangxi-editor/actions)
[![Pages Status](https://github.com/mgenware/kangxi-editor/workflows/Pages/badge.svg)](https://github.com/mgenware/kangxi-editor/actions)
[![npm version](https://img.shields.io/npm/v/kangxi-editor.svg?style=flat-square)](https://npmjs.com/package/kangxi-editor)

Another web-based rich text editor.

## Demo

[Demo](https://mgenware.github.io/kangxi-editor/)

## Installation

```sh
npm add kangxi-editor
```

## Usage

### Example

- Clone or download this repo
- Build the project `npm i && npm run r build`
- Run the example in browser `npm run r serve`

### API

```js
class Editor {
  // The underlying ProseMirror editor view.
  view: EditorView;
  // The underlying ProseMirror document schema.
  schema: Schema;
  // The underlying ProseMirror plugin array mounted.
  plugins: Plugin[];
  // The HTML element where editor is mounted.
  rootElement: HTMLElement;
  // The HTML element where editor toolbar is mounted.
  toolbarElement: HTMLElement;
  // The HTML element where editor content area is mounted.
  contentElement: HTMLElement;
  // Fires when editor content changes.
  contentChanged?: (sender: Editor) => void;

  // Creates a new editor.
  //  * `src`: HTML element or a query selector to mount the editor.
  //  * `opt`: Options [see details below].
  constructor(src: string | HTMLElement, opt?: Options): Editor;

  // Gets the inner HTML of the editor.
  contentHTML(): string;
  // Gets the text content of the editor.
  contentText(): string;
  // Sets the inner HTML of the editor.
  // Unlike `resetContentHTML`, this can be reverted by undo.
  setContentHTML(html: string);
  // Resets the inner HTML of the editor.
  // Unlike `setContentHTML`, this clears undo history.
  resetContentHTML(html: string);
}

// Options
interface Options {
  // Initial content HTML upon creation.
  contentHTML?: string;
  // Localized strings. See `./dist/lang.d.ts` for definition.
  lang?: Lang;
}
```

### CSS Variables

```
--kx-back-color
--kx-fore-color
--kx-toolbar-separator-color
```

---
_Source: https://npm.io/package/kangxi-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._