# fo-editor

> > TODO: description

Latest version **0.3.27** (published 2026-08-25) · ISC license · 0 weekly downloads

## Install

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

## Health

**Score 70/100 (B)** — status: active.

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

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.3.27 |
| Published | 2026-08-25 |
| First published | 2023-12-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 146.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | fo.editor |
| Maintainers | fo.editor |

## Links

- npm: https://www.npmjs.com/package/fo-editor
- npm.io page: https://npm.io/package/fo-editor

## Dependencies (1)

- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21

## Recent versions

- 0.3.27 (latest) — 2026-08-25
- 0.3.25 — 2026-08-24
- 0.3.24 — 2026-08-18
- 0.3.23 — 2026-01-04
- 0.3.22 — 2026-01-04
- 0.3.17 — 2025-09-02
- 0.3.16 — 2025-07-20
- 0.3.15 — 2025-07-17
- 0.3.14 — 2025-06-15
- 0.3.13 — 2025-05-10
- 0.3.12 — 2025-04-21
- 0.3.11 — 2025-03-06
- 0.3.10 — 2025-02-25
- 0.3.9 — 2024-12-15
- 0.3.8 — 2024-11-07
- … 46 more at https://npm.io/package/fo-editor/versions

## README

# `fo-editor`

## 使用说明

最新文档请移步[官方地址](https://www.tlzzu.com/)

### 常规用法：

```ts
import { createFoEditor, defaultConfig } from 'fo-editor';

const foEditor = createFoEditor({
  dom: document.querySelector('#editor'), // HTMLElement 需要将编辑器渲染到的具体节点
  /** 编辑器模式 */
  mode: 'design',
  /** 分页模式 */
  pageMode: 'none',
  /** 初始化默认值 */
  defaultValue: jsonValue,
  onChange: (change) => {
    console.log('fo editor change:', change);
  },
  ready: () => {
    console.log('fo editor ready!');
  },
  onError: (err) => {
    console.error('fo editor error', err);
  },
  onChange: ({ docChanged: boolean }) => {
    console.log('event:change', docChanged);
  },
  onClick: () => {
    console.log('event:click');
  },
  onDblClick: () => {
    console.log('event:dblclick');
  },
  onBlur: () => {
    console.log('event:blur');
  },
  onFocus: () => {
    console.log('event:focus');
  },
  /** 未设置就取默认值 defaultConfig */
  config: defaultConfig,
});

// 打印当前值
console.log(foEditor.toValue());

// mark: 卸载时需要执行 destroy
foEditor.destroy();
```

### React

详见 [fo-editor-react](https://www.npmjs.com/package/fo-editor-react)

### Vue3

详见 [fo-editor-vue](https://www.npmjs.com/package/fo-editor-vue)

### Vue2

类似原生用法，简单实例如下：

```js
<template>
  <div ref="myDiv">Hello, World!</div>
</template>

<script>
import { createFoEditor, defaultConfig } from 'fo-editor';

let foEditor;
export default {
  beforeDestroy(){
    if (foEditor) {
      // 卸载需执行 destroy
      foEditor.destroy();
    }
  },
  mounted() {
    foEditor = createFoEditor({
      dom: this.$refs.myDiv, // HTMLElement 需要将编辑器渲染到的具体节点
      /** 编辑器模式 */
      mode: 'design',
      /** 分页模式 */
      pageMode: 'none',
      /** 初始化默认值 */
      defaultValue: jsonValue,
      // 以下为可选属性
      /** 未设置就取默认值 defaultConfig */
      config: defaultConfig,
      onChange: (change) => {
        console.log('fo editor change:', change);
      },
      ready: () => {
        console.log('fo editor ready!');
      },
      onError: (err) => {
        console.error('fo editor error', err);
      },
      onChange: ({ docChanged: boolean }) => {
        console.log('event:change', docChanged);
      },
      onClick: () => {
        console.log('event:click');
      },
      onDblClick: () => {
        console.log('event:dblclick');
      },
      onBlur: () => {
        console.log('event:blur');
      },
      onFocus: () => {
        console.log('event:focus');
      },
    });
  }
}
</script>
```

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