# for-editor-plus

> react markdown editor

Latest version **0.3.17** (published 2023-05-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install for-editor-plus
pnpm add for-editor-plus
yarn add for-editor-plus
bun add for-editor-plus
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.17 |
| Published | 2023-05-04 |
| First published | 2023-04-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 158.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 397 |
| Author | niantuo |
| Maintainers | tuonina |
| Keywords | javascript, react, markdown, editor |

## Links

- npm: https://www.npmjs.com/package/for-editor-plus
- Repository: https://github.com/kkfor/for-editor
- Homepage: https://github.com/niantuo/for-editor#readme
- Issues: https://github.com/niantuo/for-editor/issues
- npm.io page: https://npm.io/package/for-editor-plus

## Dependencies (3)

- [marked](https://npm.io/package/marked.md) ^5.0.0
- [highlight.js](https://npm.io/package/highlight.js.md) ^9.13.1
- [@types/marked](https://npm.io/package/@types/marked.md) ^4.3.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.3.17 (latest) — 2023-05-04
- 0.3.16 — 2023-05-04
- 0.3.15 — 2023-05-04
- 0.3.12 — 2023-05-04
- 0.3.11 — 2023-04-28
- 0.3.10 — 2023-04-28
- 0.3.9 — 2023-04-28
- 0.3.8 — 2023-04-28
- 0.3.7 — 2023-04-28
- 0.3.6 — 2023-04-28

## README

# for-editor

> for-editor 是一个基于 react 的 markdown 语法编辑器
>
> fork from [kkfor/for-editor](https://github.com/kkfor/for-editor)
> 
> 在基础上增加一些灵活性，比如可添加自定义的toolbar

### [English Documents](./README.EN.md)

- [demo](https://md.kkfor.com)
- [github](https://github.com/kkfor/for-editor)

### 安装

```js
npm install for-editor-plus -S
```

### 使用

```js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Editor from 'for-editor-plus'

class App extends Component {
  constructor() {
    super()
    this.state = {
      value: ''
    }
  }

  handleChange(value) {
    this.setState({
      value
    })
  }

  render() {
    const { value } = this.state
    return <Editor value={value} onChange={() => this.handleChange()} />
  }
}

ReactDOM.render(<App />, document.getElementById('root'))
```

### Api

#### 属性

| name        | type    | default     | description                        |
| ----------- | ------- | ----------- | ---------------------------------- |
| value       | String  | -           | 输入框内容                         |
| placeholder | String  | 开始编辑... | 占位文本                           |
| lineNum     | Boolean | true        | 是否显示行号                       |
| style       | Object  | -           | 编辑器样式                         |
| height      | String  | 600px       | 编辑器高度                         |
| preview     | Boolean | false       | 预览模式                           |
| expand      | Boolean | false       | 全屏模式                           |
| subfield    | Boolean | false       | 双栏模式(预览模式激活下有效)       |
| language    | String  | zh-CN       | 语言(支持 zh-CN:中文简体, en:英文) |
| toolbar     | Object  | 如下        | 自定义工具栏                       |

```js
/*
  默认工具栏按钮全部开启, 传入自定义对象
  例如: {
    h1: true, // h1
    code: true, // 代码块
    preview: true, // 预览
  }
  此时, 仅仅显示此三个功能键
  注:传入空对象则不显示工具栏
 */

toolbar: {
  h1: true, // h1
  h2: true, // h2
  h3: true, // h3
  h4: true, // h4
  img: true, // 图片
  link: true, // 链接
  code: true, // 代码块
  preview: true, // 预览
  expand: true, // 全屏
  /* v0.0.9 */
  undo: true, // 撤销
  redo: true, // 重做
  save: true, // 保存
  /* v0.2.3 */
  subfield: true, // 单双栏模式
}
```

#### 事件

| name     | params 参数   | default | description    |
| -------- | ------------- | ------- | -------------- |
| onChange | String: value | -       | 内容改变时回调 |
| onSave   | String: value | -       | 保存时回调     |
| addImg   | File: file    | -       | 添加图片时回调 |

##### 图片上传

```js
class App extends Component {
  constructor() {
    super()
    this.state = {
      value: '',
    }
    this.$vm = React.createRef()
  }

  handleChange(value) {
    this.setState({
      value
    })
  }

  addImg($file) {
    this.$vm.current.$img2Url($file.name, 'file_url')
    console.log($file)
  }

  render() {
    const { value } = this.state

    return (
      <Editor
        ref={this.$vm}
        value={value}
        addImg={($file) => this.addImg($file)}
        onChange={value => this.handleChange(value)}
      />
    )
  }
}
```

### 预览
```jsx
let value = ``

return (
	<div
		ref={this.$scrollPreview}
		className="for-preview for-markdown-preview"
		dangerouslySetInnerHTML={{ __html: marked(value) }}
	/>
)
```

#### 快捷键

| name   | description  |
| ------ | ------------ |
| tab    | 两个空格缩进 |
| ctrl+s | 保存         |
| ctrl+z | 上一步       |
| ctrl+y | 下一步       |

### 更新

- [Update Log](./doc/UPDATELOG.md)

### Licence

for-editor is [MIT Licence](./LICENSE).

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