## 8.1.鼠標滾輪監聽 :id=mousewheel
模塊名：mousewheel，使用方式：
```javascript
layui.use(['mousewheel'], function () {
var $ = layui.jquery;
// 滾動監聽
$('#xxx').on('mousewheel', function (event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
event.stopPropagation(); // 阻止事件冒泡
event.preventDefault(); // 阻止默認事件
});
});
```
event對象中可以獲取如下三個屬性值：
- deltaX：值為負的（-1），則表示滾輪向左滾動。值為正的（1），則表示滾輪向右滾動。
- deltaY：值為負的（-1），則表示滾輪向下滾動。值為正的（1），則表示滾輪向上滾動。
- deltaFactor：增量因子。通過 deltaFactor * deltaX 或者 deltaFactor * deltaY 可以得到瀏覽器實際的滾動距離。
> 此插件來源于 [jquery-mousewheel](https://github.com/jquery/jquery-mousewheel) 。
<br/>
## 8.2.二維碼模塊 :id=qrcode
模塊名：QRCode，使用方式：
```html
<div id="xxx"></div>
<script>
layui.use(['QRCode'], function () {
var $ = layui.jquery;
var QRCode = layui.QRCode;
// 二維碼
var demoQrCode = new QRCode(document.getElementById("xxx"), {
text: "Hello Word!",
width: 101, // 寬度
height: 101, // 高度
colorDark: "#000000", // 顏色
colorLight: "#ffffff", // 背景顏色
correctLevel: QRCode.CorrectLevel.H
});
// 更換內容
demoQrCode.makeCode("Easyweb");
});
</script>
```
> 此插件來源于 [qrcodejs](https://github.com/davidshimjs/qrcodejs) 。
<br/>
## 8.3.引導插件 :id=introjs
模塊名：introJs，使用方式：
```html
<div data-step="1" data-intro="這是步驟一">步驟一</div>
<div data-step="2" data-intro="這是步驟二">步驟二</div>
<script>
layui.use(['introJs'], function () {
var introJs = layui.introJs;
// 初始化
introJs().start();
});
</script>
```
> 此插件來源于 [intro.js](https://github.com/usablica/intro.js)，對樣式進行了微調。
<br/>
## 8.4.剪貼板 :id=clipboardjs
模塊名：ClipboardJS，使用方式：
```html
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<button id="btnCopy" data-clipboard-target="#foo">復制</button>
<script>
layui.use(['ClipboardJS'], function () {
var ClipboardJS = layui.ClipboardJS;
var clipboard = new ClipboardJS('#btnCopy');
clipboard.on('success', function(e) {
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
});
});
</script>
```
> 此插件來源于 [clipboard.js](https://zenorocha.github.io/clipboard.js) 。
<br>
## 8.5.視頻播放器 :id=player
模塊名：Player，使用方式：
```html
<div id="demoVideo"></div>
<script>
layui.use(['Player'], function () {
var Player = layui.Player;
// 視頻播放器
var player = new Player({
id: "demoVideo",
url: "//s1.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4", // 視頻地址
poster: "https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/1.png", // 封面
fluid: true, // 寬度100%
playbackRate: [0.5, 1, 1.5, 2], // 開啟倍速播放
pip: true, // 開啟畫中畫
lang: 'zh-cn'
});
// 開啟彈幕
var dmStyle = {
color: '#ffcd08', fontSize: '20px'
};
var player = new Player({
id: "demoVideo2",
url: "http://demo.htmleaf.com/1704/201704071459/video/2.mp4", // 視頻地址
autoplay: false,
fluid: true, // 寬度100%
lang: 'zh-cn',
danmu: {
comments: [
{id: '1', start: 0, txt: '空降', color: true, style: dmStyle, duration: 15000},
{id: '2', start: 1500, txt: '前方高能', color: true, style: dmStyle, duration: 15000},
{id: '3', start: 3500, txt: '彈幕護體', color: true, style: dmStyle, duration: 15000},
]
}
});
});
</script>
```
> 視頻播放器使用的是西瓜播放器，更多介紹請前往查看[xgplayer](http://h5player.bytedance.com/)。
<br/>
## 8.6.富文本編輯器 :id=ckeditor
模塊名：CKEDITOR，使用方式：
```html
<textarea id="demoCkEditor"></textarea>
<script>
layui.use(['CKEDITOR'], function () {
var $ = layui.jquery;
var CKEDITOR = layui.CKEDITOR;
// 渲染富文本編輯器
CKEDITOR.replace('demoCkEditor', {height: 450});
var insEdt = CKEDITOR.instances.demoCkEditor; // 獲取渲染后的實例
var content = insEdt.getData(); // 獲取內容
insEdt.setData('<h1>Hello Word!</h1>'); // 設置內容
insEdt.insertHtml('<h1>EasyWeb</h1>'); // 插入內容
});
</script>
```
**圖片上傳配置：**
 打開`ckeditor/config.js`修改`config.filebrowserImageUploadUrl`為你的后端地址。
**文件上傳配置(包括視頻、音頻、flash等)：**
 打開`ckeditor/config.js`修改`config.filebrowserUploadUrl`為你的后端地址。
**上傳接口返回的數據格式：**
 成功：
```json
{
"uploaded": 1,
"fileName": "demo img",
"url": "https://pic.qqtn.com/up/2018-9/15367146917869444.jpg"
}
```
 失敗：
```json
{
"uploaded": 0,
"error": {
"message": "演示環境，不允許上傳，請替換為自己的url"
}
}
```
**配置參數還可以在渲染的時候配置：**
```javascript
CKEDITOR.replace('demoCkEditor', {
height: 450,
filebrowserImageUploadUrl: '你的接口地址'
});
```
**修改操作按鈕布局：**
 前往[toolbarconfigurator](http://whvse.gitee.io/html-test/ckeditor/samples/toolbarconfigurator)在線配置，并修改`ckeditor/config.js`。
<br/>
> 富文本編輯器使用的是`CKEditor4`，并做好了配置及樣式調整。
