Skip to content
This repository has been archived by the owner on Dec 14, 2021. It is now read-only.
/ laymd Public archive

基于layui模块化的Markdown编辑器

Notifications You must be signed in to change notification settings

suyar/laymd

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

laymd-基于layui模块化的Markdown编辑器

快速上手

引入解析器(这个看个人喜好,demo用的是marked.js,速度较快,也可以用HyperDown)

<script src="laymd/marked.min.js"></script>
layui.config({base: 'laymd/'}).use(['laymd'], function(){
    var laymd = layui.laymd;

    //实例化编辑器,可以多个实例
    var md = laymd.init('demo', {});

    //内容改变事件
    md.on('change', function () {
        //这里借用marked.js解析效率比HyperDown快,用户可自行找解析器
        this.setPreview(marked(this.getText()));
    });

    //初始化数据预览
    md.do('change');
});

查看示例页面

注意,请把laymd.csspreview.css以及laymd.js放在同一个目录下,并且不要变更文件名

API

  • md.on(event, callback)

绑定事件,目前仅支持change事件


  • md.do(action)

执行事件,事件详情请看源码

  • md.history

撤销:md.history.undo

还原:md.history.redo

  • md.getRangeData()

获取当前选中的文字以及开始-结束位置{start: number, end: number, text: string}

  • md.setRangeData(rangeData)

替换当前选中数据并且设置选中范围的开始-结束位置{start: number, end: number, text: string}

  • md.getRangeText()

获取选中的文本

  • md.setRangeText(text)

替换当前选中的数据

  • md.getLineData(line)

获取当前行的数据,如果有传入line则获取第line行的数据;如果跨行选中,则以选中最后的位置一行为准 {start: number, end: number, line: number, text: string}

  • md.setLineData(lineData)

设置光标所在行的数据{start: number, end: number, line: number, text: string},如果line存在,表示设置的第line

  • md.getLineText(line)

获取第line行的数据,不传为当前行

  • md.setLineText(text ,line)

设置第line行的数据,不传为当前行

  • md.getText()

获取当前的MD数据

  • md.setPreview(html)

设置预览的HTML

  • md.setLink(link, text, title)

在当前位置添加超链接

  • md.setImg(src, alt, title)

在当前位置添加图片

快捷键

keyMap[66] = 'bold'; //ctrl + b
keyMap[73] = 'italic'; //ctrl + i
keyMap[85] = 'underline'; //ctrl + u
keyMap[68] = 'del'; //ctrl + d
keyMap[37] = 'left'; //ctrl + ←
keyMap[38] = 'center'; //ctrl + ↑
keyMap[39] = 'right'; //ctrl + →
keyMap[49] = 'h1'; //ctrl + 1
keyMap[50] = 'h2'; //ctrl + 2
keyMap[51] = 'h3'; //ctrl + 3
keyMap[52] = 'h4'; //ctrl + 4
keyMap[53] = 'h5'; //ctrl + 5
keyMap[54] = 'h6'; //ctrl + 6
keyMap[189] = 'hr'; //ctrl + -
keyMap[76] = 'link'; //ctrl + l
keyMap[191] = 'code'; //ctrl + /
keyMap[81] = 'quote'; //ctrl + q
keyMap[89] = 'redo'; //ctrl + y
keyMap[90] = 'undo'; //ctrl + z

初始化配置

laymd.init('demo', {
    tools: [
        'bold', 'italic', 'underline', 'del',
        '|',
        'left', 'center', 'right',
        '|',
        'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
        '|',
        'hr', 'link', 'code', 'ol', 'ul', 'tl',
        '|',
        'table', 'quote', 'toc', 'img',
        '|',
        'full', 'preview'
    ],
    height: 280
});

嗯。。。目前就支持这两项配置

关于图标问题:因个人偷懒,懒得弄图标,所以将就一下

更多问题,直接在PR提交或者加群633203774探讨

About

基于layui模块化的Markdown编辑器

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published