Giter Club home page Giter Club logo

laymd's Introduction

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探讨

laymd's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

laymd's Issues

可以把解析器作为一个模块放在扩展目录,避免单页版 layuiadmin中的重复加载问题

使用的时候就可以类似这样:

layui.config({base: 'laymd/'}).use(['marked', 'laymd'], function(){
    var laymd = layui.laymd;
    var marked = layui.marked;

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

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

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.