开发步骤:

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. cnn中的fp和bp推导

    昨天下午在单位从新推导了一遍fp和bp. 在整个网络的训练中,最关键的就是计算残差. 最后一层残差很容易,那么前面每一层的残差怎么计算呢? 总体来说,有多少权重就需要多少残差项来进行权重更新.每个权重 ...

  2. .net core自定义特性操作

    最近移植之前写的几个类,发现特性操作发生了一些改变. 直接看代码,建立表和字段特性类,添加一个用户表,设置好特性. using System; namespace TestDemo { /// < ...

  3. 【赛时总结】◇赛时·V◇ Codeforces Round #486 Div3

    ◇赛时·V◇ Codeforces Round #486 Div3 又是一场历史悠久的比赛,老师拉着我回来考古了……为了不抢了后面一些同学的排名,我没有做A题 ◆ 题目&解析 [B题]Subs ...

  4. 用servlet设计OA管理系统时遇到问题

    如果不加单引号会使得除变量和int类型的值不能传递 转发和重定向的区别 转发需要填写完整路径,重定向只需要写相对路径.原因是重定向是一次请求之内已经定位到了服务器端,转发则需要两次请求每次都需要完整的 ...

  5. JAVA / MySql 编程——第五章 事务、视图、索引、备份和恢复

    1.事务(Transaction): 事务是将一系列数据操作绑成一个整体进行统一管理. 如果一事务执行成功,则咋子该事务中进行的所有数据更改均会提交,称为数据库中的永久成部分. 如果事务执行是遇到错误 ...

  6. linux学习(2)——文件和目录管理

    (二) 一:绝对路径和相对路径                                                                                     ...

  7. linux select用法

    select 是linux i/o 复用技术之一 man 2 select #include <sys/select.h> /* According to earlier standard ...

  8. POJ3682 概率DP

    King Arthur's Birthday Celebration Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3575 ...

  9. Codeforces Round 97B 点分治

    B. Superset time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...

  10. POJ-2251 三维迷宫

    题目大意:给一个三维图,可以前后左右上下6种走法,走一步1分钟,求最少时间(其实就是最短路) 分析:这里与二维迷宫是一样的,只是多了2个方向可走,BFS就行(注意到DFS的话复杂度为O(6^n)肯定会 ...