[ M ] arkdown + E [ ditor ] = Mditor
Clone or download
Pull request Compare This branch is 1 commit ahead, 5 commits behind Houfeng:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.idea
bin
dist
docs
lib
src
test
.babelrc
.eslintrc.yml
.gitignore
.npmignore
CHANGELOG.md
README.md
jasmine.json
karma.conf.js
package-lock.json
package.json
server.local.yml.rename
server.yml
webpack.config.js

README.md

只求极致

[ M ] arkdown + E [ ditor ] = Mditor

version

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

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

image

在线体验

在线 demo

使用桌面版

下载桌面版本 http://mditor.com/

在浏览器集成 Mditor

第一步:

引入 Mditor 样式文件

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

引用 Mditor 脚本文件

<script src="your-path/dist/js/mditor.min.js"></script>

当然,也可以使用 CDN 资源

...
<link rel="stylesheet" href="https://unpkg.com/mditor@1.0.5/dist/css/mditor.min.css" />
...
<script src="https://unpkg.com/mditor@1.0.5/dist/js/mditor.min.js"></script>
...
第二步:

添加 textarea 元素

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

创建 Mditor 实例

var mditor =  Mditor.fromTextarea(document.getElementById('editor'));

//获取或设置编辑器的值
mditor.on('ready',function(){
  console.log(mditor.value);
  mditor.value = '** hello **';	
});

所有 API 都应在 ready 事件中进行调用

模式控制 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('文本');
//其它,说明待补充
...

在服务器渲染 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="your-path/dist/css/mditor.min.css" />
...
<div class="markdown-body">
<!--这里是解析后的内容-->
</div>

-end-