README.md
C Markdown 编辑器
一款Markdown编辑器组件,支持使用markodwn语法来编写文档,同时支持图片上传等功能(当前版本仅支持单文件上传)
更新记录
v0.1
2021-06-07 v0.1 初版更新,支持功能:
- 自定义主题
- 单张图片/单个附件上传
- Markdown & Html 内容获取
使用
- 通过script标签引入
<script src="./markdown-editor.js"></script>
- 指定需要渲染的容器
<div id="app"></div>
- 初始化实例
new MdEditor({
...options
})
options
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
el | 编辑器渲染的容器 | String | "#app" |
themeOptions | 主题颜色配置 | Object | themeOptions |
canAttachFile | 是否可以上传图片 | Boolean | true |
placeholder | placeholder | String | "请输入内容" |
onChange | 获取编辑器markdown及html内容 | Function | function(res) {} 示例 |
onUpload | 上传文件钩子函数 | Function | function(file, callback) {} 示例 |
themeOptions
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
borderColor | 编辑器边框默认颜色 | String | "#dbdbdb" |
borderColorActive | 编辑器边框激活颜色 | String | "#409eff" |
textColor | 编辑器文字默认颜色 | String | "#303030" |
textColorActive | 编辑器文字激活颜色 | String | "#000" |
onChange
用于获取markdown内容及编译后的html内容
new MdEditor({
...,
onChange: function(res) {
console.log(res) // { text: "...", html: "..." }
}
})
onUpload
上传或粘贴文件时会触发此函数
new MdEditor({
...,
onUpload: function(file, callback) {
// do something with file
// ajax
// ...
// 得到图片的url
// 在callback函数中回传图片url,编辑器会将图片链接粘贴到内容里
callback(url)
}
})
Example
<div id="app"></div>
<script src="./markdown-editor.js"></script>
<script>
new MdEditor({
el: "#app", // required
themeOptions: {
borderColor: "#dbdbdb",
borderColorActive: "#409eff",
textColor: "#303030",
textColorActive: "#000"
},
canAttachFile: true,
placeholder: "请输入内容",
onChange: function(res) {
const { text, html } = res
// submit(text)
// render(html)
},
onUpload: function(file, callback) {
ajax.post('http://example.com', {
file: file
}).then(res=>{
callback(res.url)
})
}
});
</script>