SimpleMDE编辑器 + 提取HTML + 美化输出
开发步骤:
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 + 美化输出的更多相关文章
- 使用jackson美化输出json/xml
转载:http://www.cnblogs.com/xiwang/ 如何使用jackson美化输出json/xml 1.美化POJO序列化xml 下面将POJO列化为xml并打印. Person pe ...
- 如何使用jackson美化输出json/xml
如何使用jackson美化输出json/xml 1.美化POJO序列化xml 下面将POJO列化为xml并打印. Person person = new Person(); //设置person属性 ...
- python中字典的美化输出
一.背景 如果一个字典长度很大,直接print输出则比较难看,我们需要美化输出,可以借鉴json import json beautiful_format = json.dumps(your_dict ...
- JSON格式化 JSON美化 输出到html
{"promotion_details":{"promotion_detail":[{"discount_fee":"22.20& ...
- 专治编译器编辑器vscode中文乱码输出 win10 配置系统默认utf-8编码
VS Code输出会出现乱码,很多人都遇到过.这是因为VS Code内部用的是utf-8编码,cmd/Powershell是gbk编码.直接编译,会把“你好”输出成“浣犲ソ”.如果把cmd的活动代码页 ...
- 19-3-1Python的PyCharm编辑器,以及格式化输出、while循环、运算符、编码初识
第一次使用PyCharm,需要注意到是否使用的自己安装的python版本,或者使用的自带版本,如果使用的自带版本,注意切换. PyCharm使用优点,可以一步一步看程序的出错问题,即Debug的使用, ...
- tp框架下,数据库和编辑器都是utf-8, 输出中文却还是乱码
输出: array(2) { [0]=> array(4) { ["id"]=> string(1) "1" ["user"]= ...
- PHP 美化输出数组
var_export — 输出或返回一个变量的字符串表示 此函数返回关于传递给该函数的变量的结构信息,它和 var_dump() 类似,不同的是其返回的表示是合法的 PHP 代码. 您可以通过将函数的 ...
- 用于科创的git log美化输出
git log --reverse --pretty=format:'%cd %s' --date=short > a.txt 更好的: git log --reverse --pretty=f ...
随机推荐
- cnn中的fp和bp推导
昨天下午在单位从新推导了一遍fp和bp. 在整个网络的训练中,最关键的就是计算残差. 最后一层残差很容易,那么前面每一层的残差怎么计算呢? 总体来说,有多少权重就需要多少残差项来进行权重更新.每个权重 ...
- .net core自定义特性操作
最近移植之前写的几个类,发现特性操作发生了一些改变. 直接看代码,建立表和字段特性类,添加一个用户表,设置好特性. using System; namespace TestDemo { /// < ...
- 【赛时总结】◇赛时·V◇ Codeforces Round #486 Div3
◇赛时·V◇ Codeforces Round #486 Div3 又是一场历史悠久的比赛,老师拉着我回来考古了……为了不抢了后面一些同学的排名,我没有做A题 ◆ 题目&解析 [B题]Subs ...
- 用servlet设计OA管理系统时遇到问题
如果不加单引号会使得除变量和int类型的值不能传递 转发和重定向的区别 转发需要填写完整路径,重定向只需要写相对路径.原因是重定向是一次请求之内已经定位到了服务器端,转发则需要两次请求每次都需要完整的 ...
- JAVA / MySql 编程——第五章 事务、视图、索引、备份和恢复
1.事务(Transaction): 事务是将一系列数据操作绑成一个整体进行统一管理. 如果一事务执行成功,则咋子该事务中进行的所有数据更改均会提交,称为数据库中的永久成部分. 如果事务执行是遇到错误 ...
- linux学习(2)——文件和目录管理
(二) 一:绝对路径和相对路径 ...
- linux select用法
select 是linux i/o 复用技术之一 man 2 select #include <sys/select.h> /* According to earlier standard ...
- POJ3682 概率DP
King Arthur's Birthday Celebration Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3575 ...
- Codeforces Round 97B 点分治
B. Superset time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...
- POJ-2251 三维迷宫
题目大意:给一个三维图,可以前后左右上下6种走法,走一步1分钟,求最少时间(其实就是最短路) 分析:这里与二维迷宫是一样的,只是多了2个方向可走,BFS就行(注意到DFS的话复杂度为O(6^n)肯定会 ...