【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,添加使用了 ...
随机推荐
- VMWare虚拟机安装创建虚拟机的使用教程
VMWare虚拟机安装创建虚拟机的使用教程 在配置虚拟机之前需要安装它,VMWare软件的安装过程比较简单,在安装在之前应该先看下说明文档.下面以VMWare Workstation6.5虚拟机 ...
- [转]ListView学习笔记（二）——ViewHolder
在android开发中Listview是一个很重要的组件,它以列表的形式根据数据的长自适应展示具体内容,用户可以自由的定义listview每一列的布局,但当listview有大量的数据需要加载的时候, ...
- Win7/Win8下双击执行jar程序的方法
问题 老妈喜欢看小说,又不会下载,于是用Java写了个自己主动下载小说的小程序 我用的Swing UI.直接生成了.jar文件,双击就可以执行 非常诡异的是.用Eclipse直接run能够执行,可是E ...
- tomcat7项目启动报错java.lang.NoClassDefFoundError: org/apache/juli/logging/LogFactory
报这个错说明用的是tomcat7 打开myeclipse,Preferentces->MyEclipse->Servers->Tomcat->Tomcat 6.x ,载入 ...
- PCL,VTK及其依赖库的编译-十分详细
所有库的编译教程都很详细,全都上传到百度文库. 1.VS2013-Qt5.5.1-动态编译-VTK7.0.0http://wenku.baidu.com/view/749528a433687e21ae ...
- 利用jQuery进行三行两列等高布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery-easyui 中表格的行编辑功能
具体实现代码如下: <table id="tt"></table> $('#tt').datagrid({ title:'Editable DataGrid ...
- [svn] 在线安装
SVN地址:http://subclipse.tigris.org/update_1.6.x/
- 将ORACLE数据库更改为归档模式；写出步骤
解答:具体步骤如下: 1),以exp方式在线备份数据库到指定位置: 2),观察当前数据库是以服务器参数文件(spfile)方式启动还是以参数文件(pfile)方式启动: SQL> show pa ...
- e664. 在图像中获取子图像
// From an Image image = createImage(new FilteredImageSource(image.getSource(), new CropImageFilter( ...