富文本和封面制作
1. 富文本編輯器的實現(xiàn)步驟
添加如下的 layui 表單行：
<div class="layui-form-item"><!-- 左側的 label --><label class="layui-form-label">文章內容</label><!-- 為富文本編輯器外部的容器設置高度 --><div class="layui-input-block" style="height: 400px;"><!-- 重要：將來這個 textarea 會被初始化為富文本編輯器 --><textarea name="content"></textarea></div> </div>導入富文本必須的 script 腳本：
<!-- 富文本 --> <script src="/assets/lib/tinymce/tinymce.min.js"></script> <script src="/assets/lib/tinymce/tinymce_setup.js"></script>調用 initEditor() 方法，初始化富文本編輯器：
// 初始化富文本編輯器 initEditor()2. 圖片封面裁剪的實現(xiàn)步驟
在 <head> 中導入 cropper.css 樣式表：
<link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />在 <body> 的結束標簽之前，按順序導入如下的 js 腳本：
<script src="/assets/lib/jquery.js"></script> <script src="/assets/lib/cropper/Cropper.js"></script> <script src="/assets/lib/cropper/jquery-cropper.js"></script>在表單中，添加如下的表單行結構：
<div class="layui-form-item"><!-- 左側的 label --><label class="layui-form-label">文章封面</label><!-- 選擇封面區(qū)域 --><div class="layui-input-block cover-box"><!-- 左側裁剪區(qū)域 --><div class="cover-left"><img id="image" src="/assets/images/sample2.jpg" alt="" /></div><!-- 右側預覽區(qū)域和選擇封面區(qū)域 --><div class="cover-right"><!-- 預覽的區(qū)域 --><div class="img-preview"></div><!-- 選擇封面按鈕 --><button type="button" class="layui-btn layui-btn-danger">選擇封面</button></div></div> </div>美化的樣式：
/* 封面容器的樣式 */ .cover-box {display: flex; }/* 左側裁剪區(qū)域的樣式 */ .cover-left {width: 400px;height: 280px;overflow: hidden;margin-right: 20px; }/* 右側盒子的樣式 */ .cover-right {display: flex;flex-direction: column;align-items: center; }/* 預覽區(qū)域的樣式 */ .img-preview {width: 200px;height: 140px;background-color: #ccc;margin-bottom: 20px;overflow: hidden; }實現(xiàn)基本裁剪效果：
// 1. 初始化圖片裁剪器var $image = $('#image')// 2. 裁剪選項var options = {aspectRatio: 400 / 280,preview: '.img-preview'}// 3. 初始化裁剪區(qū)域$image.cropper(options)3. 更換裁剪的圖片
拿到用戶選擇的文件
var file = e.target.files[0]根據選擇的文件，創(chuàng)建一個對應的 URL 地址：
var newImgURL = URL.createObjectURL(file)先銷毀舊的裁剪區(qū)域，再重新設置圖片路徑，之后再創(chuàng)建新的裁剪區(qū)域：
$image.cropper('destroy') // 銷毀舊的裁剪區(qū)域.attr('src', newImgURL) // 重新設置圖片路徑.cropper(options) // 重新初始化裁剪區(qū)域4. 將裁剪后的圖片，輸出為文件
$image.cropper('getCroppedCanvas', { // 創(chuàng)建一個 Canvas 畫布width: 400,height: 280}).toBlob(function(blob) { // 將 Canvas 畫布上的內容，轉化為文件對象// 得到文件對象后，進行后續(xù)的操作})總結
- 上一篇： Git图形化管理工具
- 下一篇： Ajax — 大事件项目（第四天）