这几天忙着使用Python+Django+sqlite 搭建自己的博客系统，但是单纯的使用H5的TextArea，简直太挫了有木有。所以，就想模仿一下人家内嵌到网页上的Markdown编辑器，从而让自己的博客系统更加美观一点。

准备

需要什么

  • Markdown“解释器”：便于处理文本输入以及实时预览

  • Bootstrap模板 ：建议的H5界面看起来并不好看，所以使用这个框架美化一下。

  • Sublime Text：当然也可以是记事本或者其他的文本编辑器，这就是我们编写处理逻辑的工具而已。

下载及安装

简单版

我们可以在桌面上创建一个文件夹，方便我们进行管理。

然后将刚才下载的那个markdown-js/releases解压咯，把里面的js文件放到这个文件夹下面即可。

然后在创建一个html文件即可，大致可以如下：

<!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>

效果如下：

美化版

这个界面确实是不好看，所以加点美化效果。这里使用的是Bootstrap。

<!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>

效果如下图：

增强版

这样看着布局什么的也不够好看，所以我就多加了点元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Markdown本地练习</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body style="padding:30px;background:#e6e6e6;">
<div style="width:100%;padding:7px;">
<button type="button" align="center" class="btn btn-primary btn-lg" style="font-size:30px;">
  <span class="glyphicon glyphicon-user"></span> 嗨，左边输入markdown语句，右边实时预览
</button>
</div>
<textarea id="text-input" oninput="this.editer.update()" style="width:50%;height:768px; background:#CBEFD9;font-size:22px;">
</textarea>
<div id="preview" style="float:right;width:50%;height:100%; border:0.5px solid #315;background:#e6e6e6;"></div>
<script src='markdown.js'></script>
<script type="text/javascript">
    function Editor(input , preview){
        this.update = function(){
            preview.innerHTML = markdown.toHTML(input.value);
        };
        input.editer = this
        this.update()
    }

    var $ = function(id) {
        return document.getElementById(id)
    }
    new Editor($("text-input"),$("preview"))
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

效果如下：

总结

相信大家也看出来了，虽然已经是增强版了，但是这并不是这个小程序的极限。我们可以利用JavaScript以及Bootstrap实现更好看的页面效果。

我们可以在本地练习Markdown的语法，同时也可以将这个代码放到我们的博客系统上，来提升用户体验！

自己写一个网页版的Markdown实时编辑器的更多相关文章

  1. 用原生JS写一个网页版的2048小游戏（兼容移动端）

    这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...

  2. 写一个迷你版Smarty模板引擎，对认识模板引擎原理非常好（附代码）

    前些时间在看创智博客韩顺平的Smarty模板引擎教程,再结合自己跟李炎恢第二季开发中CMS系统写的tpl模板引擎.今天就写一个迷你版的Smarty引擎,虽然说我并没有深入分析过Smarty的源码,但是 ...

  3. 转---写一个网页进度loading

    作者:jack_lo www.jianshu.com/p/4c93f5bd9861 如有好文章投稿,请点击 → 这里了解详情 loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在 ...

  4. 动手写一个简单版的谷歌TPU-矩阵乘法和卷积

    谷歌TPU是一个设计良好的矩阵计算加速单元,可以很好的加速神经网络的计算.本系列文章将利用公开的TPU V1相关资料,对其进行一定的简化.推测和修改,来实际编写一个简单版本的谷歌TPU.计划实现到行为 ...

  5. 动手写一个简单版的谷歌TPU-指令集

    系列目录 谷歌TPU概述和简化 基本单元-矩阵乘法阵列 基本单元-归一化和池化(待发布) TPU中的指令集 SimpleTPU实例: (计划中) 拓展 TPU的边界(规划中) 重新审视深度神经网络中的 ...

  6. 写一个网页进度loading

    作者:jack_lo www.jianshu.com/p/4c93f5bd9861 如有好文章投稿,请点击 → 这里了解详情 loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在 ...

  7. 手写一个简版 asp.net core

    手写一个简版 asp.net core Intro 之前看到过蒋金楠老师的一篇 200 行代码带你了解 asp.net core 框架,最近参考蒋老师和 Edison 的文章和代码,结合自己对 asp ...

  8. 来，我们手写一个简易版的mock.js吧（模拟fetch && Ajax请求）

    预期的mock的使用方式 首先我们从使用的角度出发,思考编码过程 M1. 通过配置文件配置url和response M2. 自动检测环境为开发环境时启动Mock.js M3. mock代码能直接覆盖g ...

  9. 教你用纯Java实现一个网页版的Xshell（附源码）

    前言 最近由于项目需求,项目中需要实现一个WebSSH连接终端的功能,由于自己第一次做这类型功能,所以首先上了GitHub找了找有没有现成的轮子可以拿来直接用,当时看到了很多这方面的项目,例如:Gat ...

随机推荐

  1. 51nod 1752 哈希统计

    Description Solution 考虑用倍增来处理答案: 设 \(f[i][j]\) 表示长度恰好为 \(2^{i}\) 的哈希值为 \(j\) 的字符串的种数 \(dp[i][j]\) 表示 ...

  2. 51 nod 1055 最长等差数列(dp)

    1055 最长等差数列 基准时间限制:2 秒 空间限制:262144 KB 分值: 80 难度:5级算法题 N个不同的正整数,找出由这些数组成的最长的等差数列.     例如:1 3 5 6 8 9 ...

  3. 2015 多校联赛 ——HDU5371（manacher + 枚举）

    Sample Input 1 10 2 3 4 4 3 2 2 3 4 4   Sample Output Case #1: 9 要求找出一段数字. 将其分成3部分,第①和第②部分成回文字串,第②和第 ...

  4. 手机上的ROM与RAM

    ROM:read only memory翻译为只读存储器. RAM:read access memory翻译为随机存储器. 下面是一张手机的配置参数表. 简单来说,RAM就是真正意义上的内存,而ROM ...

  5. getBoundingClientRect方法获取元素在页面中的相对位置

    获取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,offset获取位置会形成"回溯".而 getBou ...

  6. Future学习

    接着上一篇继续并发包的学习,本篇说明的是Callable和Future,它俩很有意思的,一个产生结果,一个拿到结果.        Callable接口类似于Runnable,从名字就可以看出来了,但 ...

  7. 轻松理解AOP问题

    先说一个Spring是什么吧,大家都是它是一个框架,但框架这个词对新手有点抽象,以致于越解释越模糊,不过它确实是个框架的,但那是从功能的角度来定义的,从本质意义上来讲,Spring是一个库,一个Jav ...

  8. request.url 端口 错误

    今天遇到一个很奇怪的事情,用request.url.port来获取一个请求的端口,返回是80 ,很纳闷啊我的请求上面是http://www.XX.com:8088 啊,怎么会是80啊,太不可思议了! ...

  9. eclipse中创建完整的maven项目

    使用eclipse插件创建一个web project 首先创建一个Maven的Project如下图 我们勾选上Create a simple project (不使用骨架) 这里的Packing 选择 ...

  10. Linux的哲学思想

    1.一切皆文件:2.单一目的的小程序:3.组合小程序完成复杂任务:4.文本文件保存配置信息:5.尽量避免捕获用户接口:6.提供机制,而非策略. 说到底Linux的哲学思想在于方便和更好的管理后台,不同 ...