Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

netnrmd

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

netnrmd

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

  • 4.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
6
decreased by-83.33%
Maintainers
1
Weekly downloads
 
Created
Source

NetnrMD 编辑器

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

https://md.js.org

Usage 使用

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

<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 选项

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 方法

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 组件

Keywords

FAQs

Package last updated on 15 Jul 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc