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 ...
随机推荐
- Linux利用i节点删除乱码文件
Linux删除乱码文件 当文件名为乱码的时候,无法通过键盘输入文件名,所以在终端下就不能直接利用rm,mv等命令管理文件了. 但是我们知道每个文件都有一个i节点号,我们可以考虑通过i节点号来管理文件. ...
- image retrieval数据集
1. Oxford,vgg组,主要是building方面的数据.http://www.robots.ox.ac.uk/~vgg/data/oxbuildings/index.html 2. Calte ...
- 电话状态监听 - iOS
今天接到一个监听状态的需求,当使用 App 时若电话介入需要对当前状态进行监听操作(注:并非通话内容),根据不同的状态实行相关的需求操作,废话不多说步骤如下. 首先,常规操作先引用对应的头文件,来为后 ...
- Pop–实现任意iOS对象的任意属性的动态变化
简介 Pop 是一个可扩展的动画引擎,可用于实现任意iOS对象的任意属性的动态变化,支持一般动画,弹性动画和渐变动画三种类型. 项目主页: pop 最新示例: 点击下载 注意: 官方代码中,并不包含实 ...
- Dijkstra&&Floyd
文章来源:(http://www.cnblogs.com/biyeymyhjob/archive/2012/07/31/2615833.html) (以下内容皆为转载) Dijkstra算法 1.定义 ...
- 【HTML】placeholder中换行
表示回车 表示换行 案例 <textarea rows="10" placeholder="测试换行 新的一行"></textarea>
- elasticsearch 5.x 系列之七 基于索引别名的零停机升级服务
一,写在前面的话,elasticsearch 建立索引时的Mapping 设置 建议你在设计索引的初期,就把索引的各个字段设计好,因为,elasticsearch 的各个字段,定义好类型后,就无法进行 ...
- 学习python第十三天,函数5 装饰器decorator
定义:装饰器本质是函数,(装饰其他函数)就是为其他函数添加附加功能原则:1.不能修改被装饰的函数的源代码 2.不能修改装饰的函数的调用方式 实现装饰器知识储备1函数即变量2.高阶函数,满足2个条件之一 ...
- Smail 中的一些点
smali中所有操作都需要经过寄存器, 本地寄存器以v开头, 参数寄存器以p开头, 非static方法中p0是this 没有-object后缀的操作指令表示操作的对象是基本类型 invoke-dire ...
- python, 面向对象编程Object Oriented Programming(OOP)
把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. 面向过程的程序设计把计算机程序视为一系列的命令集合,即一组函数的顺序执行.为了简化程序设计,面向过程把函数继续切分为子函数,即把大块函数 ...