index.html 编辑器,index.html

原创markdown编辑器-前端路迹

body, input, select, textarea {

font-family: Helvetica, Arial, "Hiragino Sans GB", "Microsoft Yahei", "微软雅黑", STHeiti, "华文细黑", sans-serif;

}

section {

padding: 50px 0;

}

.first {

background: #887C42;

}

.plugin-title {

font-size: 80px;

text-align: center;

color: #fff;

font-family: arial, sans-serif;

}

.plugin-desc {

text-align: center;

font-size: 20px;

color: #fff;

font-family: '黑体';

}

#wrap {

height: 550px;

margin: 50px 0 30px;

box-shadow: #6B6134 0 5px 15px;

}

#wrap textarea {

border-width: 0 1px 0 0;

}

#wrap .mdeditor-html {

border-width: 0;

}

#wrap .mdeditor:focus {

border-color: #ccc;

-webkit-box-shadow: none;

box-shadow: none;

}

.list-group-item-heading .badge {

margin-left: 5px;

background: #f0ad4e;

}

.option-desc {

color: #666;

}

.key {

color: #888;

font-weight: bold;

}

.time-spend {

text-align: center;

color: #fff;

font-size: 14px;

}

#time-spend-count {

font-family: serif sans-serif;

font-size: 24px;

}

.obj li {

list-style: none;

}

.obj-kv {

padding-left: 20px;

}

.obj i{

margin-left:10px;

color:#509ee0

}

mdeditor

原创markdown编辑器，基于textarea，同步预览html，不依赖任何插件，支持自定义语法，压缩版7k，使用简单。

解析耗时： 10ms

配置项

id

编辑器载入容器的id

值类型：string

默认值：空

name

指定编辑器textarea的name属性值

值类型：string

默认值：空

placeholder

指定编辑器textarea的placeholder属性值

值类型：string

默认值：空

aTarget

指定a链接的target属性值

值类型：string

默认值：_blank

可选值：_blank，_self

静态方法

addGrammar(object|array)

添加自定义语法(已提供示例mdeditor.grammer.iframe.js即插入iframe的私有语法)

参数：对象或对象数组

• [{
• reg:/^$/, // 匹配语法的正则表达式
• handle:function(rows,i,grammar){}// 将匹配的行转化为html代码。 参数说明 rows：所有行，i：满足匹配的行(即rows[i])的开始位置，grammar：当前grammar配置。
• }]

handle返回值

• {
• html:[], // 转化后的html都放在数组中
• index:i // 返回语法有效的rows的截止index
• }

返回：mdeditor

实例方法

getHTML

data-target="#testMethod">测试getHTML

获取textarea内的markdown内容转义后的html代码

参数：无

返回：string(html代码)

getMarkdown

data-target="#testMethod">测试getMarkdown

获取textarea内的markdown内容转义后的html代码

参数：无

返回：string(markdown语法文本)

setMarkdown

data-target="#setMarkdown">测试setMarkdown

将传入的markdown内容转义成html代码并返回，如果初始化id不为空，则向编辑器输入框添加markdown内容

参数：

• markdown

  markdown语法文本

返回：string(html代码)

aria-hidden="true">×

关闭

aria-hidden="true">×

测试setMarkdown

setMarkdown

style="font-size: 100px;">(

style="line-height: 1.5em; outline: none;resize: none;height:100px;vertical-align: -23px; width: 360px;">#输入markdown语法文本

style="font-size: 100px;">)

确定

关闭

# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

## 分割线

---

***

___

## 无序列表

- 1

- 2

- 3

* 1

* 2

* 3

. 1

. 2

. 3

## 有序列表

1. 1

2. 2

3. 3

### 引用

>1. a

>2. b

>33. c

>段落

## 图片


## 链接

[前端路迹](http://www.qinshenxue.com/)

## 行内代码

行内代码展示：`npm install`

## 粗体

粗体展示：**粗体**

## 斜体

斜体展示: *斜体*

## 表格

|1|2|3|4|

|:--:|:--:|:--:|:--:|

|1|2|3|4|

|1|2|3|4|

## 代码块

``` css

.mdeditor {

float: left;

width: 50%;

line-height: 1.5em;

resize: none;

outline: none;

border: 1px solid #ccc;

box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);

}

```

``` xml

原创markdown编辑器，基于textarea，同步预览html，不依赖任何插件，使用简单。

```

``` javascript

var a=1,b=2; // 注释

function test(){

return "原创markdown编辑器，基于textarea，同步预览html，不依赖任何插件，使用简单。";

}

```

## 内嵌页(自定义语法，私有语法)

$[200](about:blank)

var editor = mdeditor({

id: 'wrap'

});

var start = new Date().getTime();

editor.setMarkdown($('#md_source').html());

$('#time-spend-count').text( new Date().getTime() - start + 'ms');

$('#testMethod').on('show.bs.modal', function (e) {

var $dialog = $(e.target);

var method = $(e.relatedTarget).data('method');

var $title = $dialog.find('.modal-title');

var $body = $dialog.find('.modal-body');

switch (method) {

case 'getHTML':

$title.text('测试getHTML');

$body.text(editor.getHTML());

break;

case 'getMarkdown':

$title.text('测试getMarkdown');

$body.text(editor.getMarkdown());

break;

case 'setMarkdown':

$title.text('测试setMarkdown');

$body.text(editor.setMarkdown('#ddd'));

break;

}

})

$('body').on('click', '#doSetMarkdown', function (e) {

var md = $('#setMarkdownSource').val();

editor.setMarkdown(md);

$('#setMarkdown').modal('hide');

setTimeout(function () {

$("html,body").stop(!0, !0).animate({

scrollTop: 0

}, 200)

}, 200);

});

var _hmt = _hmt || [];

window.onload = function () {

setTimeout(function () {

(function () {

var hm = document.createElement("script");

hm.src = "//hm.baidu.com/hm.js?fd951fac9710ff77ff3b7ae3a70f637a";

var s = document.getElementsByTagName("script")[0];

s.parentNode.insertBefore(hm, s);

})();

}, 100);

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史