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 ...
随机推荐
- base_lr, blobs_lr
caffe里面,原来以为是不可以随便调整学习率的,现在看来是可以的.base_lr是适用于所有层的学习率,而针对单个层,可以通过增加两个blobs_lr,用来调整该层的学习率,为什么是两个呢,因为一个 ...
- rnn,cnn
http://nikhilbuduma.com/2015/01/11/a-deep-dive-into-recurrent-neural-networks/ 按照这里的介绍,目前比较火的cnn是fee ...
- 【Java】常用数据类型转换(BigDecimal、包装类、日期等)
新工作转到大数据方向,每天都要面对数据类型互相转换的工作,再加上先前面试发现这部分的知识盲点, 决定复习之余自己再写一套便捷的方法,以后会比较方便.(虽然公司有现成封装的类,里头还有些遗漏的地方,暂时 ...
- 永久免费开源的卫星地形图地图下载工具更新Somap2.13版本功能更新 更新时间2019年2月22日13:59:05
一.下载地址 最新版本下载地址:SoMap2.13点击此处下载 二.系统自主开发特色功能展示 1.上百种地图随意下载 高德.百度.arcgis.谷歌.bing.海图.腾讯.Openstreet.天地 ...
- JAVAWEB开发中过滤器的概述及使用
1.什么是过滤器? 过滤器是向WEB应用程序的请求和响应添加功能的WEB服务组件 2.过滤器的作用 1)可以统一的集中处理请求和响应 2)可以实现对请求数据的过滤 3.过滤器的工作方式 4.使用场合 ...
- 简版会员私信表设计及sql 私信列表查询
先上下表结构和数据 DROP TABLE IF EXISTS `message`; CREATE TABLE `message` ( `id` int(11) NOT NULL AUTO_INCREM ...
- VMware中Ubuntu开机时停在启动界面,不进入X-window的解决办法
启动Ubuntu虚拟机时,停在这个画面不动: 试了若干次,都是这样.尝试了新建一个虚拟机然后把.vmdk文件拷过去启动,无法解决. 尝试重启,在这个界面按esc进入grub: 选择恢复模式 recov ...
- LEA指令与MOV指令区别
Tips: LEA指令与MOV指令的区别: ① MOV指令是 数据 传送指令-------传送数据 LEA指令是 有效地址 传送指令-------取偏移地址 ② MOV OPRD1 ...
- laravel cache get 是如何调用的?
本文使用版本为laravel5.5 cache get public function cache() { $c=\Cache::get('app'); if(!$c) { \Cache::put(' ...
- Windows Server 远程桌面连接不上问题解决
关于Windows Server 远程桌面连接不上的问题需要从服务.端口.防火墙这几方面进行检查: 服务器上需要 开启的服务: - Remote Access Auto Connection Mana ...