npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

@toonote/md-editor

v1.0.0-alpha.5

Published

vue markdown editor component

Downloads

7

Readme

MdEditor

基于 Vue 的Markdown编辑器。

当前版本尚在开发中,API随时可能变动,请勿在生产环境中使用

安装

npm install @toonote/md-editor

使用

封装为.vue单文件组件,直接引用使用,支持双向绑定。文件未做预编译,需要使用者使用 vue-loader

见如下示例代码:

<template>
    <editor
        ref="editor"
        v-model="content"
        v-on:attachment="saveAttachment"
        v-on:line-scroll="lineScroll"
    ></editor>
</template>

<script>
    import editor from 'tn-md-editor';
    // 主app
    let app = new Vue({
        methods:{
            // 编辑器中粘贴或者拖拽图片时响应
            saveAttachment: function(data){
                // 需要自己写方法存储附件并返回url,示例只存储第一个
                const result = saveAttachment(data.files[0]);
                this.$refs.editor.insertAttachment({
                    filename: result.filename,
                    ulr: result.url
                });
            },
            // 编辑器滚动
            lineScroll: function(row){
                // 滚动时做点什么事情,此处示例为触发vuex action
                console.log('do something', row);
            }
        },
        data:{
            // 编辑器的内容,当content变化时,编辑器内容也会变化
            content: ''
        },
        components: {
            editor
        }
    });
</script>

内容

内容采用双向绑定机制,指定v-model变量即可。

方法

通过$refs机制拿到组件实例后,可调用实例方法:

  • insertAttachment({filename:string, url:string}) 在编辑器光标位置插入附件(图片)
  • insertLink({title:string, url:string}) 在编辑器光标位置插入链接
  • layout 布局变更,需要 editor 重新适配大小
  • editAction({action:string}) 编辑命令,action取值undo / redo

事件

组件会产生一些事件,当内部有事件产生时,需要外部监听处理,目前会触发的事件:

  • attachment 当粘贴或者拖拽附件时会触发,参数:
    • data 参数对象
    • data.files 文件列表
    • data.method 文件来源,可能值为drop(表示拖拽)、clipboard(粘贴)
  • line-scroll 滚动时触发,参数:
    • row 当前编辑器可视区域第一行行号

用户列表

历史记录

1.0.0 alpha 3 (2020-05-09)

  • 添加插入链接方法insertLink()

1.0.0 alpha 2 (2020-02-15)

  • 更新barce版本,解决safari下中文输入问题

1.0.0 alpha 1 (2019-08-20)

  • 旧代码整理,适配浏览器环境使用