分享一个 markdown 编辑器 - Mditor

只求极致

[ M ] arkdown + E [ ditor ] = Mditor

Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器，仅此而已...

支持浏览器: chrome/safari/firefox/ie9+

Git Repo: https://github.com/Houfeng/mditor

在线体验

在线 demo

在浏览器集成 Mditor

第一步:

引入 Mditor 样式文件

<link rel="stylesheet" href="../build/css/mditor.min.css" />

引用 Mditor 脚本文件

<script src="../build/js/mditor.min.js"></script>

第二步:

添加 textarea 元素

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

创建 Mditor 实例

var mditor = Mditor.fromTextarea(document.getElementById('editor')); //获取或设置编辑器的值 console.log(mditor.value); mditor.value = '** hello **';

其它 API:

//是否打开分屏 mditor.split = true; //打开 mditor.split = false; //关闭 //是否打开预览 mditor.preivew = true; //打开 mditor.preivew = false; //关闭 //是否全屏 mditor.fullscreen = true; //打开 mditor.fullscreen = false; //关闭 //配置工具条按钮 //mditor.toolbar.items 是一个数组，包括所有按钮的信息 //可以直接操作 items 以控制工具条 //只保留第一个按钮 mditor.toolbar.items = mditor.toolbar.items.slice(0,1); //更改指定按钮配置 let btn = mditor.toolbar.items[0]; btn.icon = '...'; //设置按钮图标 btn.title = '...'; //投置按钮标题 btn.control = true; //作为控制按钮显示在右侧 btn.key = 'ctrl+d'; //设置按钮快捷建 //替换按钮动作 btn.handler = function(){ //自定义处理逻辑 //this 指向当前 mditor 实例 }; //编辑器常用 API //编辑器相关 AIP 在 mditor.editor 对象上 //在光标前插入文本 mditor.editor.insertBeforeText('文本'); //在光标后插入文本 mditor.editor.insertAfterText('文本');

在服务器渲染 Markdown

通过 npm 安装

npm install mditor -save

在服务端解析

var mditor = require("mditor"); var parser = new mditor.Parser(); var html = parser.parse("** Hello mditor! **");

在页中展示解析后内容

... <!--引用样式--> <link rel="stylesheet" href="../build/css/mditor.min.css" /> ... <div class="markdown-body"> <!--这里是解析后的内容--> </div>

-end-