直播服务器搭建方法
直播服务器搭建流程
- 服务器上安装node-media-server
- 本地安装ffmpeg
- 测试推流
- 浏览器查看直播内容
1. 安装node-media-server
## 在服务器上启动node-media-server 服务
docker run --name nms -d -p 1935:1935 -p 8000:8000 -p 8443:8443 illuspas/node-media-server
2. 本地安装 ffmpeg
- 下载解压对应版本的ffmpeg到本地: https://github.com/BtbN/FFmpeg-Builds/releases
- 添加环境变量
3. 测试推流
## 在本地找到视频文件目录, 执行推流命令
ffmpeg -re -i hello.mp4 -c copy -f flv rtmp://localhost/live/hello
4. 浏览器查看直播
使用NodePlayer.js 播放直播内容: https://github.com/illuspas/NodePlayer.js
<canvas id="video" width="640" height="480" data-url="ws://localhost:8000/live/hello"></canvas>
<input type="button" onclick="play()" value="play">
<script src="NodePlayer.js"></script>
<script>
function play() {
var url = document.getElementById("video").dataset.url;
var np = new Module.NodePlayer();
np.setPlayView('video');
np.setScaleMode(1);
np.on('start', () => {
Module.print('NodePlayer on start');
});
np.on('close', () => {
Module.print('NodePlayer on close');
});
np.on('error', (err) => {
Module.print('NodePlayer on error', err);
});
// np.enableVideo(true);
// np.enableAudio(true);
np.start(url);
}
</script>
相关下载
- node-media-server: https://github.com/illuspas/Node-Media-Server
- ffmpeg: https://github.com/BtbN/FFmpeg-Builds/releases
- NodePlayer: https://github.com/illuspas/NodePlayer.js
Espruino单片机上的javascript
话说一直想用javascript语法写单片机程序, 因为我本身是web开发出身, 太熟悉js语法了, 以至于看到c 或 python都感觉很别扭, 于是就在网上找到了这个espruino, espruino是一个固件, 可以让esp8266等芯片支持使用js语法编程, 大大减少了web人员学习单片机开发的成本, 甚至可以让本身会js的人直接上手, 了解基础api后, 就可以直接开发自己的单片机项目了, 这里是官网: https://www.espruino.com/ , Espruino文档: http://www.espruino.com/Reference#software
但是, 官网提供的开发工具用着很不习惯, 而且代码都在一个文件中, 很不方便管理.
于是我就自己根据espruino的api, 自己写了个命令行工具, 可以使用自己熟练的ide, 然后配合命令行工具进行开发, 执行的时候就像nodejs一样方便, 目前这个命令行工具叫espjs, 文档地址: https://www.kancloud.cn/shuai/espjs
espjs开源地址 github: https://github.com/zhaishuaigan/espjs
espjs国内下载: https://fetch.ngapp.net/soft/espjs/espjs-latest.zip
这里简单说明一下使用方法:
- 将此压缩包里面的文件放到不包含空格和中文的目录中. 如 c:\espruino-tools
- 配置系统环境变量path, 添加 c:\espruino-tools
- 进入项目目录, 在目录的地址栏输入 cmd, 进入命令行.
- 输入espjs flash esp01s 烧写espruino固件
- 输入espjs upload 上传当前目录中的代码到设备
然后设备就开始运行代码了, 之后修改代码只需要执行upload 即可更新代码,
实例可参考 demo 目录下的文件
index.js 或 main.js 会被当做入口文件加载执行
注意事项:
1: 端口是自动选择的, 插上设备后会自动选择, 如果有多个设备, 可以使用port命令切换设备
2: 默认的波特率是115200, 如需修改请到config.json中修改
3: 如果要增加开发板支持, 请到config.json 的Flash字段追加
4: 模块不支持远程加载, 例如 require(“MQTT”) 会提示模块不存在, 解决方法是 手动下载mqtt模块(espjs modules add MQTT), 然后使用 require(“modules/MQTT.min.js”) 进行引用.
Ant Design
一个服务于企业级产品的设计体系,基于『确定』和『自然』的设计价值观和模块化的解决方案,让设计者专注于更好的用户体验。
官网: https://ant.design/index-cn
文档: https://ant.design/docs/react/introduce-cn
Ant Design of React
这里是 Ant Design 的 React 实现,开发和服务于企业级后台产品。
特性
- 提炼自企业级中后台产品的交互语言和视觉风格。
- 开箱即用的高质量 React 组件。
- 使用 TypeScript 构建,提供完整的类型定义文件。
- 全链路开发和设计工具体系。
支持环境
- 现代浏览器和 IE9 及以上(需要 polyfills)。
- 支持服务端渲染。
- Electron
安装
使用 npm 或 yarn 安装#
我们推荐使用 npm 或 yarn 的方式进行开发,不仅可在开发环境轻松调试,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。
$ npm install antd --save
$ yarn add antd
如果你的网络环境不佳,推荐使用 cnpm。
浏览器引入
在浏览器中使用 script 和 link 标签直接引入文件,并使用全局变量 antd。
我们在 npm 发布包内的 antd/dist 目录下提供了 antd.js antd.css 以及 antd.min.js antd.min.css。你也可以通过 或 UNPKG 进行下载。
强烈不推荐使用已构建文件,这样无法按需加载,而且难以获得底层依赖模块的 bug 快速修复支持。
注意:3.0 之后引入 antd.js 前你需要自行引入 moment。
示例
import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);
引入样式:
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
按需加载
下面两种方式都可以只加载用到的组件。
使用 babel-plugin-import(推荐)。
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
]
}
注意:webpack 1 无需设置 libraryDirectory。
然后只需从 antd 引入模块即可,无需单独引入样式。等同于下面手动引入的方式。
// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'antd';
手动引入
import DatePicker from 'antd/lib/date-picker'; // 加载 JS
import 'antd/lib/date-picker/style/css'; // 加载 CSS
// import 'antd/lib/date-picker/style'; // 加载 LESS
自动生成免费 letsencrypt ssl 证书的全自动 nginx 反向代理 docker 镜像
转载, 原文地址: https://github.com/Neilpang/nginx-proxy/wiki
本文是介绍一个 docker 镜像的, 可以全自动实现反向代理, 并自动配置 ssl 证书.
这里主要说两个问题:
- 对于只有一个公网 ip 的 docker host, 如果想在其中跑多个 web server 就有问题了, 因为 80 端口只能分配给一个 docker container. 怎么办, 一个好办法就是开一个反向代理. 把 80 端口分配给反向代理, 然后反向代理再根据域名分发给不同的内部 docker container. 看起来很简单对吧, 这没什么. 但是你一旦关闭重启内部的 web server container, 它的内部 ip 可能就会发生改变, 此时你不得不修改反向代理的配置, 并重新加载. 这些工作能不能自动完成 ?
- 第二个问题, 反向代理上能不能自动配置 ssl 证书. letsencrypt 不是有免费证书吗?
很好, 这两个问题的答案都是肯定的. 分三步来说. 不用担心, 非常简单, 本文不会很长, 你会在几分钟只内完成.
1. 先说第一个问题. 自动配置 docker 反向代理.
用 nginx 镜像做一个反向代理, 并且能根据当前 docker host 的 container 的变化, 自动配置反向代理的 ip 和端口.
这个问题其实早就有人解决了, 比如这两个项目:
使用 docker api 可以自动监控 container 变化, 根据模板生成配置文件.
https://github.com/jwilder/docker-gen
作者另外的一个项目, 专门实现了 nginx 的反向代理.
https://github.com/jwilder/nginx-proxy
如果你只需要反向代理, 并不需要自动配置 ssl 的话, 本文你读到这里就可以了.
2. 为 nginx 反向代理自动配置 ssl
为了自动配置 ssl, 我 fork 了上面的项目, 并做了少量修改, 加入了 acme.sh 的支持, 可以实现全自动 配置 ssl 证书.
https://github.com/Neilpang/nginx-proxy
并且已经在 docker hub 上发布了 trusted build:
docker pul neilpang/nginx-proxy
3. 第三步, 快速上手
首先在运行反向代理:
mkdir proxy
cd proxy
docker run \
--rm -it -d \
-p 80:80 \
-p 443:443 \
-v /var/run/docker.sock:/tmp/docker.sock:ro \
-v $(pwd)/certs:/etc/nginx/certs \
-v $(pwd)/acme:/acmecerts \
neilpang/nginx-proxy
稍微解释一下: 运行一个反向代理 并把 80 和 443 端口都分配给它. 并且把 /var/run/docker.sock 传递给 container , 这是 docker api 操作文件.
现在可以运行你的 web server container 了:
先把你的一个域名解析到 docker host ip, 例如: example.com
然后, 我们随便启动一个 webserver:
docker run --rm -itd \
-e VIRTUAL_HOST=example.com \
--name test \
httpd
注意到上面的参数了吗: -e VIRTUAL_HOST=example.com
我们在上一步中运行的 neilpang/nginx-proxy 会自动监控这个 host 上的每一个 container 的变化. 如果发现有 VIRTUAL_HOST 变量, 就会自动配置反向代理.
试试访问你的域名:
http://example.com
现在给这个反向代理配置 ssl:
在此之前,请确保你的域名已经指向了主机 ip, 因为 letsencrypt 证书需要验证域名所有权.
docker kill test
docker run --rm -itd \
-e VIRTUAL_HOST=example.com \
-e ENABLE_ACME=true \
--name test \
httpd
注意到不同了吗, 仅仅多了一个变量: ENABLE_ACME=true
大概几十秒之后, ssl 证书就会自动配置成功了.
访问试试:
https://example.com
注意, 这个证书是自动配置的, 今后会自动更新, 让你完全忘了它的存在.
有多个域名绑定: 用逗号分隔.
docker kill test
docker run --rm -it -d \
-e VIRTUAL_HOST=example.com,www.example.com \
-e ENABLE_ACME=true \
--name test \
httpd
另外, 这个镜像还有一个好处就是已经配置了从 http 跳转到 https, 并且自动启用 http 2.0
反代 非 80 的自定义端口:
加上: VIRTUAL_PORT=8080
即可
docker run --rm -itd \
-e VIRTUAL_HOST=example.com,www.example.com \
-e ENABLE_ACME=true \
-e VIRTUAL_PORT=8080 \
--name test \
httpd
比如搭建gogs 服务器:
docker run -itd --restart always \
--name gogs \
-e VIRTUAL_HOST=git.ngapp.net \
-e ENABLE_ACME=true \
-e VIRTUAL_PORT=3000 \
-v /data/gogs:/data \
gogs/gogs
原文链接: https://github.com/Neilpang/nginx-proxy/wiki
希望能帮到更多人,节约你的时间和精力.
欢迎大家转载 请保留链接.
欢迎 star:
Vant - 有赞移动端 Vue 组件库
A Vue.js 2.0 Mobile UI at YouZan
特性
- 50+ 个经过有赞线上业务检验的组件
- 单元测试覆盖率超过 90%
- 完善的中英文文档和示例
- 支持 babel-plugin-import
- 支持 TypeScript
- 支持 SSR
安装
npm i -S vant
快速上手
方式一. 使用 babel-plugin-import (推荐)
# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D
// 在 .babelrc 或 babel-loader 中添加插件配置
// 注意:webpack 1 无需设置 libraryDirectory。
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
接着你可以在代码中直接引入 Vant 组件,插件会自动将代码转化为方式二中的按需引入形式。
import { Button } from 'vant';
方式二. 按需引入组件
import Button from 'vant/lib/button';
import 'vant/lib/vant-css/base.css';
import 'vant/lib/vant-css/button.css';
方式三. 导入所有组件
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/vant-css/index.css';
Vue.use(Vant);
CDN
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css">
<!-- 引入组件 -->
<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
更多内容请参考 快速上手.
贡献代码
修改代码请阅读我们的 开发指南。
使用过程中发现任何问题都可以提 Issue 给我们,当然,我们也非常欢迎你给我们发 PR。
浏览器支持
现代浏览器以及 Android 4.0+, iOS 6+.
手机预览
可以手机扫码以下二维码访问手机端 demo:
链接
开源协议
本项目基于 MIT 协议,请自由地享受和参与开源。
基于 Composer 的 PHP 模块化开发
转载, 文章原始地址: https://zhuanlan.zhihu.com/p/27943241
订阅号:假装我会写代码
这个话题之前是在微博公司内部做的技术分享,这里拿出来分享给大家。
基于 GitHub 或者其它平台托管的开源项目的引入大家应该都已经非常熟悉了,但是公司内部项目的模块化应该怎么做呢?这或许是不少朋友头疼的问题。
我们先聊聊 PHP 模块化开发演进的过程,在没有 GitHub 之前,我们大家获取与分享代码的方式主要是博客,国内的 CSDN 或者博客园还有很多很多,大家都是从文章内复制到自己项目里面使用。现在看起来真的是相当原始粗暴,但是那个时代也没有太多可选的方案。导致的现象就是一段代码在 N 个项目里出现,可能见得最多的就是获取客户端 IP 的那几行了,在互联网上不止出现了几万遍。现在很多项目里都还是这段:
是不是很熟悉?
这种引入代码的方式有很多弊端:比如不安全,因为很多人是直接复制粘贴就用上了,根本没花时间去考证它是否真的是安全的。另外一个问题就是不同步,你今天在别人那里复制过来就用上了,后来作者发现了 bug 并修复更新了文章也不会通知你,你也不可能记得这段代码来自哪里去检查更新。
在没有 Composer 之前我们是如何引入代码的呢?除了上面说的复制粘贴以外,在 PHP 中还有 pear,不过自从用过两次我就再也不用它了,一种说不出来的感觉。
不信你可以找一些旧的项目看看,在没有 Composer 之前的项目中,你会发现大量的重复代码,以及各种花样的组织格式,各种规范的写法。这也是 Composer 诞生的原因之一。
Composer 给我们带来了诸多的好处:
- 模块化,降低代码重用成本
- 统一的第三方代码组织方式
- 更科学的版本更新
这三个是比较重要的特征了,基于 GitHub 的共享代码方式解决了传统引入方式带来了各种问题。
我们先来了解一点 Composer 基础。
Composer 的实现结构相对比较简单,http://Packagist.org 是 Composer 官方数据源,它的数据基于 GitHub 等代码托管平台,你在本地使用 Composer 命令行工具,基于 http://Packagist.org 的数据信息安装与更新依赖。
本地安装 Composer 非常简单,主要有以下几种方式:
新手同学需要注意的是,这里一定要确定 composer 安装目录在环境变量 $PATH 内才能全局使用 composer 命令。
那接下来我们聊一下如何创建一个 Composer 包。
步骤很简单,创建目录,然后在目录内使用命令 composer init
按照提示完成包的初始化。
接着就是完成你的代码编写,然后在 composer.json 文件配置你的引入方式等信息。
然后我们如何对已经写好的代码进行测试呢?
我们需要在其它任何地方建立一个测试项目(不要在刚才创建的包目录就可以),比如这里我们创建一个叫 ‘my-package-test’ 的目录,然后在目录里 composer init 完成项目初始化。接着就是声明项目依赖,我们这里要依赖的就是刚才建立好的包,由于我们的包还没有发布到 packagist,所以是无法直接 composer require 来安装的,我们需要告诉 composer 从哪里加载我们的包信息:
$ composer config repositories.foo path /Users/overtrue/www/foo/bar
我们通过这个命令在 composer.json 中 repositories 区块添加了一个项目源。
然后我们添加包依赖:
$ composer require foo/bar:dev-master -vvv
这样就完成了包的安装,你会发现这样的安装方式它只是创建了一个软链接到包目录,所以,你在测试的时候就可以直接在 vendor/foo/bar 下修改代码,这样就加快了你的开发速度。
更多细节这里你就自己去研究了,我们来看看 composer.json 文件:
我们最需要关心的就是图里上面的三个部分了,包名、依赖、以及自动加载,是必不可少的部分。
刚才我们提到了包的安装,安装依赖包的方式主要有以下两种:
手动方式是不太推荐的,容易写错,比如后面多一个逗号之类的,不过你可以写完以后使用以下命令来验证:
$ composer validate
更新依赖就非常简单了:
虽然在上一篇文章我们已经讲了语义化版本,这里再提一次:
我们在依赖一个包的时候,很多同学对于依赖的版本一直处于蒙逼状态,那看完下一页你就恍然大悟了,首先是两个符号:”~” 与 “^”
接着是版本号的范围的各种写法:
还有包含稳定性的标识:
这里需要说一下生产环境最重要也一直是好多同学不清楚的一个东西:版本锁定,很多人在纠结,要不要把 composer.lock 上传到代码库啊。我可以给你一个特别简单的判断方法:
如果你的代码是一个项目,就上传,如果是一个工具包,给大家用的,就别上传。
在已经存在 composer.lock 的目录执行 composer install 的时候,是不会分析包依赖的,它只是按 composer.lock 中描述的下载地址直接下载,所以会快很多,而且版本号是具体的。那怕包已经发了新版,只要 composer.lock 没动过,它就会按 composer.lock 里的版本来安装。composer update 时会更新 composer.lock,所以不要乱用 composer update。
包开发好了怎么发布?开源的方式是这样的:
最后一句请酌情考虑。
另外一种发布方式是闭源,公司内部用的包,上传到 GitLab 或者其它私有的代码托管平台,有两种玩法:
最容易的玩法,在 composer.json 中添加 repositories 直接用 vcs 指定代码库地址
这样做有一个缺点,当你的包很多的时候,你全都得在 composer.json 中加上才行。自已架设 Packagist 类似的服务,Packagist 官方提供了两款: toran,收费,开源方案是 Satis,不过它偏手动一些,自己酌情选择即可。
私有包有一个点需要注意:授权,私有包肯定都是需要授权才能访问的,这里由于方案不太通用,大家根据自己的场景来解决就好了。
另外,有一些痛点不晓得啥时候能够解决:
好在 Laravel China 已经为了我提供了国内目前最稳定最好用的镜像源,Composer 中文镜像 / Packagist 中国全量镜像正式发布!
最后总结一下:
在 PHP 现代开发中,Composer 已经是离不开的东西了,它的确加快了我们的开发速度节省了开发成本,如果你还在纠结用不用 Composer,那你真得反思一下了。
本文标题是模块化开发,内容主要介绍了包的创建与测试,以及公有包与私有包的发布方案。但是无法帮你解决,如何拆分项目这类问题,这得基于你的长期经验积累,但是有一些经验可以分享一下:
不要过度设计,很多自以为很 NB 我不把学到的东西用上就是不爽的同学,上来就分库分表,uuid 做主键之类,项目运营了好几年一个表还没到100万条记录,也是够厉害的。
不要过早设计,真正 NB 的架构是演进而来的,不是前期设计出来的,当然不是说完全不需要设计哈,恰当的根据实际情况来就好,不要立项就把“千万”、“亿级”、“百亿” 这些单位挂在嘴边,也许到你项目倒闭那天你都没到过任何一个量级。随着项目逐渐改进即可。
优先关注成本,很多同学以为是性能,No! 技术团队真正的成本是人力,所以开发效率才是优先需要关注的。上次文章在发在知乎有人就强制把我的“不要首先关注性能”解读成了“性能不重要”,也是够厉害的,语文也许跟养殖场动物学的。数学正常一点的人都会算,一台服务器多少钱?一个技术员工多少钱?服务器你花 20 万是永久资产,一个员工 20 万呢?半年工资?一年工资?
docker的web管理工具
海鸥
简介
Seagull 友好的docker Web界面管理工具
- 易于安装和卸载在Docker容器
- 单击开始/停止/删除容器和镜像
- 超快速(小于10ms)的搜索和过滤
- 支持多主机管理和监控
- 国际化主要包括英语、汉语、德语和法语
更多信息, 请到 dockerseagull.com, 观看 三分钟视频 和 官方的幻灯片.
github地址
点击跳转: https://github.com/tobegit3hub/seagull
安装
docker run -d -p 10086:10086 -v /var/run/docker.sock:/var/run/docker.sock tobegit3hub/seagull
或运行 docker-compose up -d
.
截图
多主机
Seagull支持监控多台服务器。确保你开始Docker守护这样。
docker -H tcp://0.0.0.0:2375 -H unix:///var/run/docker.sock -api-enable-cors=true -d
参与
Seagull is written in Go with tools like Docker, Beego, AngularJS, Bootstrap and JQuery.
- Install golang and setup
$GOPATH
go get github.com/astaxie/beego
go get github.com/tobegit3hub/seagull
go build seagull.go
sudo ./seagull
More detail in seagull-design-and-implement and we have excellent documents in docs.
提醒
The issue #2 每个人都可以在IP和端口海鸥接触访问您的码头工人守护。为了安全,你可以绑定到本地主机的访问限制。
docker run -d -p 127.0.0.1:10086:10086 -v /var/run/docker.sock:/var/run/docker.sock tobegit3hub/seagull
类似的Docker项目
现在有很多类似的项目提供了Web界面来监控Docker。海鸥就是受他们影响并且期望做得比他们更好。
我想把这些项目都介绍给你们,任何人都可以根据他们所需要的进行选择。
Dockerui
这是它的Github主页,https://github.com/crosbymichael/dockerui.
你可以发现海鸥的UI是有点像Dockerui。因为我们都使用了Bootstrap和AngularJS作为前端框架。它是一个很好的项目并且在Github上有差不多2000个关注。
海鸥从Dockerui中学习了很多,包括使用JQuery.Gritter作为网站通知。但Dockerui的界面不够简洁,而且它没有考虑到国际化的需求,而我们考虑到了。我们愿意为全世界的开发者多做些事情。Dockerui还没有实现搜索功能而海鸥则很擅长这点。
Dockerui和海鸥是同类型产品,用于监控Docker。你没必要同时使用他们。而我们的目标就是用一个更友好、更实用的UI满足用户,并且取代Dockerui。
Zdocker
这是它的Github主页,https://github.com/love320/Zdocker.
Zdocker做了同类的事情来监控Docker镜像和容器。但它是使用Java实现的,而且没有提供Docker镜像,而且人们很难使用和学习。
这只能算是个人项目,我并不建议你去使用。因为目前为止我也不知道该怎样去运行它。
Shipyard
这是它的Github主页,https://github.com/shipyard/shipyard.
Shipyard设计来管理一个Docker集群。你必须输入服务器的SSH认证代码才能部署Shipyard引擎。然后你就可以通过命令行或者Web界面在你管理的服务器上部署容器了。
它和海鸥是非常不同的,因为海鸥仅仅是监控Docker而不会要求更多的权限。因此你可以使用Shipyard作为管理系统,同时使用海鸥来监控Docker。
CAdvisor
这是它的Github主页,https://github.com/google/cadvisor.
CAdvisor来自于Google,它主要是为了分析容器的资源。你可以使用它来监控你的容器占用CPU或者内存的历史情况。
然后,你不能用CAdivsor来管理你的镜像和容器。
Docker Registry Web
这是它的Github主页,https://github.com/atc-/docker-registry-web.
这是为Docker参与设计的Web界面。它的UI展示不错但你必须手动添加私有仓库地址。它用了Cookies来存储这个地址所以每次你运行时都要重新添加。
当我尝试去搜索Docker镜像时程序崩溃了。当我尝试去或者镜像详细信息的时候它显示“方法未授权”。
我希望他们可以在我们添加私有仓库时就默认添加Docker官方仓库。但我不太可能因为http://registry.hub.docker.com不支持CORS。
Docker Registry UI
这是它的Github主页,https://github.com/worksap-ate/docker-registry-ui.
这也是为Docker仓库设计的Web界面。它能用但是UI不是很好。
Docker Register Frontend
这是它的Github主页,https://github.com/kwk/docker-registry-frontend.
这几乎是跟Docker-registry-web和Docker-registry-ui是一样的东西。
一个markdown编辑器editor.md
Editor.md
Editor.md : The open source embeddable online markdown editor (component), based on CodeMirror & jQuery & Marked.
Features
- Support Standard Markdown / CommonMark and GFM (GitHub Flavored Markdown);
- Full-featured: Real-time Preview, Image (cross-domain) upload, Preformatted text/Code blocks/Tables insert, Code fold, Search replace, Read only, Themes, Multi-languages, L18n, HTML entities, Code syntax highlighting…;
- Markdown Extras : Support ToC (Table of Contents), Emoji, Task lists, @links.html"">@Links…;
- Compatible with all major browsers (IE8+), compatible Zepto.js and iPad;
- Support decode & fliter of the HTML tags & attributes;
- Support TeX (LaTeX expressions, Based on KaTeX), Flowchart and Sequence Diagram of Markdown extended syntax;
- Support AMD/CMD (Require.js & Sea.js) Module Loader, and Custom/define editor plugins;
Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror、jQuery 和 Marked 构建。
主要特性
- 支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法,也可变身为代码编辑器;
- 支持实时预览、图片(跨域)上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能;
- 支持 ToC(Table of Contents)、Emoji表情、Task lists、@links.html">@链接等 Markdown 扩展语法;
- 支持 TeX 科学公式(基于 KaTeX)、流程图 Flowchart 和 时序图 Sequence Diagram;
- 支持识别和解析 HTML 标签,并且支持自定义过滤标签及属性解析,具有可靠的安全性和几乎无限的扩展性;
- 支持 AMD / CMD 模块化加载(支持 Require.js & Sea.js),并且支持自定义扩展插件;
- 兼容主流的浏览器(IE8+)和 Zepto.js,且支持 iPad 等平板设备;
Examples
https://pandao.github.io/editor.md/examples/index.html
Download & install
Bower install :
bower install editor.md
Usages
HTML:
```html