多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
**第一,下载、并引用 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> ```