开发步骤:

1. 安装和引入(npm或者bower都可以)

$ bower install simplemde --save
//css - debug目录下为开发版本
<link rel="stylesheet" href="bower_components/simplemde/debug/simplemde.css" />
//js
<script src="/bower_components/simplemde/debug/simplemde.js"></script>

2. 部署DOM和编辑器初始化

    <div class="form-group">
<textarea name="field" id="fieldTest" cols="30" rows="10"></textarea>
</div>
    var simplemde = new SimpleMDE({
element: document.getElementById("fieldTest"),
autoDownloadFontAwesome: false,
status: false
});

参数:(不止以下3个,详细请参考官方文档https://github.com/sparksuite/simplemde-markdown-editor

element: textarea的DOM对象 
autoDownloadFontAwesome: 自动下载FontAwesome,设为false为不下载
status: 编辑器底部的状态栏,我不需要就设置为false了

这里说明一下:

这个插件有点坑的地方就是UI,工具栏是用FontAwesome的图标的,默认是在线获取FontAwesome,然而在中国地区,下载7.9kb的FontAwesome居然要10s,这让人很不爽,所以autoDownloadFontAwesome这个参数我们最好加上,然后切记,一定,记住安装引入一下FontAwesome:

$ bower install fontawesome --save
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />

如果成功的话,应该看到这样的东西!

编辑器如有需要可以加上css最小高度:

.CodeMirror, .CodeMirror-scroll {
min-height: 300px;
}

3. 获取内容及提取HTML

获取内容使用simplemde.value()即可。不过获取到的是带markdown语法的字符串,所以我们需要转换一下变成HTML。
提取HTML真的,文档我好像没找到接口,不过经过分析simplemde.js,不经意地发现了一个渲染函数叫markdown(),是继承到SimpleMDE里面去的,也就是说,实例化的simplemde是有markdown方法的,一切就变得简单了!

var testPlain = simplemde.value(),
testMarkdown = simplemde.markdown(testPlain);

然后testMarkdown就是我们要的html了!该干嘛干嘛。

4. 美化渲染后的HTML

你会发现,获取出来的HTML,不好看!诶,我已经帮你们从github那里偷了个css回来了,拿去用便是。使用方法:

$ bower install github-markdown-css --save
<link rel="stylesheet" href="bower_components/github-markdown-css/github-markdown.css" />
//在输出的地方加上markdown-body的css类即可
//下面的代码是给编辑器预览输出的容器加的。
$(".editor-preview-side").addClass("markdown-body");

备注:这个css的font-family好像是没有关于中文字体设置的,所以我们要在里面加上一个"Microsoft Yahei"。

最终效果图如下:

SimpleMDE编辑器 + 提取HTML + 美化输出的更多相关文章

  1. 使用jackson美化输出json/xml

    转载:http://www.cnblogs.com/xiwang/ 如何使用jackson美化输出json/xml 1.美化POJO序列化xml 下面将POJO列化为xml并打印. Person pe ...

  2. 如何使用jackson美化输出json/xml

    如何使用jackson美化输出json/xml 1.美化POJO序列化xml 下面将POJO列化为xml并打印. Person person = new Person(); //设置person属性 ...

  3. python中字典的美化输出

    一.背景 如果一个字典长度很大,直接print输出则比较难看,我们需要美化输出,可以借鉴json import json beautiful_format = json.dumps(your_dict ...

  4. JSON格式化 JSON美化 输出到html

    {"promotion_details":{"promotion_detail":[{"discount_fee":"22.20& ...

  5. 专治编译器编辑器vscode中文乱码输出 win10 配置系统默认utf-8编码

    VS Code输出会出现乱码,很多人都遇到过.这是因为VS Code内部用的是utf-8编码,cmd/Powershell是gbk编码.直接编译,会把“你好”输出成“浣犲ソ”.如果把cmd的活动代码页 ...

  6. 19-3-1Python的PyCharm编辑器,以及格式化输出、while循环、运算符、编码初识

    第一次使用PyCharm,需要注意到是否使用的自己安装的python版本,或者使用的自带版本,如果使用的自带版本,注意切换. PyCharm使用优点,可以一步一步看程序的出错问题,即Debug的使用, ...

  7. tp框架下,数据库和编辑器都是utf-8, 输出中文却还是乱码

    输出: array(2) { [0]=> array(4) { ["id"]=> string(1) "1" ["user"]= ...

  8. PHP 美化输出数组

    var_export — 输出或返回一个变量的字符串表示 此函数返回关于传递给该函数的变量的结构信息,它和 var_dump() 类似,不同的是其返回的表示是合法的 PHP 代码. 您可以通过将函数的 ...

  9. 用于科创的git log美化输出

    git log --reverse --pretty=format:'%cd %s' --date=short > a.txt 更好的: git log --reverse --pretty=f ...

随机推荐

  1. C#继承简介与规则

    一.C#继承简介 1. 类的层次结构 下面是一个类的层次结构图: 上图反映了鱼类的派生关系,其中最高层的实体往往具有最一般最普遍的特征,越下层的实体就越具体,并且下层包含了上层的特征.如果将上层的实体 ...

  2. input或其他元素的左上角和左下角单独圆角实现

    border-bottom-left-radius:6px;/*左下角圆角*/    border-top-left-radius: 6px;/*左上角圆角*/

  3. 绕不开的this

    犹豫两秒要不要整理this,从红皮书上看了半天,没搞懂哎(弱爆了) 什么是this?this是在执行上下文创建时期创建的一个执行过程中不可改变的变量.执行上下文是指js引擎会将代码执行前需要的变量th ...

  4. mysql 数据库设计规范

    MySQL数据库设计规范 目录 1. 规范背景与目的 2. 设计规范 2.1 数据库设计 2.1.1 库名 2.1.2 表结构 2.1.3 列数据类型优化 2.1.4 索引设计 2.1.5 分库分表. ...

  5. 网络基础-交换机、路由器、OSI7层模型

    第1章 网络基础 1.1 网络的诞生 网络的诞生使命:通过各种互联网服务提升全球人类生活品质. 让人类的生活更便捷和丰富,从而促进全球人类社会的进步.并且丰富人类的精神世界和物质世界,让人类最便捷地获 ...

  6. dts--framework(一)

    dts 大体框架 framework 定义类 定义方法 tests framework调用所需要的函数 ./dpdk/usertools/cpu_layout.py /sys/devices/syst ...

  7. HTML5--混合布局

    1.先上效果图,大家来看看 2.代码如下: <!doctype html> <meta charset='utf-8' content='text/html' /> <h ...

  8. php-5.6.26源代码 - opcode执行

    文件 php-5.6.26/Zend/zend_vm_execute.h ZEND_API void execute_ex(zend_execute_data *execute_data TSRMLS ...

  9. PHP 多字节处理函数 mb_strlen

    一.前言 个人认为,PHP是世界上最好的语言.  二.介绍 查看yii2底层源码, 发现 mb_strlen($str, '8bit') , 此函数的不是PHP的核心函数, 所以需要开启对应的扩展.  ...

  10. Python全栈day 06

    Python全栈day 06 一.数据类型补充完整 1. 列表(list) 反转reverse list1 = [1,2,3,4,5,6,7,8,9] list1.reverse() print(li ...