简介

找了挺多markdown编辑器，发现太臃肿了，添加功能不是太方便(主要是看不懂那么高大上的代码)，没发现一个支持粘贴上传图片和拖拽的。索性自己搞一个。js代码足够简单，基本后端程序员都可以看懂。

目前功能

• 剪贴板粘贴上传图片（支持七牛云之类的远程上传）
• 拖拽上传文件
• 语法高亮

演示地址

• 编辑页面： https://dot2-com.gitee.io/dot2editor/

• 预览页面： https://dot2-com.gitee.io/dot2editor/view.html

项目地址

https://gitee.com/dot2-com/Dot2Editor

使用文档

Alt+1~6 对应 h1~h6

Alt+B 加粗选中的内容

Alt+I 插入图片（I表示img标签）

Alt+A 插入链接（A表示a标签）

Alt+H 插入横线（H表示hr标签）

Alt+L 插入线条（L表示Line,和hr的区别是，线条上方的文字会变成h2）

Alt+T 插入表格（T 表示Table）

开发者

** 注意 ** 需要在web环境下访问 index.html

创建编辑器

<div style="width:100%; height:100%;" id="editor">
    <textarea name="content" cols="30" rows="10"></textarea>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="./dot2.editor.js"></script>
<script>
	var editor = new Dot2Editor("#editor", {
		upload: {
			//上传地址
			url: "./upload.php",

			//自定义的文件提交的名称，后端根据这个获取文件
			name: "image",

			//自定义的键值对json，或者一个函数返回这样的json，通过post一起提交
			//配置函数的区别是，每次提交都会调用函数，如果参数值是每次都会变化的，就用函数，比如七牛上传的时候要获取token）
            //kvs: {
            //  k1: "v1",
            //  k2: "v2"
            //}
		}
	});

</script>

• 必须在引入 fanyi8editor.js 之前引入jquery
• textarea不是必须，如果你需要使用普通的post提交的话，就可以加上textarea，markdown内容会自动更新到textarea里面。textarea的初始值也会自动设置到编辑器。

编辑器公开函数

getMarkdown()

获取编辑器种的markdown内容

setMarkdown(markdownContent)

把内容设置到编辑器

getHtml()

获取编辑器解析后的html代码

markdown转html显示处理

请参考view.html的源代码

作者：刘荣飞 QQ:173126019