目录
master
分支4
标签1
+ 疑修
Web IDE
layyback
🐛 修复@用户异步不生效问题
2年前195次提交
目录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更新，添加功能：

v0.6

2021-07-19 v0.6更新，添加功能：

  • 优化工具栏表格交互
  • 工具栏添加格式刷
  • 添加md语法说明
  • 添加代码语言选择
  • 添加height属性

v0.5

2021-06-29 v0.5更新，添加功能：

v0.4

2021-06-23 v0.4更新，添加功能：

v0.3

2021-06-17 v0.3更新，添加功能：

v0.2

2021-06-15 v0.2更新，添加功能：

v0.1

2021-06-07 v0.1 初版更新，支持功能：

  • 自定义主题
  • 单张图片/单个附件上传
  • Markdown & Html 内容获取

使用

  1. 引入编辑器
  • 通过script标签引入
    <script src="./markdown-editor.js"></script>
  • 通过es module引入
    import MdEditor from './markdown-editor.js'
  1. 指定需要渲染的容器
    <div id="app"></div>
  2. 初始化实例
    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>

License

MIT

关于
javascriptvueless
README.md
5.2 MB
邀请码
    Gitlink（确实开源）
  • 加入我们
  • 官网邮箱：gitlink@ccf.org.cn
    • QQ群
  • QQ群
    • 公众号
  • 公众号

©Copyright 2023 CCF 开源发展委员会
Powered by Trustie& IntelliDE 京ICP备13000930号