【markdown】使用 js 实现自己得markdown 网页编辑器
首先从这里下载其浏览器版：
https://github.com/evilstreak/markdown-js/releases
解压缩后在其js文件同目录下新建一个网页进行测试，代码如下：
<!DOCTYPE html>
<html>
<body>
<textarea id="text-input" oninput="this.editor.update()"
rows="6" cols="60">Type **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="markdown.js"></script>
<script>
function Editor(input, preview) {
this.update = function () {
preview.innerHTML = markdown.toHTML(input.value);
};
input.editor = this;
this.update();
}
var $ = function (id) { return document.getElementById(id); };
new Editor($("text-input"), $("preview"));
</script>
</body>
</html>
这样就轻松的实现了实时解析转换：
转换后得到的只是最基础的HTML，可以用CSS美化一下，随手将Bootstarp的CSS引用过来看看：
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="padding:30px">
<textarea id="text-input" oninput="this.editor.update()"
rows="6" cols="60">Type **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="markdown.js"></script>
<script>
function Editor(input, preview) {
this.update = function () {
preview.innerHTML = markdown.toHTML(input.value);
};
input.editor = this;
this.update();
}
var $ = function (id) { return document.getElementById(id); };
new Editor($("text-input"), $("preview"));
</script>
</body>
</html>
效果如下：
在线体验地址： http://www.richerdyoung.cn/markdown/
markdown 基于语法： http://www.cnblogs.com/richerdyoung/p/7084055.html
【markdown】使用 js 实现自己得markdown 网页编辑器的更多相关文章
- 原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- node.js基础模块http、网页分析工具cherrio实现爬虫
node.js基础模块http.网页分析工具cherrio实现爬虫 一.前言 说是爬虫初探,其实并没有用到爬虫相关第三方类库,主要用了node.js基础模块http.网页分析工具cherri ...
- JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_--HTML5中文学习网 http://www.html5cn.com.cn/shili/javascripts/79 ...
- Ueditor百度网页编辑器开发者版java utf-8的使用
index.jsp主要代码: <html> <head> <title>网页编辑器</title> <script type="text ...
- 【HTML5+MVC4】xhEditor网页编辑器图片上传
准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...
- 在JSP中使用CKEditor网页编辑器
为了在我的一个项目使用CKEditor网页编辑器,我开始了寻找应用之法. 我下载了ckeditor_4.3.3_standard和ckeditor-java-core-3.5.3. 之前的版本和现在版 ...
- CKEDITOR (FCKEDITOR) --- 目前最优秀的可见即可得网页编辑器之一
FCKEDITOR 编辑 同义词 CKEditor一般指FCKEDITOR FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写.具备功能强大.配置容易.跨浏览器. ...
- JQuery轻量级网页编辑器 选中即可编辑
目前流行的可视化网页编辑器非常多,像ckeditor.kindeditor.tinyeditor等,虽然功能都非常强大,但是体积都比 较庞大,使用起来也不是很方便.今天我们分享一款基于jQuery的轻 ...
- 网页编辑器CKEditor4.3.1+CKFinder2.4+JW Player6.7（视频播放器）集成
CKEditor是使用最多的一款在线网页编辑器,不仅好用,而且功能强大.易扩展.浏览器兼容性好.另外,CKEditor网页编辑器经常更新.本程序使用的是最新稳定版CKEditor4.3.1,添加使用了 ...
随机推荐
- 欢迎使用markdowm编辑器
欢迎使用Markdown编辑器写博客 [Mark一下CSDN用Markdown的写法而已] 本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown ...
- [Django学习]上传图片
上传图片 当Django在处理文件上传的时候,文件数据被保存在request.FILES FILES中的每个键为<input type="file" name="& ...
- iOS基础--UIView的常见属性
UIView的常见属性以及方法 @property(nonatomic,readonly) UIView *superview; // 获得自己的父控件对象 @property(nonatomic,r ...
- WPF教程二：布局之StackPanel面板
应用程序界面设计中,合理的元素布局至关重要,它可以方便用户使用,并将信息清晰合理地展现给用户.WPF提供了一套功能强大的工具-面板(Panel),来控制用户界面的布局.你可以使用这些面板控件来排布元素 ...
- r语言 技巧总结
1.table函数返回众数,再转为dataframe as.data.frame(table(x)) 2.使用which 返回数组下标 which(rs.list=="rs1008507&q ...
- (一) Qt Model/View 的简单说明
(一) Qt Model/View 的简单说明 .预定义模型 (二)使用预定义模型 QstringListModel例子 (三)使用预定义模型QDirModel的例子 (四)Qt实现自定义模型基于QA ...
- 关于Cocos2d-x中图集中图片的调用
1.首先在Resources文件夹下要有打包好的图集文件和相同名称的plist文件. shoot.png shoot.plist shoot_background.png shoot_backgrou ...
- Struts2中带参数的结果集
2.首先,新建一个struts2项目,项目名为ResultParam,打开index.jsp页面,修改编码格式为utf-8,添加一个超链接,用于向结果集传参数,完整代码如下: 相应的struts.xm ...
- HDF5 文件格式简介
三代测序下机的原始数据不再是fastq格式了,而是换成了hdf5 格式,在做三代数据的分析之前,有必要先搞清楚hdf5 这种文件格式; 官网的链接如下:https://support.hdfgroup ...
- postman从入门到精通
今天总监让我给测试同事们培训postman,使用过postman的朋友应该知道,这个简直就是前后端接口调试神器.根据平时的经验以及自己到网上看了相关的帖子,对于postman又有了新的认识. post ...