JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 34
  • Score
    100M100P100Q60812F
  • License MIT

Markdown Combinatorial editor | 组合编辑器,Monaco Editor 编辑器 + Marked 解析 + DOMPurify 清洗 + highlight 代码高亮

Package Exports

  • netnrmd

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (netnrmd) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

NetnrMD编辑器

jQuery + Monaco Editor 编辑器 + Marked 解析 + DOMPurify 清洗 + highlight 代码高亮

https://md.js.org

Install 安装

https://www.jsdelivr.com/package/npm/netnrmd

<div>
    <div id="editor">Loading ...</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/netnrmd@2.6.1/src/netnrmd.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/netnrmd@2.6.1/src/netnrmd.bundle.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.23.0/min/vs/loader.js"></script>

<script>
    require.config({
        paths: {
            vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.23.0/min/vs'
        },
        'vs/nls': { availableLanguages: { '*': 'zh-cn' } }
    });

    require(['vs/editor/editor.main'], function () {

        //初始化
        window.nmd = new netnrmd('#editor');
    });
</script>

Options 选项

var nmd = new netnrmd('#editor', {	
    viewmodel: 2,       //视图,1输入,2分屏,3预览,默认2
    fullscreen: 1,      //全屏
    fontsize: 16,       //编辑器字体大小
    height: 300,        //高度
    defer: 500,         //延迟解析(毫秒)
    storekey: "key",    //自动保存键,默认 {location.pathname}_netnrmd_markdown,一个页面有多netnrmd编辑器时需要对应配置
    autosave: true,     //默认有变化自动保存
    prefixkey: 'Ctrl+', //按键支持

    //渲染前回调
    viewbefore: function () {
        console.log(this);
    },

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

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

Function 方法

var nmd = new netnrmd('#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.height(200);        //set height 设置高度

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

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

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


netnrmd.render(md)      // 解析 Markdown
netnrmd.getSelectText(me)   //获取 Monaco Editor 选中文本,me => nmd.obj.me
netnrmd.insertAfterText(me, text)   // 在光标后插入文本
netnrmd.popup(title, content)   // 弹出层