10分钟写一个markdown编辑器
marked.js
Marked是一个Markdown解析引擎。
vue.js
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html, body, #editor {
margin: 0;
height: 100%;
font-family: 'Helvetica Neue', Arial, sans-serif;
color: #333;
}
textarea, #editor div {
display: inline-block;
width: 49%;
height: 100%;
vertical-align: top;
box-sizing: border-box;
padding: 0 20px;
}
textarea {
border: none;
border-right: 1px solid #ccc;
resize: none;
outline: none;
background-color: #f6f6f6;
font-size: 14px;
font-family: 'Monaco', courier, monospace;
padding: 20px;
}
code {
color: #f66;
}
</style>
</head>
<body>
<div id="editor">
<textarea :value="input" @input="update"></textarea>
<div v-html="compiledMarkdown"></div>
</div>
<script type="text/javascript" src="marked.js"></script>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#editor',
data: {
input: '# hello'
},
computed: {
compiledMarkdown: function () {
return marked(this.input, { sanitize: true })
}
},
methods: {
update: function(e) {
this.input = e.target.value;
}
}
})
</script>
</body>
</html>
10分钟写一个markdown编辑器的更多相关文章
- CBrother脚本10分钟写一个拯救“小霸王服务器”的程序
CBrother脚本语言10分钟写一个拯救“小霸王服务器”的程序 到了一家新公司,接手了一坨c++服务器代码,到处内存泄漏,这服务器没有数据库,挂了后重启一下就好了,公司就这么凑活着用了几年了,定时重 ...
- 10分钟实现Typora(markdown)编辑器
本章主要内容: 介绍我们将在接下来的几章中构建的应用程序 配置我们的CSS样式表,使其看起来更像一个本机应用程序 回顾在Electron中主进程和渲染器进程之间的关系 为我们的主进程和渲染器进程实现基 ...
- 10款流行的Markdown编辑器，总有一款适合你
摘要:作为一个开源人,如果你不会使用Markdown语法,那你就OUT了!Markdown 是 2004 年由 John Gruberis 设计和开发的纯文本格式的语法,非常的简单实用. 作为一个开源 ...
- [转载]10款流行的Markdown编辑器
10款流行的Markdown编辑器 http://www.csdn.net/article/2014-05-05/2819623 作为一个开源人,如果你不会使用Markdown语法,那你就OUT了!M ...
- 10 分钟实现一个自己的server监控器
需求 近期须要给自己的server加入监控器.目的是监控server的内存.CPU.磁盘占用率,资源占用率过高的话能给自己发个提醒.当前主流的平台通常会提供邮件.短息.甚至会提供微信提醒,只是这类提醒 ...
- 推荐一个markdown编辑器-Haroopad
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:推荐一个markdown编辑器-Haroopad.
- Python+Flask+Gunicorn 项目实战(一) 从零开始，写一个Markdown解析器 —— 初体验
(一)前言 在开始学习之前,你需要确保你对Python, JavaScript, HTML, Markdown语法有非常基础的了解.项目的源码你可以在 https://github.com/zhu-y ...
- Vue实现一个MarkDown编辑器
Vue实现一个markdown编辑器 前段时间做项目的时候,需要一个Markdown编辑器,在网上找了一些开源的实现,但是都不满足需求 说实话,这些开源项目也很难满足需求公司项目的需求,与其实现一个大 ...
- 10分钟搭建一个小型网页(python django)(hello world！)
10分钟搭建一个小型网页(python django)(hello world!) 1.安装django pip install django 安装成功后,在Scripts目录下存在django-ad ...
随机推荐
- Android中常见的图片加载框架
图片加载涉及到图片的缓存.图片的处理.图片的显示等.而随着市面上手机设备的硬件水平飞速发展,对图片的显示要求越来越高,稍微处理不好就会造成内存溢出等问题.很多软件厂家的通用做法就是借用第三方的框架进行 ...
- MySQL： Fabric 搭建 HA
搭建好Fabric之后,就可以在它的基础上创建HA Group. Shard Group.HA+Shard Group等.这里来说明一下如何快速的搭建HA环境. Fabric 192.168.2.23 ...
- BZOJ1012: [JSOI2008]最大数maxnumber [线段树 | 单调栈+二分]
1012: [JSOI2008]最大数maxnumber Time Limit: 3 Sec Memory Limit: 162 MBSubmit: 8748 Solved: 3835[Submi ...
- CentOS7 + mono +Jexus 环境的搭建
CentOS7的安装和配置 1,从http://www.centos.org/下载CentOS7的镜像,并在VMWare中创建该镜像的虚拟机,为方便操作,把虚拟机的网络连接设置为桥接模式:在安装过程中 ...
- 一步步学习javascript基础篇（9）：ajax请求的回退
需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...
- 基于token的多平台身份认证架构设计
基于token的多平台身份认证架构设计 1 概述 在存在账号体系的信息系统中,对身份的鉴定是非常重要的事情. 随着移动互联网时代到来,客户端的类型越来越多, 逐渐出现了 一个服务器,N个客户端的格 ...
- Entity Framework 6 Recipes 2nd Edition（10-5）译 -> 在存储模型中使用自定义函数
10-5. 在存储模型中使用自定义函数 问题 想在模型中使用自定义函数,而不是存储过程. 解决方案 假设我们数据库里有成员(members)和他们已经发送的信息(messages) 关系数据表,如Fi ...
- Entity Framework 6 Recipes 2nd Edition（11-11）译 -> 在LINQ中调用数据库函数
11-11. 在LINQ中调用数据库函数 问题 相要在一个LINQ 查询中调用数据库函数. 解决方案 假设有一个任命(Appointment )实体模型,如Figure 11-11.所示, 我们想要查 ...
- mysql 列名中 包含斜杠或者空格的处理方式
今天客户那边遇到了一个比较奇葩的问题跑来问我,这个问题比较冷门,所以特别记录下. 问题描述 数据库的字段存在斜杠或者空格的时候,怎么用sql进行insert或者select操作. 问题解答 对于这种特 ...
- H5拍照应用开发经历的那些坑儿
一.项目简介 1.1.项目背景:这是一个在移动终端创新应用的项目,用户在浏览器端(微信/手Q)即可完成与金秀贤的合影,希望通过这样一种趣味体验,引发用户的分享与转发的热潮. 1.2.系统要求:ios6 ...