1. 安装

$ sudo npm install mditor

2. 引入文件

<link rel="stylesheet" href="your-path/dist/css/mditor.min.css" />
<script src="your-path/dist/js/mditor.min.js"></script>

3. 选定文本框元素，初始化编辑器

<textarea name="editor" id="editor"></textarea>

<script>
    var mditor =  Mditor.fromTextarea(document.getElementById('editor'));
    //获取或设置编辑器的值
    mditor.on('ready',function(){
        mditor.value = '** hello **';
        /*模式控制 API:*/
        //是否打开分屏
        mditor.split = true;    //打开
        mditor.split = false;   //关闭

        //是否打开预览
        mditor.preivew = true;  //打开
        mditor.preivew = false; //关闭

        //是否全屏
        mditor.fullscreen = true;       //打开
        mditor.fullscreen = false;  //关闭

        /*工具条配置 API*/
        //mditor.toolbar.items 是一个数组，包括所有按钮的信息
        //可以直接操作 items 以控制工具条

        //只保留第一个按钮
        mditor.toolbar.items = mditor.toolbar.items.slice(0,1);
        //添加一个按钮
        mditor.toolbar.addItem({...});
        //移除一个按钮
        mditor.toolbar.removeItem(name);
        //替换一个按钮
        mditor.toolbar.replaceItem(name, {...});
        //获取一个按钮
        mditor.toolbar.getItem(name);

        //更改按钮行为
        //示例，更改「图片」按钮配置，其它按钮是同样的方法
        let btn = mditor.toolbar.getItem('image');
        //替换按钮动作
        btn.handler = function(){
        //自定义处理逻辑
        //this 指向当前 mditor 实例
        };

        //还可以替换其它信息
        btn.icon = '...';   //设置按钮图标
        btn.title = '...';  //投置按钮标题
        btn.control = true; //作为控制按钮显示在右侧
        btn.key = 'ctrl+d'; //设置按钮快捷建

        /*文本编辑 API*/
        //编辑器相关 API 在 mditor.editor 对象上
        //在光标前插入文本
        mditor.editor.insertBeforeText('文本');
        //在光标后插入文本
        mditor.editor.insertAfterText('文本');
    });
</script>

4. 服务端渲染编辑器内容

Marked 插件包

[图片上传失败...(image-971e6d-1561904871235)]

$ sudo npm install marked

const marked = require('marked');
const content = marked(editorStr);