# ksv-wysiwyg

> Demo: https://scd7896.github.io/wysiwyg/example/ .

Latest version **1.0.1** (published 2022-05-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install ksv-wysiwyg
pnpm add ksv-wysiwyg
yarn add ksv-wysiwyg
bun add ksv-wysiwyg
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-05-19 |
| First published | 2022-05-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 178.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | kimserver |

## Links

- npm: https://www.npmjs.com/package/ksv-wysiwyg
- npm.io page: https://npm.io/package/ksv-wysiwyg

## Recent versions

- 1.0.1 (latest) — 2022-05-19
- 1.0.0 — 2022-05-19

## README

# WYSIWYG

Demo: https://scd7896.github.io/wysiwyg/example/  
<img width="434" alt="스크린샷 2022-05-18 오후 10 02 30" src="https://user-images.githubusercontent.com/46440142/169278109-d9b1a764-cc07-4ea9-b6ac-41817334b0ac.png">. 


## Example

```javascript
const wysiwyg = new WYSIWYG("#root", {
  image: {
    onUploadSingle: async (file: File) => {
      const url = URL.createObjectURL(file);

      return url;
    },
  },
});

wysiwyg.on("text:change", (value: string) => {
  console.log(value);
});

const insertWantElement = document.createElement("div");
insertWantElement = "test Element";
wysiwyg.insertNode(insertWantElement);
```

## WYSIWYG

```typescript
class WYSIWYG {
  undo: () => void;
  redo: () => void;
  insertNode: (element: HTMLElement) => void;
  setRangeStyle: (style: Record<string, string>) => void;
  on: (type: string, listener: Function) => void;
  emit: (type: string, ...args: any[]) => void;
  removeListener: (type: string, listener: Function) => void;
  undoHistory: IDiff[][];
  redoHistory: IDiff[][];
}

interface IDiff {
  line: number;
  value: string;
  type: "insert" | "delete";
}
```

## Event

| name        | function               | description                                |
| ----------- | ---------------------- | ------------------------------------------ |
| text:change | (text: string) => void | board의 내용이 변경 될 때 마다 실행됩니다. |

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