1. 富文本編輯器的實現步驟
-
添加如下的
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. 圖片封面裁剪的實現步驟
-
在
<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><!-- 選擇封面區域 --><div class="layui-input-block cover-box"><!-- 左側裁剪區域 --><div class="cover-left"><img id="image" src="/assets/images/sample2.jpg" alt="" /></div><!-- 右側預覽區域和選擇封面區域 --><div class="cover-right"><!-- 預覽的區域 --><div class="img-preview"></div><!-- 選擇封面按鈕 --><button type="button" class="layui-btn layui-btn-danger">選擇封面</button></div></div> </div> -
美化的樣式：
/* 封面容器的樣式 */ .cover-box {display: flex; }/* 左側裁剪區域的樣式 */ .cover-left {width: 400px;height: 280px;overflow: hidden;margin-right: 20px; }/* 右側盒子的樣式 */ .cover-right {display: flex;flex-direction: column;align-items: center; }/* 預覽區域的樣式 */ .img-preview {width: 200px;height: 140px;background-color: #ccc;margin-bottom: 20px;overflow: hidden; } -
實現基本裁剪效果：
// 1. 初始化圖片裁剪器var $image = $('#image')// 2. 裁剪選項var options = {aspectRatio: 400 / 280,preview: '.img-preview'}// 3. 初始化裁剪區域$image.cropper(options)
3. 更換裁剪的圖片
-
拿到用戶選擇的文件
var file = e.target.files[0] -
根據選擇的文件，創建一個對應的 URL 地址：
var newImgURL = URL.createObjectURL(file) -
先
銷毀舊的裁剪區域，再重新設置圖片路徑，之后再創建新的裁剪區域：$image.cropper('destroy') // 銷毀舊的裁剪區域.attr('src', newImgURL) // 重新設置圖片路徑.cropper(options) // 重新初始化裁剪區域
4. 將裁剪后的圖片，輸出為文件
$image.cropper('getCroppedCanvas', { // 創建一個 Canvas 畫布width: 400,height: 280}).toBlob(function(blob) { // 將 Canvas 畫布上的內容，轉化為文件對象// 得到文件對象后，進行后續的操作})
