开发步骤:

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. base_lr, blobs_lr

    caffe里面,原来以为是不可以随便调整学习率的,现在看来是可以的.base_lr是适用于所有层的学习率,而针对单个层,可以通过增加两个blobs_lr,用来调整该层的学习率,为什么是两个呢,因为一个 ...

  2. rnn,cnn

    http://nikhilbuduma.com/2015/01/11/a-deep-dive-into-recurrent-neural-networks/ 按照这里的介绍,目前比较火的cnn是fee ...

  3. 【Java】常用数据类型转换(BigDecimal、包装类、日期等)

    新工作转到大数据方向,每天都要面对数据类型互相转换的工作,再加上先前面试发现这部分的知识盲点, 决定复习之余自己再写一套便捷的方法,以后会比较方便.(虽然公司有现成封装的类,里头还有些遗漏的地方,暂时 ...

  4. 永久免费开源的卫星地形图地图下载工具更新Somap2.13版本功能更新 更新时间2019年2月22日13:59:05

    一.下载地址 最新版本下载地址:SoMap2.13点击此处下载  二.系统自主开发特色功能展示 1.上百种地图随意下载 高德.百度.arcgis.谷歌.bing.海图.腾讯.Openstreet.天地 ...

  5. JAVAWEB开发中过滤器的概述及使用

    1.什么是过滤器? 过滤器是向WEB应用程序的请求和响应添加功能的WEB服务组件 2.过滤器的作用 1)可以统一的集中处理请求和响应 2)可以实现对请求数据的过滤 3.过滤器的工作方式 4.使用场合 ...

  6. 简版会员私信表设计及sql 私信列表查询

    先上下表结构和数据 DROP TABLE IF EXISTS `message`; CREATE TABLE `message` ( `id` int(11) NOT NULL AUTO_INCREM ...

  7. VMware中Ubuntu开机时停在启动界面,不进入X-window的解决办法

    启动Ubuntu虚拟机时,停在这个画面不动: 试了若干次,都是这样.尝试了新建一个虚拟机然后把.vmdk文件拷过去启动,无法解决. 尝试重启,在这个界面按esc进入grub: 选择恢复模式 recov ...

  8. LEA指令与MOV指令区别

    Tips: LEA指令与MOV指令的区别: ① MOV指令是 数据        传送指令-------传送数据 LEA指令是   有效地址 传送指令-------取偏移地址 ② MOV OPRD1 ...

  9. laravel cache get 是如何调用的?

    本文使用版本为laravel5.5 cache get public function cache() { $c=\Cache::get('app'); if(!$c) { \Cache::put(' ...

  10. Windows Server 远程桌面连接不上问题解决

    关于Windows Server 远程桌面连接不上的问题需要从服务.端口.防火墙这几方面进行检查: 服务器上需要 开启的服务: - Remote Access Auto Connection Mana ...