README.md
Awesome-Markdown-Editor
一款Markdown编辑器组件,支持使用markodwn语法来编写文档,同时支持图片上传等功能
地址:https://csdnimg.cn/release/markdown-editor/1.0.0/markdown-editor.js
更新记录
v1.0
2022-03-01 v1.0更新,添加功能:
- 修复link添加规则
- 添加pages流水线
v0.9
2021-11-11 v0.9更新,添加功能:
- 添加toc功能
v0.8
2021-09-03 v0.8更新,添加功能:
- 支持注册自定义工具栏按钮registerTools
- 支持用户选择链接展示形式(默认卡片)
- 添加标题快捷工具
- 支持上传附件
- 支持上传/插入视频
- 上传图片支持设定尺寸/对齐
- 优化首行缩进规则(代码块外最大支持缩进3个空格,4个空格为转换代码块语法)
- 修改onUpload方法onUpload
v0.7
2021-08-05 v0.7更新,添加功能:
- 支持@指定用户queryUserList
- 支持网址渲染成卡片样式renderLinks
- 优化标签过滤规则
- 添加disabled属性
v0.6
2021-07-19 v0.6更新,添加功能:
v0.5
2021-06-29 v0.5更新,添加功能:
- tab快捷键
- tabSize属性
- 代码风格配置
- toggleTab方法
- toggleFullScreen方法
v0.4
2021-06-23 v0.4更新,添加功能:
- throttle属性
- zIndex属性
- maxLength属性
- showWordLimit属性
- rows属性
- filePathRule属性
- onLoad事件
- onInput事件
- setValue方法
- getValue方法
- focus方法
- blur方法
- 移除canAttachFile属性
- 移除footer,工具栏添加上传文件按钮
- 全屏模式添加工具栏
v0.3
2021-06-17 v0.3更新,添加功能:
v0.2
2021-06-15 v0.2更新,添加功能:
v0.1
2021-06-07 v0.1 初版更新,支持功能:
- 自定义主题
- 单张图片/单个附件上传
- Markdown & Html 内容获取
使用
- 引入编辑器
- 通过script标签引入
<script src="./markdown-editor.js"></script>
- 通过es module引入
import MdEditor from './markdown-editor.js'
- 指定需要渲染的容器
<div id="app"></div>
- 初始化实例
new MdEditor({
...options
})
options
属性 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
el | 编辑器渲染的容器 | String | "#app" | |
value | 编辑器回显内容 | String | Number | "" | |
zIndex | 全屏模式的层级 | String | Number | 2000 | |
maxLength | 最大字数限制 | String | Number | 1000 | |
showWordLimit | 是否显示当前字数 | Boolean | false | |
rows | 编辑区行数 | String | Number | 6 | 'auto' |
height | 编辑器高度 | String | Number | ||
tabSize | tab键缩紧空格数 | String | Number | 2 | |
throttle | input事件的节流时间 | Number | 1000 | |
filePathRule | 图片链接的格式限制 | RegExp | 示例 | |
themeOptions | 主题颜色配置 | Object | themeOptions | |
toolsOptions | 顶部工具栏配置 | Object | toolsOptions | |
canPreview | 是否开启预览 | Boolean | true | |
disabled | 是否禁用 | Boolean | false | |
placeholder | placeholder | String | "请输入内容" | |
onLoad | 编辑器实例化 | Function | function(res) {} 示例 | |
onInput | 输入事件 | Function | function(res) {} 示例 | |
onFocus | 获取焦点事件 | Function | function(res) {} 示例 | |
onBlur | 失去焦点事件 | Function | function(res) {} 示例 | |
onChange | 获取编辑器markdown及html内容 | Function | function(res) {} 示例 | |
onUpload | 上传文件钩子函数 | Function | function(file, type, callback) {} 示例 | |
onsubmit | 快捷键函数 | Function | function(file, callback) {} 示例 | |
queryUserList | @用户列表查询函数 | Function | function(keyword), callback) {} 示例 | |
renderLinks | 把链接渲染成卡片样式 | Function | function(list)), callback) {} 示例 |
方法
方法 | 说明 | 类型 | 示例 |
---|---|---|---|
focus | 使编辑器获取焦点 | Function | focus |
blur | 使编辑器失去焦点 | Function | blur |
getValue | 获取编辑器的内容 | Function | getValue |
setValue | 设置编辑器的内容 | Function | setValue |
toggleTab | 切换编辑和预览tab | Function | toggleTab |
registerTools | 注册工具栏按钮 | Function(Object | Array) |
toggleFullScreen | 切换编辑器全屏模式 | Function | toggleFullScreen |
themeOptions
属性 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
dark | 夜间模式 | Boolean | false | |
borderColor | 编辑器边框默认颜色 | String | "#dbdbdb" | |
borderColorActive | 编辑器边框激活颜色 | String | "#409eff" | |
textColor | 编辑器文字默认颜色 | String | "#303030" | |
textColorActive | 编辑器文字激活颜色 | String | "#000" | |
codeTheme | 代码主题色配置 | String | "light" | 'light', 'dark', 'atom-one-dark' |
toolsOptions
属性 | 说明 | 类型 | 默认值 | 说明 |
---|---|---|---|---|
call | @关注的人 | Boolean | true | |
headline | 标题 | Boolean | true | |
bold | 加粗 | Boolean | true | |
italic | 斜体 | Boolean | true | |
quote | 引用 | Boolean | true | |
format | 格式刷 | Boolean | true | 支持标题、加粗、斜体、引用、代码块、无序列表、任务列表 |
code | 代码块 | Boolean | true | |
link | 链接 | Boolean | true | |
ul | 无序列表 | Boolean | true | |
ol | 有序列表 | Boolean | true | |
task | 任务列表 | Boolean | true | |
table | 表格 | Boolean | true | |
img | 图片 | Boolean | true | |
file | 附件 | Boolean | true | |
video | 视频 | Boolean | true | |
help | markdown语法 | Boolean | true | |
fullScreen | 全屏模式 | Boolean | true |
filePathRule
用于限制可上传文件的路径规则
new MdEditor({
...,
filePathRule: /^https:\/\/csdn\.net/
})
onInput/onChange事件中会返回invalidList[]列表,内容为不符合filePathRule规则的地址
onLoad
编辑器实例化后触发
new MdEditor({
...,
onLoad: function() {
console.log('ready') // { text: "...", html: "..." }
}
})
onFocus
编辑器获取焦点时触发
new MdEditor({
...,
onFocus: function(res) {
console.log(res) // { text: "...", html: "..." }
}
})
onBlur
编辑器失去焦点时触发
new MdEditor({
...,
onBlur: function(res) {
console.log(res) // { text: "...", html: "..." }
}
})
onInput
用于获取markdown内容及编译后的html内容
new MdEditor({
...,
onInput: function(res) {
console.log(res) // { text: "...", html: "..." }
}
})
onChange
用于获取markdown内容及编译后的html内容
new MdEditor({
...,
onChange: function(res) {
console.log(res) // { text: "...", html: "..." }
}
})
onSubmit
按下ctrl+enter/command+enter组合键时触发
new MdEditor({
...,
onSubmit: function(res) {
console.log(res) // { text: "...", html: "..." }
}
})
onUpload
上传或粘贴文件时会触发此函数
new MdEditor({
...,
onUpload: function(file, type, callback) {
// type 返回 img/file/video
// do something with file
// ajax
// ...
// 得到图片的url
// 在callback函数中回传图片url,编辑器会将图片链接粘贴到内容里
callback(url)
}
})
queryUserList
按下@键时触发此函数,通过回传用户列表可生成用户选择弹窗
new MdEditor({
...,
queryUserList: function(val, callback) {
const list = [
{
nickname: "王一博",
username: 'cpongo4',
url: "https://weibo.com/u/5492443184",
avatar:
"https://img2.baidu.com/it/u=298051053,3773223854&fm=26&fmt=auto&gp=0.jpg"
},
{
nickname: "王俊凯",
username: 'cpongo5',
url: "https://weibo.com/tfwangjunkai",
avatar:
"https://img1.baidu.com/it/u=2378425879,2273515018&fm=26&fmt=auto&gp=0.jpg"
},
{
nickname: "易烊千玺",
username: 'cpongo6',
url: "https://weibo.com/tfyiyangqianxi",
avatar:
"https://img0.baidu.com/it/u=2227200088,1939721201&fm=26&fmt=auto&gp=0.jpg"
},
{
nickname: "白敬亭",
username: 'cpongo7',
url: "https://weibo.com/u/2112496475",
avatar:
"https://img1.baidu.com/it/u=3265411836,2089649447&fm=11&fmt=auto&gp=0.jpg"
}
];
callback(list);
}
})
renderLinks
通过返回的链接信息把链接渲染成卡片样式
renderLinks: function(val, callback) {
const newLinks = val.map(item => {
// 调用接口获取链接的信息
item.title =
"指定的可执行文件cmd.exe未能运行,某某函数不正确-后端-CSDN问答";
item.icon = "https://g.csdnimg.cn/static/logo/favicon32.ico";
item.description =
"CSDN问答为您找到指定的可执行文件cmd.exe未能运行,某某函数不正确相关问题答案,如果想了解更多关于指定的可执行文件cmd.exe未能运行,某某函数不正确 asp.net、c# 技术问题等相关问答,请访问CSDN问答。";
return item;
});
callback(newLinks);
},
getValue
获取编辑器内容
const myEditor = new MdEditor({
...
}
})
const value = myEditor.getValue()
console.log(value)
或
myEditor.getValue(value => {
console.log(value)
})
setValue
设置编辑器内容
const myEditor = new MdEditor({
...
}
})
myEditor.setValue('this is new content')
focus
使编辑器获取焦点
const myEditor = new MdEditor({
...
}
})
myEditor.focus()
blur
使编辑器失去焦点
const myEditor = new MdEditor({
...
}
})
myEditor.blur()
registertools
注册工具栏按钮
const myEditor = new MdEditor({
...
}
})
myEditor.registerTools([
{
name: "test", //
icon:
"https://img1.baidu.com/it/u=1522221441,2900868227&fm=26&fmt=auto&gp=0.jpg",
tip: "自定义的按钮",
click: function() {
// 点击按钮的事件
}
}
]);
toggleTab
切换编辑器编辑和预览tab
const myEditor = new MdEditor({
...
}
})
myEditor.toggleTab() // 默认取反
myEditor.toggleTab({"edit")
myEditor.toggleTab("preview")
toggleFullScreen
切换编辑器全屏模式
const myEditor = new MdEditor({
...
}
})
myEditor.toggleFullScreen() // 默认取反
myEditor.toggleFullScreen(true)
myEditor.toggleFullScreen(false)
Example
<div id="app"></div>
<script src="./markdown-editor.js"></script>
<script>
new MdEditor({
el: "#app", // required
value: "回显的内容",
themeOptions: {
borderColor: "#dbdbdb",
borderColorActive: "#409eff",
textColor: "#303030",
textColorActive: "#000"
},
toolsOptions: {
bold: true,
italic: false,
quote: true,
code: true,
link: false,
ul: true,
ol: true,
task: true,
table: false,
fullScreen: false
},
canPreview: true,
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>