# netnrmd

> Ace 编辑器 + Marked 解析 + DOMPurify 清洗 + highlight 代码高亮 + tocbot 目录 + pangu 间隙

Latest version **4.0.0** (published 2022-07-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install netnrmd
pnpm add netnrmd
yarn add netnrmd
bun add netnrmd
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2022-07-15 |
| First published | 2019-04-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 1.5 MB |
| Known vulnerabilities | 0 (+16 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 78 |
| Author | netnr |
| Maintainers | netnr |
| Keywords | markdown, marked |

## Links

- npm: https://www.npmjs.com/package/netnrmd
- Repository: https://github.com/netnr/np
- Homepage: https://github.com/netnr/np#readme
- Issues: https://github.com/netnr/np/issues
- npm.io page: https://npm.io/package/netnrmd

## Dependencies (6)

- [pangu](https://npm.io/package/pangu.md) ^4.0.7
- [marked](https://npm.io/package/marked.md) ^4.0.18
- [tocbot](https://npm.io/package/tocbot.md) ^4.18.2
- [dompurify](https://npm.io/package/dompurify.md) ^2.3.9
- [ace-builds](https://npm.io/package/ace-builds.md) ^1.7.1
- [highlight.js](https://npm.io/package/highlight.js.md) ^11.6.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 4.0.0 (latest) — 2022-07-15
- 3.0.3 — 2022-03-28
- 3.0.2 — 2021-11-07
- 3.0.0 — 2021-06-10
- 2.6.3 — 2021-03-16
- 2.6.2 — 2021-03-12
- 2.6.1 — 2021-01-21
- 2.6.0 — 2020-11-25
- 2.5.0 — 2020-10-10
- 2.4.1 — 2020-07-17
- 2.4.0 — 2020-07-17
- 2.2.3 — 2019-11-19
- 2.2.2 — 2019-10-31
- 2.2.1 — 2019-08-17
- 2.2.0 — 2019-08-17
- … 2 more at https://npm.io/package/netnrmd/versions

## README

# NetnrMD 编辑器
Ace 编辑器 + Marked 解析 + DOMPurify 清洗 + highlight 代码高亮 + tocbot 目录 + pangu 间隙

> <https://md.js.org>

### Usage 使用

<https://www.npmjs.com/package/netnrmd>

```html
<div class="nr-editor">Loading ...</div>

<link href="/dist/netnrmd.css" rel="stylesheet" />
<!-- or /dist/netnrmd.bundle.js -->
<script src="/dist/ace.js"></script>
<script src="/dist/netnrmd.js"></script>

<script>
    var nmd = netnrmd.init('.nr-editor');
</script>
```

### Options 选项

```js
var nmd = netnrmd.init('.nr-editor', {
    theme: 'auto', // 主题 light, dark, auto (自动)
    ph: '预览区域', // 预览区域提示
    toc: true, // 是否显示目录
    viewmodel: 2, // 视图：1 输入，2 分屏，3 预览
    fullscreen: 0, // 1 全屏，0 窗口
    fontsize: 16, // 编辑器字体大小
    height: 300, // 高度
    defer: 500, // 延迟解析（毫秒）
    headerIds: function (node, index) { node.id = "toc_" + index }, // 目录ID，true 默认ID
    autosave: true, // 默认有变化自动保存
    storekey: `${location.pathname}_netnrmd_content`, // 自动保存键，一个页面有多个编辑器时需要对应配置

    // 编辑器变动时回调
    input: function () {
        console.log(this.getmd());
    },

	// 触发命令回调
    cmdcallback: function (cmd) {
        console.log(this);
    },

    // 调整高度
    resize: function (ch) {
        this.height(ch - 20);
    } 
});
```

### Function 方法

```js
var nmd = netnrmd.init('.nr-editor');
console.log(nmd);

nmd.setmd(md);          //set markdown 赋值
nmd.getmd();            //get markdown 取值
nmd.sethtml(html);      //set html 赋值
nmd.gethtml();          //get html 取值

nmd.render();           //render 渲染
nmd.focus();            //focus 焦点选中
nmd.insert("text");     //insert 插入文本
nmd.height(300);        //set height 设置高度

nmd.toggleView();       //toggle View 视图切换，默认 2、1、3 循环
nmd.toggleView(1);      //输入
nmd.toggleView(2);      //分屏
nmd.toggleView(3);      //预览

nmd.toggleTheme();         //切换主题
nmd.toggleTheme("light");  //浅色主题
nmd.toggleTheme("dark");   //暗黑主题 <html class="netnrmd-dark">
nmd.toggleTheme("auto");   //系统主题

nmd.hide();             //hide 隐藏
nmd.hide('toolbar');    //hide 工具条
nmd.show();             //show 显示
nmd.show('toolbar');    //show 工具条

nmd.setstore();         //set store 写入本地保存
nmd.getstore();         //get store 获取本地保存

nmd.objOptions          //配置选项
nmd.objWrite            //编辑器对象，更多信息参考 ace 文档
nmd.objWrite.getValue() //获取编辑器值

nmd.save(format, filename) //保存 (markdown html word png pdf)
nmd.addCommand("Ctrl+S", () => { /* save */ }) //快捷键

//全局对象
netnrmd.render(md)      // 解析 Markdown, 清洗+高亮
netnrmd.spacing(text)   // 文字、数字、符号、英文添加空格间隙
netnrmd.popup(title, content)   // 弹出层（emoji、about）
netnrmd.emoji           // 表情包
netnrmd.hljs            // 高亮组件
netnrmd.DOMPurify       // 清洗组件
netnrmd.marked          // markdown 组件
```

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