README.md

    Awesome-Markdown-Editor

    一款Markdown编辑器组件,支持使用markodwn语法来编写文档,同时支持图片上传等功能(当前版本仅支持单文件上传)

    更新记录

    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>
    1. 指定需要渲染的容器
    <div id="app"></div>
    1. 初始化实例
    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

    属性 说明 类型 默认值 说明
    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
    file 上传文件 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

    项目简介

    由 codechina 技术团队开发的一款Markdown编辑器,支持使用markodwn语法来编写文档,同时支持图片上传等功能。

    发行版本 1

    编辑器 v0.1 版上线

    全部发行版

    贡献者 5

    璃白_ @weixin_43881430
    CoCo_Code_Op1123 @CoCo_Code_Op2
    Miykael_xxm @xiongjiamu
    G guoweijia @guoweijia

    开发语言

    • Vue 58.9 %
    • JavaScript 24.4 %
    • Less 16.7 %