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 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-mditor

v1.0.1

Published

A lightweight markdown editor

Downloads

12

Readme

欢迎使用Mditor

Mditor是一款轻量级的markdown编辑器。取名自markdown + editor,用于实现页面markdown输入框的便利操作。

查看演示

http://bh-lay.github.io/mditor/

常用格式及快捷键

  • 加粗文字 Ctrl + B
  • 斜体文字 Ctrl + I
  • 链接文字 Ctrl + L
  • 图片暴漫 Ctrl + G
  • code Ctrl + Shift + K
  • 代码块 Ctrl + K
/**
 * 检测是否为数字
 * 兼容字符类数字 '23'
 */
function isNum(ipt){
	return (ipt !== '') && (ipt == +ipt) ? true : false;
}

如何使用

第一步、页面内放置待使用的文本域textarea

<textarea id="md_editor">……</textarea>

第二步、引入jQuery和Mditor,并初始化,

注:因为后续Mditor会逐渐脱离对jQuery的依赖,参数请使用原生dom对象,而非jQuery对象。

<script type="text/javascript" src="src/jquery.js"></script>
<script type="text/javascript" src="src/mditor.js"></script>
<script type="text/javascript">
  //获取textarea dom对象
  var ele_textarea = document.getElementById('md_editor');
  //实例化Mditor
  var editor = new mditor(ele_textarea);
</script>

高级操作

为了保证编辑、发布的显示效果一致,需要按照对应站点文章样式的css来展示编辑时的效果,默认显示效果class为article,可参照下面定义方式更改类名。

一、实例化Mditor时,可以传入自定义参数

var editor = new mditor(document.getElementById('md_editor'),{
  //自定义显示效果class
  previewClass : 'article'
});

二、可以通过javascript对实例化后的Mditor进行操作,如:

//获取转换后的html
editor.getHtml();

//获取markdown格式内容
editor.getContent();

//插入内容
editor.insert('**挤啊挤**')

//进入预览界面
editor.preview();

//返回编辑界面
editor.edit();