Light

bh-lay / mditor Goto Github PK

View Code? Open in Web Editor NEW

87.0 4.0 27.0 482 KB

一款轻量级的markdown编辑器 ediotor for markdown

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

License: MIT License

HTML 1.99% CSS 14.71% JavaScript 83.28% Batchfile 0.01%

markdown editor mditor

mditor's Introduction

欢迎使用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();

mditor's People

Contributors

Stargazers

Watchers

mditor's Issues

支持实时预览吗？

看过很多编辑器，这个使用最简洁，就是不知道支持实时预览吗？

这个markdown蛮好用的

无意间瞄到了这个网站
http://bh-lay.com/topic/aboutblog/index.html
然后看到了一个markdown编辑器，我就下载下来用用，蛮好用的。。

怎么设置编辑框的高度

不能改变默认的编辑框高度吗，可以的话怎么修改呢

你好，请问您可以将 < 和 > 转化为 <和 >么？

这是一个很有趣的问题
当我向往您的编辑器里面输入xml语言时，无法正常显示。
并且如果输入
`

<script>alert("error")</script>

`
html 将会被错误的解析。可能会出现网页的漏洞

使用mditor过程中发现的一些问题；

今天试着使用您这个插件发现的问题如下：

1.教程语法错误；
```
//获取textarea dom对象
var ele_textarea = document.getElementByID('mditor');
```
document对象没有“getElementByID”这个方法，应该写成“getElementById”吧;
2.在chrome浏览器中如果按照教程的写法：
```
<textarea id="mditor">……</textarea>
//获取textarea dom对象
var ele_textarea = document.getElementById('mditor');
//实例化Mditor
var editor = new mditor(ele_textarea);
```
会出现“object is not a function”的错误，调试发现是textarea 这个标签id命名成 mditor后， new mditor中的mditor变成dom节点对象（textarea）了;
3.在编辑器官网点击下载按钮下载的 mditor.js，以上两问题解决后，发现编辑器编辑代码，然后，选择预览时，代码没有灰色背景。（网站demo没问题）

历史记录及其快捷键

加上历史记录的功能，最好能支持Ctrl+z,Ctrl+y(Ctrl+Shif+z).

怎么没有清空内容的方法呢？

在实际应用中需要清楚的方法，怎么没有清空内容的方法呢？

如何定义更多的快捷方式

如何定义更多的快捷方式，比如插入图片，链接

Recommend Projects

React

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

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

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.