**第一,下载、并引用 zepto.js 和 zepto.touch.js**
`wangEditor-mobile`基于`zepto`开发,因此页面中要首先引用 `zepto.js` 和 `zepto.touch.js`。可去[zepto中文站](http://www.zeptojs.cn/)下载,或者[点击这里](https://github.com/wangfupeng1988/wangEditor-mobile/tree/master/dist/js/lib)下载。
下载之后,将两者引用到页面内。
```html
<script type="text/javascript" src="../dist/js/lib/zepto.js"></script>
<script type="text/javascript" src="../dist/js/lib/zepto.touch.js"></script>
```
(建议引用写在到<body>底部)
----
**第二,下载、并引用 wangEditor-mobile.js 和 wangEditor-mobile.css**
进入[官网](http://wangeditor.github.io/m/)或者[点击这里](https://github.com/wangfupeng1988/wangEditor-mobile/releases)下载`wangEditor-mobile`的最新代码,解压之后,找到**`dist`文件夹**,文件夹结构如下:
![](https://box.kancloud.cn/2015-12-16_5671787e069bd.png)
将其中的`wangEditor-mobile.js`和`wangEditor-mobile.css`引用到页面中(也可以引用它们丢应的min压缩格式的文件)
**请注意以下两点:**
1. 红框中的 `fonts` 文件夹及其内容,一定要下载下来,并和`wangEditor-mobile.css` 放在同一个目录,否则菜单图标将不显示。
2. `zepto.js` 和 `zepto.touch.js` 一定要引用在 `wangEditor-mobile.js` 的前面。
---
**第三,生成富文本编辑器**
首先,在页面的`<body>`中添加一个`textarea`标签,
```
<textarea id="textarea1" style="width:100%;height:100%;">
<p>请输入内容...</p>
</textarea>
```
然后,可通过该`textarea`生成一个富文本编辑器。**编辑器编辑的内容,也会实时同步到 `textarea` 无需手动同步**
```
<script type="text/javascript">
$(function () {
// ___E 三个下划线
var editor = new ___E('textarea1');
editor.init();
});
</script>
```
运行页面,使用手机(或模拟器)浏览器即可看到效果。
---
**最后,写一个完整的例子**
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>wangEditor mobile test</title>
<link rel="stylesheet" type="text/css" href="../dist/css/wangEditor-mobile.css">
<style type="text/css">
.container {
width:100%;
height:300px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<p>wangEditor-mobile test</p>
<div class="container">
<textarea id="textarea1" style="width:100%;height:100%;">
<p>请输入内容...</p>
</textarea>
</div>
<script type="text/javascript" src="../dist/js/lib/zepto.js"></script>
<script type="text/javascript" src="../dist/js/lib/zepto.touch.js"></script>
<script type="text/javascript" src="../dist/js/wangEditor-mobile.js"></script>
<script type="text/javascript">
$(function () {
// ___E 三个下划线
var editor = new ___E('textarea1');
editor.init();
});
</script>
</body>
</html>
```